Merge pull request #26 from mckaywrigley/main

Fork Sync: Update from parent repository

Author: Kounex

.env.local.example

@@ -1 +1,2 @@
-OPENAI_API_KEY=YOUR_KEY
+OPENAI_API_KEY=YOUR_KEY
+DEFAULT_MODEL=gpt-3.5-turbo

README.md

@@ -59,10 +59,15 @@ Fork Chatbot UI on Replit [here](https://replit.com/@MckayWrigley/chatbot-ui-pro
 
 **Docker**
 
+Build locally:
 ```shell
 docker build -t chatgpt-ui .
 docker run -e OPENAI_API_KEY=xxxxxxxx -p 3000:3000 chatgpt-ui
 ```
+Pull from ghcr:
+```
+docker run -e OPENAI_API_KEY=xxxxxxxx -p 3000:3000 ghcr.io/mckaywrigley/chatbot-ui:main
+```
 
 ## Running Locally
 
@@ -86,6 +91,8 @@ Create a .env.local file in the root of the repo with your OpenAI API Key:
 OPENAI_API_KEY=YOUR_KEY
 ```
 
+> you can set `OPENAI_API_HOST` where access to the official OpenAI host is restricted or unavailable, allowing users to configure an alternative host for their specific needs.
+
 **4. Run App**
 
 ```bash
@@ -96,6 +103,18 @@ npm run dev
 
 You should be able to start chatting.
 
+## Configuration
+
+When deploying the application, the following environment variables can be set:
+
+| Environment Variable | Default value    | Description                                             |
+|----------------------|------------------|---------------------------------------------------------|
+| OPENAI_API_KEY       |                  | The default API key used for authentication with OpenAI |
+| DEFAULT_MODEL        | `gpt-3.5-turbo`  | The default model to use on new conversations           |
+
+If you do not provide an OpenAI API key with `OPENAI_API_KEY`, users will have to provide their own key.
+If you don't have an OpenAI API key, you can get one [here](https://platform.openai.com/account/api-keys).
+
 ## Contact
 
 If you have any questions, feel free to reach out to me on [Twitter](https://twitter.com/mckaywrigley).

components/Chat/Chat.tsx

@@ -2,7 +2,7 @@ import { Conversation, Message } from '@/types/chat';
 import { IconArrowDown } from '@tabler/icons-react';
 import { KeyValuePair } from '@/types/data';
 import { ErrorMessage } from '@/types/error';
-import { OpenAIModel } from '@/types/openai';
+import { OpenAIModel, OpenAIModelID } from '@/types/openai';
 import { Prompt } from '@/types/prompt';
 import { throttle } from '@/utils';
 import { IconClearAll, IconKey, IconSettings } from '@tabler/icons-react';
@@ -29,6 +29,7 @@ interface Props {
   models: OpenAIModel[];
   apiKey: string;
   serverSideApiKeyIsSet: boolean;
+  defaultModelId: OpenAIModelID;
   messageIsStreaming: boolean;
   modelError: ErrorMessage | null;
   loading: boolean;
@@ -48,6 +49,7 @@ export const Chat: FC<Props> = memo(
     models,
     apiKey,
     serverSideApiKeyIsSet,
+    defaultModelId,
     messageIsStreaming,
     modelError,
     loading,
@@ -149,7 +151,7 @@ export const Chat: FC<Props> = memo(
     }, [messagesEndRef]);
 
     return (
-      <div className="overflow-none relative flex-1 bg-white dark:bg-[#343541]">
+      <div className="overflow-hidden relative flex-1 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-[500px]">
             <div className="mx-auto mb-5 text-gray-800 dark:text-gray-100">
@@ -206,6 +208,7 @@ export const Chat: FC<Props> = memo(
                         <ModelSelect
                           model={conversation.model}
                           models={models}
+                          defaultModelId={defaultModelId}
                           onModelChange={(model) =>
                             onUpdateConversation(conversation, {
                               key: 'model',
@@ -236,12 +239,13 @@ export const Chat: FC<Props> = memo(
                       className="ml-2 cursor-pointer hover:opacity-50"
                       onClick={handleSettings}
                     >
-                    <IconSettings size={18} />
+                      <IconSettings size={18} />
                     </button>
                     <button
                       className="ml-2 cursor-pointer hover:opacity-50"
-                      onClick={onClearAll}>
-                    <IconClearAll size={18} />
+                      onClick={onClearAll}
+                    >
+                      <IconClearAll size={18} />
                     </button>
                   </div>
                   {showSettings && (
@@ -250,6 +254,7 @@ export const Chat: FC<Props> = memo(
                         <ModelSelect
                           model={conversation.model}
                           models={models}
+                          defaultModelId={defaultModelId}
                           onModelChange={(model) =>
                             onUpdateConversation(conversation, {
                               key: 'model',
@@ -306,7 +311,7 @@ export const Chat: FC<Props> = memo(
               className="flex h-7 w-7 items-center justify-center rounded-full bg-white shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-[#515152d7]"
               onClick={handleScrollDown}
             >
-              <IconArrowDown className="h-4 w-4" />
+              <IconArrowDown size={18} />
             </button>
           </div>
         )}

components/Chat/ChatInput.tsx

@@ -1,5 +1,5 @@
 import { Message } from '@/types/chat';
-import { OpenAIModel, OpenAIModelID } from '@/types/openai';
+import { OpenAIModel } from '@/types/openai';
 import { Prompt } from '@/types/prompt';
 import { IconPlayerStop, IconRepeat, IconSend } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
@@ -56,7 +56,7 @@ export const ChatInput: FC<Props> = ({
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const value = e.target.value;
-    const maxLength = model.id === OpenAIModelID.GPT_3_5 ? 12000 : 24000;
+    const maxLength = model.maxLength;
 
     if (value.length > maxLength) {
       alert(
@@ -107,11 +107,16 @@ export const ChatInput: FC<Props> = ({
 
   const handleInitModal = () => {
     const selectedPrompt = filteredPrompts[activePromptIndex];
-    setContent((prevContent) => {
-      const newContent = prevContent?.replace(/\/\w*$/, selectedPrompt.content);
-      return newContent;
-    });
-    handlePromptSelect(selectedPrompt);
+    if (selectedPrompt) {
+      setContent((prevContent) => {
+        const newContent = prevContent?.replace(
+          /\/\w*$/,
+          selectedPrompt.content,
+        );
+        return newContent;
+      });
+      handlePromptSelect(selectedPrompt);
+    }
     setShowPromptList(false);
   };
 
@@ -256,7 +261,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">
           <textarea
             ref={textareaRef}
-            className="m-0 w-full resize-none border-0 bg-transparent p-0 pr-8 pl-2 text-black dark:bg-transparent dark:text-white py-2 md:py-3 md:pl-4"
+            className="m-0 w-full resize-none border-0 bg-transparent p-0 py-2 pr-8 pl-2 text-black dark:bg-transparent dark:text-white md:py-3 md:pl-4"
             style={{
               resize: 'none',
               bottom: `${textareaRef?.current?.scrollHeight}px`,
@@ -278,7 +283,7 @@ export const ChatInput: FC<Props> = ({
             onKeyDown={handleKeyDown}
           />
           <button
-            className="absolute right-2 top-2 rounded-sm p-1 text-neutral-800 hover:bg-neutral-200 hover:text-neutral-900 dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200 opacity-60"
+            className="absolute right-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={handleSend}
           >
             <IconSend size={18} />

components/Chat/ModelSelect.tsx

@@ -1,15 +1,22 @@
-import { OpenAIModel } from '@/types/openai';
+import { OpenAIModel, OpenAIModelID } from '@/types/openai';
 import { useTranslation } from 'next-i18next';
 import { FC } from 'react';
 
 interface Props {
   model: OpenAIModel;
   models: OpenAIModel[];
+  defaultModelId: OpenAIModelID;
   onModelChange: (model: OpenAIModel) => void;
 }
 
-export const ModelSelect: FC<Props> = ({ model, models, onModelChange }) => {
+export const ModelSelect: FC<Props> = ({
+  model,
+  models,
+  defaultModelId,
+  onModelChange,
+}) => {
   const { t } = useTranslation('chat');
+
   return (
     <div className="flex flex-col">
       <label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
@@ -19,7 +26,7 @@ export const ModelSelect: FC<Props> = ({ model, models, onModelChange }) => {
         <select
           className="w-full bg-transparent p-2"
           placeholder={t('Select a model') || ''}
-          value={model.id}
+          value={model?.id || defaultModelId}
           onChange={(e) => {
             onModelChange(
               models.find(
@@ -34,7 +41,9 @@ export const ModelSelect: FC<Props> = ({ model, models, onModelChange }) => {
               value={model.id}
               className="dark:bg-[#343541] dark:text-white"
             >
-              {model.name}
+              {model.id === defaultModelId
+                ? `Default (${model.name})`
+                : model.name}
             </option>
           ))}
         </select>

components/Chat/SystemPrompt.tsx

@@ -43,8 +43,7 @@ export const SystemPrompt: FC<Props> = ({
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const value = e.target.value;
-    const maxLength =
-      conversation.model.id === OpenAIModelID.GPT_3_5 ? 12000 : 24000;
+    const maxLength = conversation.model.maxLength;
 
     if (value.length > maxLength) {
       alert(

components/Chatbar/Conversation.tsx

@@ -68,7 +68,7 @@ export const ConversationComponent: FC<Props> = ({
   return (
     <div className="relative flex items-center">
       {isRenaming && selectedConversation.id === conversation.id ? (
-        <div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3">
+        <div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3 rounded-lg">
           <IconMessage size={18} />
           <input
             className="mr-12 flex-1 overflow-hidden overflow-ellipsis border-neutral-400 bg-transparent text-left text-[12.5px] leading-3 text-white outline-none focus:border-neutral-100"

components/Folders/Chat/ChatFolder.tsx

@@ -103,7 +103,7 @@ export const ChatFolder: FC<Props> = ({
     <>
       <div className="relative flex items-center">
         {isRenaming ? (
-          <div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3">
+          <div className="flex w-full items-center gap-3 bg-[#343541]/90 p-3 rounded-lg">
             {isOpen ? (
               <IconCaretDown size={18} />
             ) : (
@@ -199,21 +199,21 @@ export const ChatFolder: FC<Props> = ({
 
       {isOpen
         ? conversations.map((conversation, index) => {
-            if (conversation.folderId === currentFolder.id) {
-              return (
-                <div key={index} className="ml-5 gap-2 border-l pl-2">
-                  <ConversationComponent
-                    selectedConversation={selectedConversation}
-                    conversation={conversation}
-                    loading={loading}
-                    onSelectConversation={onSelectConversation}
-                    onDeleteConversation={onDeleteConversation}
-                    onUpdateConversation={onUpdateConversation}
-                  />
-                </div>
-              );
-            }
-          })
+          if (conversation.folderId === currentFolder.id) {
+            return (
+              <div key={index} className="ml-5 gap-2 border-l pl-2">
+                <ConversationComponent
+                  selectedConversation={selectedConversation}
+                  conversation={conversation}
+                  loading={loading}
+                  onSelectConversation={onSelectConversation}
+                  onDeleteConversation={onDeleteConversation}
+                  onUpdateConversation={onUpdateConversation}
+                />
+              </div>
+            );
+          }
+        })
         : null}
     </>
   );

components/Promptbar/PromptModal.tsx

@@ -65,7 +65,7 @@ export const PromptModal: FC<Props> = ({ prompt, onClose, onUpdatePrompt }) => {
             <input
               ref={nameInputRef}
               className="mt-2 w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
-              placeholder="A name for your prompt."
+              placeholder={t('A name for your prompt.') || ''}
               value={name}
               onChange={(e) => setName(e.target.value)}
             />

next-i18next.config.js

@@ -17,6 +17,7 @@ module.exports = {
       "te",
       "vi",
       "zh",
+      "ar",
     ],
   },
   localePath:

pages/api/chat.ts

@@ -1,5 +1,4 @@
 import { ChatBody, Message } from '@/types/chat';
-import { OpenAIModelID } from '@/types/openai';
 import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
 import { OpenAIStream } from '@/utils/server';
 import tiktokenModel from '@dqbd/tiktoken/encoders/cl100k_base.json';
@@ -22,8 +21,6 @@ const handler = async (req: Request): Promise<Response> => {
       tiktokenModel.pat_str,
     );
 
-    const tokenLimit = model.id === OpenAIModelID.GPT_4 ? 6000 : 3000;
-
     let promptToSend = prompt;
     if (!promptToSend) {
       promptToSend = DEFAULT_SYSTEM_PROMPT;
@@ -38,7 +35,7 @@ const handler = async (req: Request): Promise<Response> => {
       const message = messages[i];
       const tokens = encoding.encode(message.content);
 
-      if (tokenCount + tokens.length > tokenLimit) {
+      if (tokenCount + tokens.length > model.tokenLimit) {
         break;
       }
       tokenCount += tokens.length;