From f222084f94ee447ca7bc49569972d5dfe8c096d2 Mon Sep 17 00:00:00 2001 From: Dmitri Nasonov Date: Wed, 3 Jul 2024 00:24:51 +0100 Subject: [PATCH 1/2] Added ability to specify images via URL instead of base64 --- public/locales/en/main.json | 2 + .../ChatContent/Message/View/ContentView.tsx | 23 ++- .../ChatContent/Message/View/EditView.tsx | 131 ++++++++++++------ 3 files changed, 106 insertions(+), 50 deletions(-) diff --git a/public/locales/en/main.json b/public/locales/en/main.json index d0b50592a..831f51249 100644 --- a/public/locales/en/main.json +++ b/public/locales/en/main.json @@ -1,6 +1,8 @@ { "save": "Save", "generate": "Generate", + "add_image_url": "Add image URL", + "enter_image_url_placeholder": "Enter image URL", "cancel": "Cancel", "confirm": "Confirm", "warning": "Warning", diff --git a/src/components/Chat/ChatContent/Message/View/ContentView.tsx b/src/components/Chat/ChatContent/Message/View/ContentView.tsx index 11556aec5..33a12cae1 100644 --- a/src/components/Chat/ChatContent/Message/View/ContentView.tsx +++ b/src/components/Chat/ChatContent/Message/View/ContentView.tsx @@ -19,7 +19,12 @@ import CrossIcon from '@icon/CrossIcon'; import useSubmit from '@hooks/useSubmit'; -import { ChatInterface, ContentInterface, ImageContentInterface, TextContentInterface } from '@type/chat'; +import { + ChatInterface, + ContentInterface, + ImageContentInterface, + TextContentInterface, +} from '@type/chat'; import { codeLanguageSubset } from '@constants/chat'; @@ -41,7 +46,7 @@ const ContentView = memo( messageIndex, }: { role: string; - content: ContentInterface[], + content: ContentInterface[]; setIsEdit: React.Dispatch>; messageIndex: number; }) => { @@ -132,13 +137,19 @@ const ContentView = memo( {(content[0] as TextContentInterface).text} ) : ( - {(content[0] as TextContentInterface).text} + + {(content[0] as TextContentInterface).text} + )} -
+
{(content.slice(1) as ImageContentInterface[]).map((image, index) => ( -
- {`uploaded-${index}`} +
+ {`uploaded-${index}`}
))}
diff --git a/src/components/Chat/ChatContent/Message/View/EditView.tsx b/src/components/Chat/ChatContent/Message/View/EditView.tsx index 7bfdf2830..ff5f0e85f 100644 --- a/src/components/Chat/ChatContent/Message/View/EditView.tsx +++ b/src/components/Chat/ChatContent/Message/View/EditView.tsx @@ -34,6 +34,7 @@ const EditView = ({ const [_content, _setContent] = useState(content); const [isModalOpen, setIsModalOpen] = useState(false); + const [imageUrl, setImageUrl] = useState(''); const textareaRef = React.createRef(); const { t } = useTranslation(); @@ -104,6 +105,22 @@ const EditView = ({ _setContent(updatedContent); }; + const handleImageUrlChange = () => { + if (imageUrl.trim() === '') return; + + const newImage: ImageContentInterface = { + type: 'image_url', + image_url: { + detail: 'auto', + url: imageUrl, + }, + }; + + const updatedContent = [..._content, newImage]; + _setContent(updatedContent); + setImageUrl(''); + }; + const handleImageDetailChange = (index: number, detail: string) => { const updatedImages = [..._content]; updatedImages[index + 1].image_url.detail = detail; @@ -229,6 +246,9 @@ const EditView = ({ setIsEdit={setIsEdit} _setContent={_setContent} _content={_content} + imageUrl={imageUrl} + setImageUrl={setImageUrl} + handleImageUrlChange={handleImageUrlChange} /> {isModalOpen && ( ) => void; @@ -265,6 +288,9 @@ const EditViewButtons = memo( setIsEdit: React.Dispatch>; _setContent: React.Dispatch>; _content: ContentInterface[]; + imageUrl: string; + setImageUrl: React.Dispatch>; + handleImageUrlChange: () => void; }) => { const { t } = useTranslation(); const generating = useStore.getState().generating; @@ -286,65 +312,82 @@ const EditViewButtons = memo( return (
{modelTypes[model] == 'image' && ( -
-
- {_content.slice(1).map((image, index) => ( -
- {`uploaded-${index}`} -
- - + <> +
+
+ {_content.slice(1).map((image, index) => ( +
+ {`uploaded-${index}`} +
+ + +
-
- ))} + ))} + +
+
+
+ setImageUrl(e.target.value)} + placeholder={t('enter_image_url_placeholder') as string} + className='input input-bordered w-full max-w-xs text-gray-800 dark:text-white p-3 border-none bg-gray-200 dark:bg-gray-600 rounded-md m-0 w-full mr-0 h-10 focus:outline-none' + />
- {/* Hidden file input */} -
+ )} +
{sticky && ( From 834a2714610602728bf77823797d92646c153191 Mon Sep 17 00:00:00 2001 From: Dmitri Nasonov Date: Wed, 3 Jul 2024 00:45:51 +0100 Subject: [PATCH 2/2] Fix title generation due to message format change --- src/components/Menu/ChatHistoryList.tsx | 11 ++--------- src/hooks/useSubmit.ts | 4 +++- src/types/chat.ts | 7 +++++++ 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/Menu/ChatHistoryList.tsx b/src/components/Menu/ChatHistoryList.tsx index 232a325da..04fe2b432 100644 --- a/src/components/Menu/ChatHistoryList.tsx +++ b/src/components/Menu/ChatHistoryList.tsx @@ -11,17 +11,10 @@ import { ChatHistoryFolderInterface, ChatInterface, FolderCollection, - ImageContentInterface, - TextContentInterface, - ContentInterface, + isImageContent, + isTextContent, } from '@type/chat'; -function isTextContent(ob: ContentInterface): ob is TextContentInterface { - return (ob as TextContentInterface).text !== undefined; -} -function isImageContent(ob: ContentInterface): ob is ImageContentInterface { - return (ob as ImageContentInterface).image_url !== undefined; -} const ChatHistoryList = () => { const currentChatIndex = useStore((state) => state.currentChatIndex); const displayChatSize = useStore((state) => state.displayChatSize); diff --git a/src/hooks/useSubmit.ts b/src/hooks/useSubmit.ts index a8c6a7d05..3eb37696a 100644 --- a/src/hooks/useSubmit.ts +++ b/src/hooks/useSubmit.ts @@ -197,9 +197,11 @@ const useSubmit = () => { const message: MessageInterface = { role: 'user', content: [ + ...user_message, + ...assistant_message, { type: 'text', - text: `Generate a title in less than 6 words for the following message (language: ${i18n.language}):\n"""\nUser: ${user_message}\nAssistant: ${assistant_message}\n"""`, + text: `Generate a title in less than 6 words for the conversation so far (language: ${i18n.language})`, } as TextContentInterface, ], }; diff --git a/src/types/chat.ts b/src/types/chat.ts index e6b975a3b..b5d6da766 100644 --- a/src/types/chat.ts +++ b/src/types/chat.ts @@ -22,6 +22,13 @@ export interface TextContentInterface extends ContentInterface { text: string; } +export function isTextContent(ob: ContentInterface): ob is TextContentInterface { + return (ob as TextContentInterface).text !== undefined; +} +export function isImageContent(ob: ContentInterface): ob is ImageContentInterface { + return (ob as ImageContentInterface).image_url !== undefined; +} + export interface ContentInterface { [x: string]: any; type: Content;