From d6973b9cccb07b96ae732a1925b0e080a3bbd380 Mon Sep 17 00:00:00 2001 From: Simon Holmes Date: Sun, 26 Mar 2023 05:13:18 +0000 Subject: [PATCH] feat: add in prettier and format code for consistency (#168) --- components/Chat/Chat.tsx | 112 +- components/Chat/ChatInput.tsx | 99 +- components/Chat/ChatLoader.tsx | 12 +- components/Chat/ChatMessage.tsx | 104 +- components/Chat/ErrorMessageDiv.tsx | 23 +- components/Chat/ModelSelect.tsx | 25 +- components/Chat/Regenerate.tsx | 16 +- components/Chat/SystemPrompt.tsx | 32 +- components/Markdown/CodeBlock.tsx | 58 +- components/Mobile/Navbar.tsx | 17 +- components/Sidebar/ClearConversations.tsx | 18 +- components/Sidebar/Conversation.tsx | 158 +- components/Sidebar/Conversations.tsx | 22 +- components/Sidebar/Folder.tsx | 55 +- components/Sidebar/Folders.tsx | 15 +- components/Sidebar/Import.tsx | 25 +- components/Sidebar/Key.tsx | 16 +- components/Sidebar/Search.tsx | 12 +- components/Sidebar/Sidebar.tsx | 121 +- components/Sidebar/SidebarButton.tsx | 4 +- components/Sidebar/SidebarSettings.tsx | 56 +- k8s/chatbot-ui.yaml | 2 +- next-i18next.config.js | 6 +- next.config.js | 2 +- package-lock.json | 200 +- package.json | 5 +- pages/_app.tsx | 12 +- pages/_document.tsx | 13 +- pages/api/chat.ts | 18 +- pages/api/models.ts | 35 +- pages/index.tsx | 272 +- postcss.config.js | 2 +- prettier.config.js | 5 + public/locales/de/chat.json | 2 +- public/locales/de/common.json | 2 +- public/locales/de/markdown.json | 2 +- public/locales/de/sidebar.json | 2 +- public/locales/en/common.json | 2 +- public/locales/es/chat.json | 2 +- public/locales/es/common.json | 2 +- public/locales/es/markdown.json | 2 +- public/locales/fr/chat.json | 2 +- public/locales/fr/common.json | 2 +- public/locales/fr/markdown.json | 2 +- public/locales/fr/sidebar.json | 2 +- public/locales/pt/chat.json | 2 +- public/locales/pt/common.json | 2 +- public/locales/pt/markdown.json | 2 +- public/locales/pt/sidebar.json | 2 +- public/locales/ru/chat.json | 2 +- public/locales/ru/common.json | 2 +- public/locales/sv/chat.json | 2 +- public/locales/sv/common.json | 2 +- public/locales/sv/markdown.json | 2 +- public/locales/sv/sidebar.json | 2 +- public/locales/te/chat.json | 2 +- public/locales/te/common.json | 2 +- public/locales/te/markdown.json | 2 +- public/locales/te/sidebar.json | 2 +- public/locales/zh/chat.json | 2 +- public/locales/zh/common.json | 2 +- styles/globals.css | 2 +- tailwind.config.js | 12 +- types/index.ts | 22 +- utils/app/clean.ts | 15 +- utils/app/codeblock.ts | 50 +- utils/app/const.ts | 7 +- utils/app/conversation.ts | 13 +- utils/app/folders.ts | 4 +- utils/app/importExport.ts | 30 +- utils/server/index.ts | 39 +- yarn.lock | 3891 --------------------- 72 files changed, 1140 insertions(+), 4573 deletions(-) create mode 100644 prettier.config.js delete mode 100644 yarn.lock diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx index ef6d8b5..e3bce5a 100644 --- a/components/Chat/Chat.tsx +++ b/components/Chat/Chat.tsx @@ -1,12 +1,25 @@ -import { Conversation, ErrorMessage, KeyValuePair, Message, OpenAIModel } from "@/types"; -import { FC, MutableRefObject, useCallback, useEffect, useRef, useState } from "react"; -import { useTranslation } from "next-i18next"; -import { ChatInput } from "./ChatInput"; -import { ChatLoader } from "./ChatLoader"; -import { ChatMessage } from "./ChatMessage"; -import { ErrorMessageDiv } from "./ErrorMessageDiv"; -import { ModelSelect } from "./ModelSelect"; -import { SystemPrompt } from "./SystemPrompt"; +import { + Conversation, + ErrorMessage, + KeyValuePair, + Message, + OpenAIModel, +} from '@/types'; +import { + FC, + MutableRefObject, + useCallback, + useEffect, + useRef, + useState, +} from 'react'; +import { useTranslation } from 'next-i18next'; +import { ChatInput } from './ChatInput'; +import { ChatLoader } from './ChatLoader'; +import { ChatMessage } from './ChatMessage'; +import { ErrorMessageDiv } from './ErrorMessageDiv'; +import { ModelSelect } from './ModelSelect'; +import { SystemPrompt } from './SystemPrompt'; interface Props { conversation: Conversation; @@ -17,14 +30,31 @@ interface Props { modelError: ErrorMessage | null; messageError: boolean; loading: boolean; - lightMode: "light" | "dark"; + lightMode: 'light' | 'dark'; onSend: (message: Message, deleteCount?: number) => void; - onUpdateConversation: (conversation: Conversation, data: KeyValuePair) => void; + onUpdateConversation: ( + conversation: Conversation, + data: KeyValuePair, + ) => void; onEditMessage: (message: Message, messageIndex: number) => void; stopConversationRef: MutableRefObject; } -export const Chat: FC = ({ conversation, models, apiKey, serverSideApiKeyIsSet, messageIsStreaming, modelError, messageError, loading, lightMode, onSend, onUpdateConversation, onEditMessage, stopConversationRef }) => { +export const Chat: FC = ({ + conversation, + models, + apiKey, + serverSideApiKeyIsSet, + messageIsStreaming, + modelError, + messageError, + loading, + lightMode, + onSend, + onUpdateConversation, + onEditMessage, + stopConversationRef, +}) => { const { t } = useTranslation('chat'); const [currentMessage, setCurrentMessage] = useState(); const [autoScrollEnabled, setAutoScrollEnabled] = useState(true); @@ -42,7 +72,8 @@ export const Chat: FC = ({ conversation, models, apiKey, serverSideApiKey const handleScroll = () => { if (chatContainerRef.current) { - const { scrollTop, scrollHeight, clientHeight } = chatContainerRef.current; + const { scrollTop, scrollHeight, clientHeight } = + chatContainerRef.current; const bottomTolerance = 5; if (scrollTop + clientHeight < scrollHeight - bottomTolerance) { @@ -62,43 +93,60 @@ export const Chat: FC = ({ conversation, models, apiKey, serverSideApiKey const chatContainer = chatContainerRef.current; if (chatContainer) { - chatContainer.addEventListener("scroll", handleScroll); + chatContainer.addEventListener('scroll', handleScroll); return () => { - chatContainer.removeEventListener("scroll", handleScroll); + chatContainer.removeEventListener('scroll', handleScroll); }; } }, []); return ( -
+
{!(apiKey || serverSideApiKeyIsSet) ? ( -
-
{t('OpenAI API Key Required')}
-
{t('Please set your OpenAI API key in the bottom left of the sidebar.')}
+
+
+ {t('OpenAI API Key Required')} +
+
+ {t( + 'Please set your OpenAI API key in the bottom left of the sidebar.', + )} +
- ) : modelError ? : ( + ) : modelError ? ( + + ) : ( <> -
+
{conversation.messages.length === 0 ? ( <> -
-
{models.length === 0 ? t("Loading...") : "Chatbot UI"}
+
+
+ {models.length === 0 ? t('Loading...') : 'Chatbot UI'} +
{models.length > 0 && ( -
+
onUpdateConversation(conversation, { key: "model", value: model })} + onModelChange={(model) => + onUpdateConversation(conversation, { + key: 'model', + value: model, + }) + } /> onUpdateConversation(conversation, { key: "prompt", value: prompt })} + onChangePrompt={(prompt) => + onUpdateConversation(conversation, { + key: 'prompt', + value: prompt, + }) + } />
)} @@ -106,7 +154,9 @@ export const Chat: FC = ({ conversation, models, apiKey, serverSideApiKey ) : ( <> -
{t('Model')}: {conversation.model.name}
+
+ {t('Model')}: {conversation.model.name} +
{conversation.messages.map((message, index) => ( = ({ conversation, models, apiKey, serverSideApiKey {loading && }
diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx index d205cc7..58797bc 100644 --- a/components/Chat/ChatInput.tsx +++ b/components/Chat/ChatInput.tsx @@ -1,7 +1,13 @@ -import { Message, OpenAIModel, OpenAIModelID } from "@/types"; -import { IconPlayerStop, IconRepeat, IconSend } from "@tabler/icons-react"; -import { FC, KeyboardEvent, MutableRefObject, useEffect, useState } from "react"; -import { useTranslation } from "next-i18next"; +import { Message, OpenAIModel, OpenAIModelID } from '@/types'; +import { IconPlayerStop, IconRepeat, IconSend } from '@tabler/icons-react'; +import { + FC, + KeyboardEvent, + MutableRefObject, + useEffect, + useState, +} from 'react'; +import { useTranslation } from 'next-i18next'; interface Props { messageIsStreaming: boolean; @@ -13,7 +19,15 @@ interface Props { textareaRef: MutableRefObject; } -export const ChatInput: FC = ({ messageIsStreaming, model, messages, onSend, onRegenerate, stopConversationRef, textareaRef }) => { +export const ChatInput: FC = ({ + messageIsStreaming, + model, + messages, + onSend, + onRegenerate, + stopConversationRef, + textareaRef, +}) => { const { t } = useTranslation('chat'); const [content, setContent] = useState(); const [isTyping, setIsTyping] = useState(false); @@ -23,7 +37,12 @@ export const ChatInput: FC = ({ messageIsStreaming, model, messages, onSe const maxLength = model.id === OpenAIModelID.GPT_3_5 ? 12000 : 24000; if (value.length > maxLength) { - alert(t(`Message limit is {{maxLength}} characters. You have entered {{valueLength}} characters.`, { maxLength, valueLength: value.length })); + alert( + t( + `Message limit is {{maxLength}} characters. You have entered {{valueLength}} characters.`, + { maxLength, valueLength: value.length }, + ), + ); return; } @@ -36,12 +55,12 @@ export const ChatInput: FC = ({ messageIsStreaming, model, messages, onSe } if (!content) { - alert(t("Please enter a message")); + alert(t('Please enter a message')); return; } - onSend({ role: "user", content }); - setContent(""); + onSend({ role: 'user', content }); + setContent(''); if (window.innerWidth < 640 && textareaRef && textareaRef.current) { textareaRef.current.blur(); @@ -49,14 +68,16 @@ export const ChatInput: FC = ({ messageIsStreaming, model, messages, onSe }; const isMobile = () => { - const userAgent = typeof window.navigator === "undefined" ? "" : navigator.userAgent; - const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i; + const userAgent = + typeof window.navigator === 'undefined' ? '' : navigator.userAgent; + const mobileRegex = + /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i; return mobileRegex.test(userAgent); }; const handleKeyDown = (e: KeyboardEvent) => { if (!isTyping) { - if (e.key === "Enter" && !e.shiftKey && !isMobile()) { + if (e.key === 'Enter' && !e.shiftKey && !isMobile()) { e.preventDefault(); handleSend(); } @@ -65,9 +86,11 @@ export const ChatInput: FC = ({ messageIsStreaming, model, messages, onSe useEffect(() => { if (textareaRef && textareaRef.current) { - textareaRef.current.style.height = "inherit"; + textareaRef.current.style.height = 'inherit'; textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`; - textareaRef.current.style.overflow = `${textareaRef?.current?.scrollHeight > 400 ? "auto" : "hidden"}`; + textareaRef.current.style.overflow = `${ + textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden' + }`; } }, [content]); @@ -79,45 +102,43 @@ export const ChatInput: FC = ({ messageIsStreaming, model, messages, onSe } return ( -
-
+
+
{messageIsStreaming && ( )} {!messageIsStreaming && messages.length > 0 && ( )} -
+