Prepare local deployments

.env.local.example

@@ -1,8 +1,7 @@
 # Chatbot UI
 DEFAULT_MODEL=gpt-3.5-turbo
-DEFAULT_SYSTEM_PROMPT=You are ChatGPT, a large language model trained by OpenAI. Follow the user's instructions carefully. Respond using markdown.
-OPENAI_API_KEY=YOUR_KEY
+DEFAULT_SYSTEM_PROMPT=You are SlashLLM, a large language model that assists the user. In doing so, you respond concisely and precisely. You utilize Markdown format in your answers. Always stay close to the user's provided information.
 
 # Google
-GOOGLE_API_KEY=YOUR_API_KEY
-GOOGLE_CSE_ID=YOUR_ENGINE_ID
+# GOOGLE_API_KEY=YOUR_API_KEY
+# GOOGLE_CSE_ID=YOUR_ENGINE_ID

Makefile

@@ -8,7 +8,7 @@ build:
 run:
 	export $(cat .env | xargs)
 	docker stop chatbot-ui || true && docker rm chatbot-ui || true
-	docker run --name chatbot-ui --rm -e OPENAI_API_KEY=${OPENAI_API_KEY} -p 3000:3000 chatbot-ui
+	docker run --name chatbot-ui --rm -p 3000:3000 chatbot-ui
 
 logs:
 	docker logs -f chatbot-ui

components/Chat/Chat.tsx

@@ -27,8 +27,6 @@ import { SystemPrompt } from './SystemPrompt';
 interface Props {
   conversation: Conversation;
   models: OpenAIModel[];
-  apiKey: string;
-  serverSideApiKeyIsSet: boolean;
   defaultModelId: OpenAIModelID;
   messageIsStreaming: boolean;
   modelError: ErrorMessage | null;
@@ -51,8 +49,6 @@ export const Chat: FC<Props> = memo(
   ({
     conversation,
     models,
-    apiKey,
-    serverSideApiKeyIsSet,
     defaultModelId,
     messageIsStreaming,
     modelError,
@@ -154,47 +150,7 @@ export const Chat: FC<Props> = memo(
 
     return (
       <div className="relative flex-1 overflow-hidden bg-white dark:bg-[#343541]">
-        {!(apiKey || serverSideApiKeyIsSet) ? (
-          <div className="mx-auto flex h-full w-[300px] flex-col justify-center space-y-6 sm:w-[600px]">
-            <div className="text-center text-4xl font-bold text-black dark:text-white">
-              Welcome to Chatbot UI
-            </div>
-            <div className="text-center text-lg text-black dark:text-white">
-              <div className="mb-8">{`Chatbot UI is an open source clone of OpenAI's ChatGPT UI.`}</div>
-              <div className="mb-2 font-bold">
-                Important: Chatbot UI is 100% unaffiliated with OpenAI.
-              </div>
-            </div>
-            <div className="text-center text-gray-500 dark:text-gray-400">
-              <div className="mb-2">
-                Chatbot UI allows you to plug in your API key to use this UI
-                with their API.
-              </div>
-              <div className="mb-2">
-                It is <span className="italic">only</span> used to communicate
-                with their API.
-              </div>
-              <div className="mb-2">
-                {t(
-                  'Please set your OpenAI API key in the bottom left of the sidebar.',
-                )}
-              </div>
-              <div>
-                {t(
-                  "If you don't have an OpenAI API key, you can get one here: ",
-                )}
-                <a
-                  href="https://platform.openai.com/account/api-keys"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-blue-500 hover:underline"
-                >
-                  openai.com
-                </a>
-              </div>
-            </div>
-          </div>
-        ) : modelError ? (
+        { modelError ? (
           <ErrorMessageDiv error={modelError} />
         ) : (
           <>

components/Chat/ChatInput.tsx

@@ -271,7 +271,7 @@ export const ChatInput: FC<Props> = ({
         )}
 
         <div className="relative mx-2 flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-[#40414F] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] sm:mx-4">
-          <button
+          {/* <button
             className="absolute left-2 top-2 rounded-sm p-1 text-neutral-800 opacity-60 hover:bg-neutral-200 hover:text-neutral-900 dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200"
             onClick={() => setShowPluginSelect(!showPluginSelect)}
             onKeyDown={(e) => {}}
@@ -293,7 +293,7 @@ export const ChatInput: FC<Props> = ({
                 }}
               />
             </div>
-          )}
+          )} */}
 
           <textarea
             ref={textareaRef}
@@ -354,7 +354,7 @@ export const ChatInput: FC<Props> = ({
       </div>
       <div className="px-3 pt-2 pb-3 text-center text-[12px] text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
         <a
-          href="https://github.com/mckaywrigley/chatbot-ui"
+          href="https://github.com/slashwhy/chatbot-ui"
           target="_blank"
           rel="noreferrer"
           className="underline"

components/Chat/ModelSelect.tsx

@@ -49,12 +49,6 @@ export const ModelSelect: FC<Props> = ({
           ))}
         </select>
       </div>
-      <div className="w-full mt-3 text-left text-neutral-700 dark:text-neutral-400 flex items-center">
-        <a href="https://platform.openai.com/account/usage" target="_blank" className="flex items-center">
-          <IconExternalLink size={18} className={"inline mr-1"} />
-          {t('View Account Usage')}
-        </a>
-      </div>
     </div>
   );
 };

components/Chatbar/Chatbar.tsx

@@ -16,7 +16,6 @@ interface Props {
   conversations: Conversation[];
   lightMode: 'light' | 'dark';
   selectedConversation: Conversation;
-  apiKey: string;
   pluginKeys: PluginKey[];
   folders: Folder[];
   onCreateFolder: (name: string) => void;
@@ -30,7 +29,6 @@ interface Props {
     conversation: Conversation,
     data: KeyValuePair,
   ) => void;
-  onApiKeyChange: (apiKey: string) => void;
   onClearConversations: () => void;
   onExportConversations: () => void;
   onImportConversations: (data: SupportedExportFormats) => void;
@@ -43,7 +41,6 @@ export const Chatbar: FC<Props> = ({
   conversations,
   lightMode,
   selectedConversation,
-  apiKey,
   pluginKeys,
   folders,
   onCreateFolder,
@@ -54,7 +51,6 @@ export const Chatbar: FC<Props> = ({
   onSelectConversation,
   onDeleteConversation,
   onUpdateConversation,
-  onApiKeyChange,
   onClearConversations,
   onExportConversations,
   onImportConversations,
@@ -197,11 +193,9 @@ export const Chatbar: FC<Props> = ({
 
       <ChatbarSettings
         lightMode={lightMode}
-        apiKey={apiKey}
         pluginKeys={pluginKeys}
         conversationsCount={conversations.length}
         onToggleLightMode={onToggleLightMode}
-        onApiKeyChange={onApiKeyChange}
         onClearConversations={onClearConversations}
         onExportConversations={onExportConversations}
         onImportConversations={onImportConversations}

components/Chatbar/ChatbarSettings.tsx

@@ -4,18 +4,15 @@ import { IconFileExport, IconMoon, IconSun } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { FC } from 'react';
 import { Import } from '../Settings/Import';
-import { Key } from '../Settings/Key';
 import { SidebarButton } from '../Sidebar/SidebarButton';
 import { ClearConversations } from './ClearConversations';
 import { PluginKeys } from './PluginKeys';
 
 interface Props {
   lightMode: 'light' | 'dark';
-  apiKey: string;
   pluginKeys: PluginKey[];
   conversationsCount: number;
   onToggleLightMode: (mode: 'light' | 'dark') => void;
-  onApiKeyChange: (apiKey: string) => void;
   onClearConversations: () => void;
   onExportConversations: () => void;
   onImportConversations: (data: SupportedExportFormats) => void;
@@ -25,11 +22,9 @@ interface Props {
 
 export const ChatbarSettings: FC<Props> = ({
   lightMode,
-  apiKey,
   pluginKeys,
   conversationsCount,
   onToggleLightMode,
-  onApiKeyChange,
   onClearConversations,
   onExportConversations,
   onImportConversations,
@@ -62,13 +57,11 @@ export const ChatbarSettings: FC<Props> = ({
         }
       />
 
-      <Key apiKey={apiKey} onApiKeyChange={onApiKeyChange} />
-
-      <PluginKeys
+      {/* <PluginKeys
         pluginKeys={pluginKeys}
         onPluginKeyChange={onPluginKeyChange}
         onClearPluginKey={onClearPluginKey}
-      />
+      /> */}
     </div>
   );
 };

components/Chatbar/PluginKeys.tsx

@@ -74,7 +74,7 @@ export const PluginKeys: FC<Props> = ({
               >
                 <div className="mb-10 text-4xl">Plugin Keys</div>
 
-                <div className="mt-6 rounded border p-4">
+                {/* <div className="mt-6 rounded border p-4">
                   <div className="text-xl font-bold">Google Search Plugin</div>
                   <div className="mt-4 italic">
                     Please enter your Google API Key and Google CSE ID to enable
@@ -213,7 +213,7 @@ export const PluginKeys: FC<Props> = ({
                   >
                     Clear Google Search Plugin Keys
                   </button>
-                </div>
+                </div> */}
 
                 <button
                   type="button"

docker-compose.yml

@@ -5,5 +5,3 @@ services:
     build: .
     # ports:
     #   - 3000:3000
-    # environment:
-    #   - 'OPENAI_API_KEY='

k8s/chatbot-ui.yaml

@@ -9,8 +9,7 @@ metadata:
   namespace: chatbot-ui
   name: chatbot-ui
 type: Opaque
-data:
-  OPENAI_API_KEY: <base64 encoded key>
+
 ---
 apiVersion: apps/v1
 kind: Deployment
@@ -35,12 +34,6 @@ spec:
           resources: {}
           ports:
             - containerPort: 3000
-          env:
-            - name: OPENAI_API_KEY
-              valueFrom:
-                secretKeyRef:
-                  name: chatbot-ui
-                  key: OPENAI_API_KEY
 ---
 kind: Service
 apiVersion: v1

pages/api/chat.ts

@@ -1,5 +1,5 @@
 import { ChatBody, Message } from '@/types/chat';
-import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
+import { DEFAULT_SYSTEM_PROMPT, DEFAULT_TEMPERATURE } from '@/utils/app/const';
 import { OpenAIError, OpenAIStream } from '@/utils/server';
 import tiktokenModel from '@dqbd/tiktoken/encoders/cl100k_base.json';
 import { Tiktoken, init } from '@dqbd/tiktoken/lite/init';
@@ -12,7 +12,7 @@ export const config = {
 
 const handler = async (req: Request): Promise<Response> => {
   try {
-    const { model, messages, key, prompt } = (await req.json()) as ChatBody;
+    const { model, messages, prompt, temperature } = (await req.json()) as ChatBody;
 
     await init((imports) => WebAssembly.instantiate(wasm, imports));
     const encoding = new Tiktoken(
@@ -26,6 +26,11 @@ const handler = async (req: Request): Promise<Response> => {
       promptToSend = DEFAULT_SYSTEM_PROMPT;
     }
 
+    let temperatureToUse = temperature;
+    if (temperatureToUse == null) {
+      temperatureToUse = DEFAULT_TEMPERATURE;
+    }
+
     const prompt_tokens = encoding.encode(promptToSend);
 
     let tokenCount = prompt_tokens.length;
@@ -44,7 +49,7 @@ const handler = async (req: Request): Promise<Response> => {
 
     encoding.free();
 
-    const stream = await OpenAIStream(model, promptToSend, key, messagesToSend);
+    const stream = await OpenAIStream(model, promptToSend, temperatureToUse, messagesToSend);
 
     return new Response(stream);
   } catch (error) {