From 65ba2ff898897ea7a4fbebcc1a044ca7fa07e6f4 Mon Sep 17 00:00:00 2001
From: n4ze3m <n4ze3m@gmail.com>
Date: Sun, 3 Nov 2024 23:38:41 +0530
Subject: [PATCH] feat: add save and send functionality for user message

Adds a "Save" button to the edit message form in Playground, allowing users to save changes without immediately submitting them. This also introduces a new `isSend` flag to the `onEditFormSubmit` prop, enabling developers to control whether a message should be sent immediately or saved for later submission. This enhances flexibility and user control during the message editing process.
---
 src/components/Common/Markdown.tsx            | 14 +-----
 .../Common/Playground/EditMessageForm.tsx     | 50 +++++++++++++------
 src/components/Common/Playground/Message.tsx  |  2 +-
 .../Option/Playground/PlaygroundChat.tsx      |  4 +-
 src/components/Option/Settings/tts-mode.tsx   |  9 ++--
 src/hooks/useMessageOption.tsx                | 18 ++++---
 6 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/src/components/Common/Markdown.tsx b/src/components/Common/Markdown.tsx
index 2934b64..c996acf 100644
--- a/src/components/Common/Markdown.tsx
+++ b/src/components/Common/Markdown.tsx
@@ -8,20 +8,8 @@ import rehypeKatex from "rehype-katex"
 import "property-information"
 import React from "react"
 import { CodeBlock } from "./CodeBlock"
-export const preprocessLaTeX = (content: string) => {
-  // Replace block-level LaTeX delimiters \[ \] with $$ $$
+import { preprocessLaTeX } from "@/utils/latex"
 
-  const blockProcessedContent = content.replace(
-    /\\\[(.*?)\\\]/gs,
-    (_, equation) => `$$${equation}$$`
-  )
-  // Replace inline LaTeX delimiters \( \) with $ $
-  const inlineProcessedContent = blockProcessedContent.replace(
-    /\\\((.*?)\\\)/gs,
-    (_, equation) => `$${equation}$`
-  )
-  return inlineProcessedContent
-}
 function Markdown({
   message,
   className = "prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark"
diff --git a/src/components/Common/Playground/EditMessageForm.tsx b/src/components/Common/Playground/EditMessageForm.tsx
index e818f24..f42b6d4 100644
--- a/src/components/Common/Playground/EditMessageForm.tsx
+++ b/src/components/Common/Playground/EditMessageForm.tsx
@@ -5,7 +5,7 @@ import useDynamicTextareaSize from "~/hooks/useDynamicTextareaSize"
 
 type Props = {
   value: string
-  onSumbit: (value: string) => void
+  onSumbit: (value: string, isSend: boolean) => void
   onClose: () => void
   isBot: boolean
 }
@@ -31,7 +31,7 @@ export const EditMessageForm = (props: Props) => {
       onSubmit={form.onSubmit((data) => {
         if (isComposing) return
         props.onClose()
-        props.onSumbit(data.message)
+        props.onSumbit(data.message, true)
       })}
       className="flex flex-col gap-2">
       <textarea
@@ -46,19 +46,39 @@ export const EditMessageForm = (props: Props) => {
         ref={textareaRef}
         className="w-full  bg-transparent focus-within:outline-none focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
       />
-      <div className="flex justify-center space-x-2 mt-2">
-        <button
-          aria-label={t("save")}
-          className="bg-black px-2.5 py-2 rounded-lg text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-900">
-          {props.isBot ? t("save") : t("saveAndSubmit")}
-        </button>
-        <button
-          onClick={props.onClose}
-          aria-label={t("cancel")}
-          className="border dark:border-gray-600 px-2.5 py-2 rounded-lg text-gray-700 dark:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900">
-          {t("cancel")}
-        </button>
-      </div>
+      <div className="flex flex-wrap gap-2 mt-2">
+        <div
+          className={`w-full flex ${
+            !props.isBot ? "justify-between" : "justify-end"
+          }`}>
+          {!props.isBot && (
+            <button
+              type="button"
+              onClick={() => {
+                props.onSumbit(form.values.message, false)
+                props.onClose()
+              }}
+              aria-label={t("save")}
+              className="border border-gray-600 px-2 py-1.5 rounded-lg text-gray-700 dark:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900 text-sm">
+              {t("save")}
+            </button>
+          )}
+          <div className="flex space-x-2">
+            <button
+              aria-label={t("save")}
+              className="bg-black px-2 py-1.5 rounded-lg text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-900 text-sm">
+              {props.isBot ? t("save") : t("saveAndSubmit")}
+            </button>
+
+            <button
+              onClick={props.onClose}
+              aria-label={t("cancel")}
+              className="border dark:border-gray-600 px-2 py-1.5 rounded-lg text-gray-700 dark:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900 text-sm">
+              {t("cancel")}
+            </button>
+          </div>
+        </div>
+      </div>{" "}
     </form>
   )
 }
diff --git a/src/components/Common/Playground/Message.tsx b/src/components/Common/Playground/Message.tsx
index 9d664a1..0c6299c 100644
--- a/src/components/Common/Playground/Message.tsx
+++ b/src/components/Common/Playground/Message.tsx
@@ -29,7 +29,7 @@ type Props = {
   currentMessageIndex: number
   totalMessages: number
   onRengerate: () => void
-  onEditFormSubmit: (value: string) => void
+  onEditFormSubmit: (value: string, isSend: boolean) => void
   isProcessing: boolean
   webSearch?: {}
   isSearchingInternet?: boolean
diff --git a/src/components/Option/Playground/PlaygroundChat.tsx b/src/components/Option/Playground/PlaygroundChat.tsx
index 4a2795b..5f2adfe 100644
--- a/src/components/Option/Playground/PlaygroundChat.tsx
+++ b/src/components/Option/Playground/PlaygroundChat.tsx
@@ -46,8 +46,8 @@ export const PlaygroundChat = () => {
             isProcessing={streaming}
             isSearchingInternet={isSearchingInternet}
             sources={message.sources}
-            onEditFormSubmit={(value) => {
-              editMessage(index, value, !message.isBot)
+            onEditFormSubmit={(value, isSend) => {
+              editMessage(index, value, !message.isBot, isSend)
             }}
             onSourceClick={(data) => {
               setSource(data)
diff --git a/src/components/Option/Settings/tts-mode.tsx b/src/components/Option/Settings/tts-mode.tsx
index a85316b..7360419 100644
--- a/src/components/Option/Settings/tts-mode.tsx
+++ b/src/components/Option/Settings/tts-mode.tsx
@@ -86,11 +86,10 @@ export const TTSModeSettings = ({ hideBorder }: { hideBorder?: boolean }) => {
               placeholder={t("generalSettings.tts.ttsVoice.placeholder")}
               className="w-full mt-4 sm:mt-0 sm:w-[200px]"
               options={data?.browserTTSVoices?.map(
-                (voice) =>
-                  ({
-                    label: `${voice.voiceName} - ${voice.lang}`.trim(),
-                    value: voice.voiceName
-                  }) || []
+                (voice) => ({
+                  label: `${voice.voiceName} - ${voice.lang}`.trim(),
+                  value: voice.voiceName
+                })
               )}
               {...form.getInputProps("voice")}
             />
diff --git a/src/hooks/useMessageOption.tsx b/src/hooks/useMessageOption.tsx
index c7a2edb..58d56bf 100644
--- a/src/hooks/useMessageOption.tsx
+++ b/src/hooks/useMessageOption.tsx
@@ -910,12 +910,14 @@ export const useMessageOption = () => {
   const editMessage = async (
     index: number,
     message: string,
-    isHuman: boolean
+    isHuman: boolean,
+    isSend: boolean
   ) => {
     let newMessages = messages
     let newHistory = history
 
-    if (isHuman) {
+    // if human message and send then only trigger the submit
+    if (isHuman && isSend) {
       const isOk = validateBeforeSubmit()
 
       if (!isOk) {
@@ -939,13 +941,13 @@ export const useMessageOption = () => {
         memory: previousHistory,
         controller: abortController
       })
-    } else {
-      newMessages[index].message = message
-      setMessages(newMessages)
-      newHistory[index].content = message
-      setHistory(newHistory)
-      await updateMessageByIndex(historyId, index, message)
+      return
     }
+    newMessages[index].message = message
+    setMessages(newMessages)
+    newHistory[index].content = message
+    setHistory(newHistory)
+    await updateMessageByIndex(historyId, index, message)
   }
 
   return {