From 5b04e55a031d858152c43309751f761bb248ab9b Mon Sep 17 00:00:00 2001 From: n4ze3m Date: Thu, 14 Mar 2024 23:43:58 +0530 Subject: [PATCH 1/3] Refactor message appending logic in useMessageOption hook --- src/components/Common/Playground/Message.tsx | 112 +++++++++++-------- src/hooks/useMessageOption.tsx | 106 +++++++++++------- src/libs/db.ts | 5 +- 3 files changed, 130 insertions(+), 93 deletions(-) diff --git a/src/components/Common/Playground/Message.tsx b/src/components/Common/Playground/Message.tsx index 26b9833..ef02ed5 100644 --- a/src/components/Common/Playground/Message.tsx +++ b/src/components/Common/Playground/Message.tsx @@ -2,7 +2,7 @@ import Markdown from "../../Common/Markdown" import React from "react" import { Image, Tooltip } from "antd" import { WebSearch } from "./WebSearch" -import { CheckIcon, ClipboardIcon } from "lucide-react" +import { CheckIcon, ClipboardIcon, Pen, RotateCcw } from "lucide-react" type Props = { message: string @@ -26,7 +26,7 @@ export const PlaygroundMessage = (props: Props) => { return (
-
+
@@ -58,23 +58,25 @@ export const PlaygroundMessage = (props: Props) => {
{/* source if aviable */} - {props.images && props.images.length > 0 && ( -
- {props.images - .filter((image) => image.length > 0) - .map((image, index) => ( - Uploaded Image - ))} -
- )} + {props.images && + props.images && + props.images.filter((img) => img.length > 0).length > 0 && ( +
+ {props.images + .filter((image) => image.length > 0) + .map((image, index) => ( + Uploaded Image + ))} +
+ )} - {props.isBot && ( + {props.isBot && props?.sources && props?.sources.length > 0 && (
{props?.sources?.map((source, index) => ( { ))}
)} - {props.isBot && !props.isProcessing && ( -
- {!props.hideCopy && ( - - - - )} + {!props.isProcessing && ( +
+ {props.isBot && ( + <> + {!props.hideCopy && ( + + + + )} - {/* {props.currentMessageIndex === props.totalMessages - 1 && ( - - - - )} */} + {props.currentMessageIndex === props.totalMessages - 1 && ( + + + + )} + + )} + + +
)}
diff --git a/src/hooks/useMessageOption.tsx b/src/hooks/useMessageOption.tsx index d4174b4..cd03a03 100644 --- a/src/hooks/useMessageOption.tsx +++ b/src/hooks/useMessageOption.tsx @@ -148,27 +148,37 @@ export const useMessageOption = () => { baseUrl: cleanUrl(url) }) - let newMessage: Message[] = [ - ...messages, - { - isBot: false, - name: "You", - message, - sources: [], - images: [image] - }, - { - isBot: true, - name: selectedModel, - message: "▋", - sources: [] - } - ] - - const appendingIndex = newMessage.length - 1 + let newMessage: Message[] = [] if (!isRegenerate) { - setMessages(newMessage) + newMessage = [ + ...messages, + { + isBot: false, + name: "You", + message, + sources: [], + images: [image] + }, + { + isBot: true, + name: selectedModel, + message: "▋", + sources: [] + } + ] + } else { + newMessage = [ + ...messages, + { + isBot: true, + name: selectedModel, + message: "▋", + sources: [] + } + ] } + setMessages(newMessage) + const appendingIndex = newMessage.length - 1 try { setIsSearchingInternet(true) @@ -321,8 +331,6 @@ export const useMessageOption = () => { setIsProcessing(false) setStreaming(false) } catch (e) { - e - if (e?.name === "AbortError") { newMessage[appendingIndex].message = newMessage[ appendingIndex @@ -393,27 +401,37 @@ export const useMessageOption = () => { baseUrl: cleanUrl(url) }) - let newMessage: Message[] = [ - ...messages, - { - isBot: false, - name: "You", - message, - sources: [], - images: [image] - }, - { - isBot: true, - name: selectedModel, - message: "▋", - sources: [] - } - ] - - const appendingIndex = newMessage.length - 1 + let newMessage: Message[] = [] if (!isRegenerate) { - setMessages(newMessage) + newMessage = [ + ...messages, + { + isBot: false, + name: "You", + message, + sources: [], + images: [image] + }, + { + isBot: true, + name: selectedModel, + message: "▋", + sources: [] + } + ] + } else { + newMessage = [ + ...messages, + { + isBot: true, + name: selectedModel, + message: "▋", + sources: [] + } + ] } + setMessages(newMessage) + const appendingIndex = newMessage.length - 1 try { const prompt = await systemPromptForNonRagOption() @@ -624,8 +642,12 @@ export const useMessageOption = () => { const regenerateLastMessage = async () => { if (history.length > 0) { const lastMessage = history[history.length - 2] - setHistory(history.slice(0, -1)) - setMessages(messages.slice(0, -1)) + let newHistory = history + let mewMessages = messages + newHistory.pop() + mewMessages.pop() + setHistory(newHistory) + setMessages(mewMessages) await removeMessageUsingHistoryId(historyId) if (lastMessage.role === "user") { await onSubmit({ diff --git a/src/libs/db.ts b/src/libs/db.ts index e21a597..ce3cc10 100644 --- a/src/libs/db.ts +++ b/src/libs/db.ts @@ -286,11 +286,10 @@ export const updateHistory = async (id: string, title: string) => { } export const removeMessageUsingHistoryId = async (history_id: string) => { - // remove the last message const db = new PageAssitDatabase() const chatHistory = await db.getChatHistory(history_id) - const newChatHistory = chatHistory.slice(0, -1) - await db.db.set({ [history_id]: newChatHistory }) + chatHistory.shift() + await db.db.set({ [history_id]: chatHistory }) } From 78c44e13b03a54d96a297d699399e232a2b1f6dc Mon Sep 17 00:00:00 2001 From: n4ze3m Date: Sat, 16 Mar 2024 00:30:41 +0530 Subject: [PATCH 2/3] Add edit functionality to PlaygroundMessage component --- .../Common/Playground/EditMessageForm.tsx | 62 ++++++++++++ src/components/Common/Playground/Message.tsx | 20 +++- .../Option/Playground/PlaygroundChat.tsx | 11 ++- src/components/Sidepanel/Chat/body.tsx | 1 + src/hooks/useMessageOption.tsx | 98 +++++++++++++++++-- src/libs/db.ts | 16 +++ 6 files changed, 197 insertions(+), 11 deletions(-) create mode 100644 src/components/Common/Playground/EditMessageForm.tsx diff --git a/src/components/Common/Playground/EditMessageForm.tsx b/src/components/Common/Playground/EditMessageForm.tsx new file mode 100644 index 0000000..260a3cd --- /dev/null +++ b/src/components/Common/Playground/EditMessageForm.tsx @@ -0,0 +1,62 @@ +import { useForm } from "@mantine/form" +import React from "react" +import useDynamicTextareaSize from "~hooks/useDynamicTextareaSize" + +type Props = { + value: string + onSumbit: (value: string) => void + onClose: () => void + isBot: boolean +} + +export const EditMessageForm = (props: Props) => { + const [isComposing, setIsComposing] = React.useState(false) + const textareaRef = React.useRef(null) + + const form = useForm({ + initialValues: { + message: props.value + } + }) + useDynamicTextareaSize(textareaRef, form.values.message, 300) + + React.useEffect(() => { + form.setFieldValue("message", props.value) + }, [props.value]) + + return ( +
{ + if (isComposing) return + props.onClose() + props.onSumbit(data.message) + })} + className="flex flex-col gap-2"> +