From f21adef740a3d3be6da848beb7320a36782ee172 Mon Sep 17 00:00:00 2001 From: hihumanzone <101509991+hihumanzone@users.noreply.github.com> Date: Fri, 23 Jun 2023 11:59:17 +0530 Subject: [PATCH 01/39] Update const.ts --- utils/app/const.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/utils/app/const.ts b/utils/app/const.ts index 3011f3d..c74ec1c 100644 --- a/utils/app/const.ts +++ b/utils/app/const.ts @@ -1,6 +1,16 @@ export const DEFAULT_SYSTEM_PROMPT = process.env.NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT || - "You are ChatGPT, a large language model trained by OpenAI. Follow the user's instructions carefully. Respond using markdown."; + "You are an advanced AI language model that can generate human-like text responses based on the prompts you receive. Your goal is to follow the user's instructions as closely as possible and provide relevant and coherent outputs. + +You can use Markdown to format your responses. For example: + +- Use bold text to highlight important words or phrases. +- Use headings and subheadings to organize your content. +- Use lists and tables to display information in a structured way. +- Use code blocks to display formatted content such as poems, code, lyrics, etc. +- Use LaTeX to write mathematical expressions in this "$$[text]$$" or this "$[text]$" format. + +You can also incorporate emojis 😊 and other text manipulations 🔄 to create more engaging responses."; export const OPENAI_API_HOST = process.env.OPENAI_API_HOST || 'https://chimeragpt.adventblocks.cc'; From c82efda474ff3b9d8fa37cc417c696b5f8fa4909 Mon Sep 17 00:00:00 2001 From: hihumanzone <101509991+hihumanzone@users.noreply.github.com> Date: Fri, 23 Jun 2023 11:59:36 +0530 Subject: [PATCH 02/39] Update const.ts --- utils/app/const.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utils/app/const.ts b/utils/app/const.ts index c74ec1c..7d8d85a 100644 --- a/utils/app/const.ts +++ b/utils/app/const.ts @@ -8,7 +8,7 @@ You can use Markdown to format your responses. For example: - Use headings and subheadings to organize your content. - Use lists and tables to display information in a structured way. - Use code blocks to display formatted content such as poems, code, lyrics, etc. -- Use LaTeX to write mathematical expressions in this "$$[text]$$" or this "$[text]$" format. +- Use LaTeX to write mathematical expressions in this "$[text]$" format. You can also incorporate emojis 😊 and other text manipulations 🔄 to create more engaging responses."; From f3ba77b6dc575b53b876e8d811c9edad6e88050c Mon Sep 17 00:00:00 2001 From: hihumanzone <101509991+hihumanzone@users.noreply.github.com> Date: Fri, 23 Jun 2023 11:59:51 +0530 Subject: [PATCH 03/39] Update const.ts --- utils/app/const.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utils/app/const.ts b/utils/app/const.ts index 7d8d85a..85313c2 100644 --- a/utils/app/const.ts +++ b/utils/app/const.ts @@ -8,7 +8,7 @@ You can use Markdown to format your responses. For example: - Use headings and subheadings to organize your content. - Use lists and tables to display information in a structured way. - Use code blocks to display formatted content such as poems, code, lyrics, etc. -- Use LaTeX to write mathematical expressions in this "$[text]$" format. +- Use LaTeX to write mathematical expressions. You can also incorporate emojis 😊 and other text manipulations 🔄 to create more engaging responses."; From ee6125347f6f58fe36e30ce2ee22d1192e1ad2ac Mon Sep 17 00:00:00 2001 From: hihumanzone <101509991+hihumanzone@users.noreply.github.com> Date: Fri, 23 Jun 2023 12:01:51 +0530 Subject: [PATCH 04/39] Update const.ts --- utils/app/const.ts | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/utils/app/const.ts b/utils/app/const.ts index 85313c2..aee752e 100644 --- a/utils/app/const.ts +++ b/utils/app/const.ts @@ -1,16 +1,6 @@ export const DEFAULT_SYSTEM_PROMPT = process.env.NEXT_PUBLIC_DEFAULT_SYSTEM_PROMPT || - "You are an advanced AI language model that can generate human-like text responses based on the prompts you receive. Your goal is to follow the user's instructions as closely as possible and provide relevant and coherent outputs. - -You can use Markdown to format your responses. For example: - -- Use bold text to highlight important words or phrases. -- Use headings and subheadings to organize your content. -- Use lists and tables to display information in a structured way. -- Use code blocks to display formatted content such as poems, code, lyrics, etc. -- Use LaTeX to write mathematical expressions. - -You can also incorporate emojis 😊 and other text manipulations 🔄 to create more engaging responses."; + "You are an advanced AI language model that can generate human-like text responses based on the prompts you receive. Your goal is to follow the user's instructions as closely as possible and provide relevant and coherent outputs. You can use Markdown to format your responses. For example: Use bold text to highlight important words or phrases. Use headings and subheadings to organize your content. Use lists and tables to display information in a structured way. Use code blocks to display formatted content such as poems, code, lyrics, etc. Use LaTeX to write mathematical expressions. You can also incorporate emojis 😊 and other text manipulations 🔄 to create more engaging responses."; export const OPENAI_API_HOST = process.env.OPENAI_API_HOST || 'https://chimeragpt.adventblocks.cc'; From 0db60becf2ded5de8401e896ee0d0998f077226f Mon Sep 17 00:00:00 2001 From: hihumanzone <101509991+hihumanzone@users.noreply.github.com> Date: Fri, 23 Jun 2023 12:19:18 +0530 Subject: [PATCH 05/39] Update Chat.tsx --- components/Chat/Chat.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx index fa6b69d..e08386e 100644 --- a/components/Chat/Chat.tsx +++ b/components/Chat/Chat.tsx @@ -362,7 +362,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
- Chatbot UI allows you to plug in your API key to use this UI with + Chatbot UI allows you to plug in your ChimeraAPI key to use this UI with their API.
@@ -371,18 +371,18 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
{t( - 'Please set your OpenAI API key in the bottom left of the sidebar.', + 'Please set your ChimeraAPI key in the bottom left of the sidebar.', )}
- {t("If you don't have an OpenAI API key, you can get one here: ")} + {t("If you don't have an ChimeraAPI key, you can get one here: ")} - openai.com + Discord Server
From 06e5f39df5714768c97a0d74f1493d0189933368 Mon Sep 17 00:00:00 2001 From: hihumanzone <101509991+hihumanzone@users.noreply.github.com> Date: Fri, 23 Jun 2023 12:30:53 +0530 Subject: [PATCH 06/39] Update Chat.tsx --- components/Chat/Chat.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx index e08386e..072cfb4 100644 --- a/components/Chat/Chat.tsx +++ b/components/Chat/Chat.tsx @@ -355,20 +355,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => { Welcome to Chatbot UI
-
{`Chatbot UI is an open source clone of OpenAI's ChatGPT UI.`}
-
- Important: Chatbot UI is 100% unaffiliated with OpenAI. -
-
-
-
- Chatbot UI allows you to plug in your ChimeraAPI key to use this UI with - their API. -
-
- It is only used to communicate - with their API. -
+
{`Another ChatUI for ChimeraGPT with Poe models.`}
{t( 'Please set your ChimeraAPI key in the bottom left of the sidebar.', From 93673c165a6efe810fe7b3d80ad9884e09e975bd Mon Sep 17 00:00:00 2001 From: hihumanzone <101509991+hihumanzone@users.noreply.github.com> Date: Fri, 23 Jun 2023 12:40:14 +0530 Subject: [PATCH 07/39] Update const.ts --- utils/app/const.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utils/app/const.ts b/utils/app/const.ts index aee752e..267e29b 100644 --- a/utils/app/const.ts +++ b/utils/app/const.ts @@ -9,7 +9,7 @@ export const DEFAULT_TEMPERATURE = parseFloat(process.env.NEXT_PUBLIC_DEFAULT_TEMPERATURE || "1"); export const OPENAI_API_TYPE = - process.env.OPENAI_API_TYPE || 'openai'; + process.env.OPENAI_API_TYPE || 'Chimera'; export const OPENAI_API_VERSION = process.env.OPENAI_API_VERSION || '2023-03-15-preview'; From 191da0b0f2b6bbfe94c6cee60d82bf9982b0b7fe Mon Sep 17 00:00:00 2001 From: hihumanzone <101509991+hihumanzone@users.noreply.github.com> Date: Fri, 23 Jun 2023 12:41:38 +0530 Subject: [PATCH 08/39] Update const.ts --- utils/app/const.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utils/app/const.ts b/utils/app/const.ts index 267e29b..aee752e 100644 --- a/utils/app/const.ts +++ b/utils/app/const.ts @@ -9,7 +9,7 @@ export const DEFAULT_TEMPERATURE = parseFloat(process.env.NEXT_PUBLIC_DEFAULT_TEMPERATURE || "1"); export const OPENAI_API_TYPE = - process.env.OPENAI_API_TYPE || 'Chimera'; + process.env.OPENAI_API_TYPE || 'openai'; export const OPENAI_API_VERSION = process.env.OPENAI_API_VERSION || '2023-03-15-preview'; From c652e96b98d4d8f0c03af7c7b6152e54dd878588 Mon Sep 17 00:00:00 2001 From: hihumanzone <101509991+hihumanzone@users.noreply.github.com> Date: Fri, 23 Jun 2023 12:46:55 +0530 Subject: [PATCH 09/39] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 17b55b0..e6b2b3c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# Chatbot UI +# ChatUI -Chatbot UI is an open source chat UI for AI models. +Another ChatUI for ChimeraGPT + Poe models. ![Chatbot UI](./public/screenshots/screenshot-0402023.jpg) From d979bad456f983efe79e0096133420639a6bde29 Mon Sep 17 00:00:00 2001 From: hihumanzone <101509991+hihumanzone@users.noreply.github.com> Date: Fri, 23 Jun 2023 12:52:12 +0530 Subject: [PATCH 10/39] Update SidebarButton.tsx --- components/Sidebar/SidebarButton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/Sidebar/SidebarButton.tsx b/components/Sidebar/SidebarButton.tsx index 7c6f349..eeb78da 100644 --- a/components/Sidebar/SidebarButton.tsx +++ b/components/Sidebar/SidebarButton.tsx @@ -8,6 +8,7 @@ interface Props { export const SidebarButton: FC = ({ text, icon, onClick }) => { return ( +

Put your ChimeraAPI Key in OpenAI API Key section

-
- - ChatBot UI - - .{' '} - {t( - "Chatbot UI is an advanced chatbot kit for OpenAI's chat models aiming to mimic ChatGPT's interface and functionality.", - )} -
); }; From 70540bf66a61026fa3567f0a9fe61464ce93fc22 Mon Sep 17 00:00:00 2001 From: hihumanzone <101509991+hihumanzone@users.noreply.github.com> Date: Fri, 23 Jun 2023 13:06:09 +0530 Subject: [PATCH 15/39] Update Chat.tsx --- components/Chat/Chat.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx index 072cfb4..fea40b7 100644 --- a/components/Chat/Chat.tsx +++ b/components/Chat/Chat.tsx @@ -392,7 +392,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => { ) : ( - 'Chatbot UI' + '' )} From 3facb77fd57023e99a277799c369d97575dc3cdd Mon Sep 17 00:00:00 2001 From: hihumanzone <101509991+hihumanzone@users.noreply.github.com> Date: Fri, 23 Jun 2023 13:14:36 +0530 Subject: [PATCH 16/39] Update ChatInput.tsx --- components/Chat/ChatInput.tsx | 773 +++++++++++++++++----------------- 1 file changed, 389 insertions(+), 384 deletions(-) diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx index be5cf7e..42754d1 100644 --- a/components/Chat/ChatInput.tsx +++ b/components/Chat/ChatInput.tsx @@ -1,384 +1,389 @@ -import { - IconArrowDown, - IconBolt, - IconBrandGoogle, - IconPlayerStop, - IconRepeat, - IconSend, -} from '@tabler/icons-react'; -import { - KeyboardEvent, - MutableRefObject, - useCallback, - useContext, - useEffect, - useRef, - useState, -} from 'react'; - -import { useTranslation } from 'next-i18next'; - -import { Message } from '@/types/chat'; -import { Plugin } from '@/types/plugin'; -import { Prompt } from '@/types/prompt'; - -import HomeContext from '@/pages/api/home/home.context'; - -import { PluginSelect } from './PluginSelect'; -import { PromptList } from './PromptList'; -import { VariableModal } from './VariableModal'; - -interface Props { - onSend: (message: Message, plugin: Plugin | null) => void; - onRegenerate: () => void; - onScrollDownClick: () => void; - stopConversationRef: MutableRefObject; - textareaRef: MutableRefObject; - showScrollDownButton: boolean; -} - -export const ChatInput = ({ - onSend, - onRegenerate, - onScrollDownClick, - stopConversationRef, - textareaRef, - showScrollDownButton, -}: Props) => { - const { t } = useTranslation('chat'); - - const { - state: { selectedConversation, messageIsStreaming, prompts }, - - dispatch: homeDispatch, - } = useContext(HomeContext); - - const [content, setContent] = useState(); - const [isTyping, setIsTyping] = useState(false); - const [showPromptList, setShowPromptList] = useState(false); - const [activePromptIndex, setActivePromptIndex] = useState(0); - const [promptInputValue, setPromptInputValue] = useState(''); - const [variables, setVariables] = useState([]); - const [isModalVisible, setIsModalVisible] = useState(false); - const [showPluginSelect, setShowPluginSelect] = useState(false); - const [plugin, setPlugin] = useState(null); - - const promptListRef = useRef(null); - - const filteredPrompts = prompts.filter((prompt) => - prompt.name.toLowerCase().includes(promptInputValue.toLowerCase()), - ); - - const handleChange = (e: React.ChangeEvent) => { - const value = e.target.value; - const maxLength = selectedConversation?.model.maxLength; - - if (maxLength && value.length > maxLength) { - alert( - t( - `Message limit is {{maxLength}} characters. You have entered {{valueLength}} characters.`, - { maxLength, valueLength: value.length }, - ), - ); - return; - } - - setContent(value); - updatePromptListVisibility(value); - }; - - const handleSend = () => { - if (messageIsStreaming) { - return; - } - - if (!content) { - alert(t('Please enter a message')); - return; - } - - onSend({ role: 'user', content }, plugin); - setContent(''); - setPlugin(null); - - if (window.innerWidth < 640 && textareaRef && textareaRef.current) { - textareaRef.current.blur(); - } - }; - - const handleStopConversation = () => { - stopConversationRef.current = true; - setTimeout(() => { - stopConversationRef.current = false; - }, 1000); - }; - - 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; - return mobileRegex.test(userAgent); - }; - - const handleInitModal = () => { - const selectedPrompt = filteredPrompts[activePromptIndex]; - if (selectedPrompt) { - setContent((prevContent) => { - const newContent = prevContent?.replace( - /\/\w*$/, - selectedPrompt.content, - ); - return newContent; - }); - handlePromptSelect(selectedPrompt); - } - setShowPromptList(false); - }; - - const handleKeyDown = (e: KeyboardEvent) => { - if (showPromptList) { - if (e.key === 'ArrowDown') { - e.preventDefault(); - setActivePromptIndex((prevIndex) => - prevIndex < prompts.length - 1 ? prevIndex + 1 : prevIndex, - ); - } else if (e.key === 'ArrowUp') { - e.preventDefault(); - setActivePromptIndex((prevIndex) => - prevIndex > 0 ? prevIndex - 1 : prevIndex, - ); - } else if (e.key === 'Tab') { - e.preventDefault(); - setActivePromptIndex((prevIndex) => - prevIndex < prompts.length - 1 ? prevIndex + 1 : 0, - ); - } else if (e.key === 'Enter') { - e.preventDefault(); - handleInitModal(); - } else if (e.key === 'Escape') { - e.preventDefault(); - setShowPromptList(false); - } else { - setActivePromptIndex(0); - } - } else if (e.key === 'Enter' && !isTyping && !isMobile() && !e.shiftKey) { - e.preventDefault(); - handleSend(); - } else if (e.key === '/' && e.metaKey) { - e.preventDefault(); - setShowPluginSelect(!showPluginSelect); - } - }; - - const parseVariables = (content: string) => { - const regex = /{{(.*?)}}/g; - const foundVariables = []; - let match; - - while ((match = regex.exec(content)) !== null) { - foundVariables.push(match[1]); - } - - return foundVariables; - }; - - const updatePromptListVisibility = useCallback((text: string) => { - const match = text.match(/\/\w*$/); - - if (match) { - setShowPromptList(true); - setPromptInputValue(match[0].slice(1)); - } else { - setShowPromptList(false); - setPromptInputValue(''); - } - }, []); - - const handlePromptSelect = (prompt: Prompt) => { - const parsedVariables = parseVariables(prompt.content); - setVariables(parsedVariables); - - if (parsedVariables.length > 0) { - setIsModalVisible(true); - } else { - setContent((prevContent) => { - const updatedContent = prevContent?.replace(/\/\w*$/, prompt.content); - return updatedContent; - }); - updatePromptListVisibility(prompt.content); - } - }; - - const handleSubmit = (updatedVariables: string[]) => { - const newContent = content?.replace(/{{(.*?)}}/g, (match, variable) => { - const index = variables.indexOf(variable); - return updatedVariables[index]; - }); - - setContent(newContent); - - if (textareaRef && textareaRef.current) { - textareaRef.current.focus(); - } - }; - - useEffect(() => { - if (promptListRef.current) { - promptListRef.current.scrollTop = activePromptIndex * 30; - } - }, [activePromptIndex]); - - useEffect(() => { - if (textareaRef && textareaRef.current) { - textareaRef.current.style.height = 'inherit'; - textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`; - textareaRef.current.style.overflow = `${ - textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden' - }`; - } - }, [content]); - - useEffect(() => { - const handleOutsideClick = (e: MouseEvent) => { - if ( - promptListRef.current && - !promptListRef.current.contains(e.target as Node) - ) { - setShowPromptList(false); - } - }; - - window.addEventListener('click', handleOutsideClick); - - return () => { - window.removeEventListener('click', handleOutsideClick); - }; - }, []); - - return ( -
-
- {messageIsStreaming && ( - - )} - - {!messageIsStreaming && - selectedConversation && - selectedConversation.messages.length > 0 && ( - - )} - -
- - - {showPluginSelect && ( -
- { - if (e.key === 'Escape') { - e.preventDefault(); - setShowPluginSelect(false); - textareaRef.current?.focus(); - } - }} - onPluginChange={(plugin: Plugin) => { - setPlugin(plugin); - setShowPluginSelect(false); - - if (textareaRef && textareaRef.current) { - textareaRef.current.focus(); - } - }} - /> -
- )} - -