Merge pull request #19 from n4ze3m/next

Next

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pageassist",
   "displayName": "Page Assist - A Web UI for Local AI Models",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Use your locally running AI models to assist you in your web browsing.",
   "author": "n4ze3m",
   "scripts": {

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<HTMLTextAreaElement>(null)
+
+  const form = useForm({
+    initialValues: {
+      message: props.value
+    }
+  })
+  useDynamicTextareaSize(textareaRef, form.values.message, 300)
+
+  React.useEffect(() => {
+    form.setFieldValue("message", props.value)
+  }, [props.value])
+
+  return (
+    <form
+      onSubmit={form.onSubmit((data) => {
+        if (isComposing) return
+        props.onClose()
+        props.onSumbit(data.message)
+      })}
+      className="flex flex-col gap-2">
+      <textarea
+        {...form.getInputProps("message")}
+        onCompositionStart={() => setIsComposing(true)}
+        onCompositionEnd={() => setIsComposing(false)}
+        required
+        rows={1}
+        style={{ minHeight: "60px" }}
+        tabIndex={0}
+        placeholder="Type a message..."
+        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="Save"
+          className="bg-white dark:bg-black px-2.5 py-2 rounded-md 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">
+          {props.isBot ? "Save" : "Save & Submit"}
+        </button>
+        <button
+          onClick={props.onClose}
+          aria-label="Cancel"
+          className="border dark:border-gray-600 px-2.5 py-2 rounded-md 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">
+          Cancel
+        </button>
+      </div>
+    </form>
+  )
+}

src/components/Common/Playground/Message.tsx

@@ -2,7 +2,8 @@ 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"
+import { EditMessageForm } from "./EditMessageForm"
 
 type Props = {
   message: string
@@ -15,18 +16,21 @@ type Props = {
   currentMessageIndex: number
   totalMessages: number
   onRengerate: () => void
+  onEditFormSubmit: (value: string) => void
   isProcessing: boolean
   webSearch?: {}
   isSearchingInternet?: boolean
   sources?: any[]
+  hideEditAndRegenerate?: boolean
 }
 
 export const PlaygroundMessage = (props: Props) => {
   const [isBtnPressed, setIsBtnPressed] = React.useState(false)
+  const [editMode, setEditMode] = React.useState(false)
 
   return (
     <div className="group w-full text-gray-800 dark:text-gray-100">
-      <div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
+      <div className="text-base  md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
         <div className="flex flex-row gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 lg:px-0 m-auto w-full">
           <div className="w-8 flex flex-col relative items-end">
             <div className="relative h-7 w-7 p-1 rounded-sm text-white flex items-center justify-center  text-opacity-100r">
@@ -55,10 +59,21 @@ export const PlaygroundMessage = (props: Props) => {
             ) : null}
 
             <div className="flex flex-grow flex-col">
+              {!editMode ? (
                 <Markdown message={props.message} />
+              ) : (
+                <EditMessageForm
+                  value={props.message}
+                  onSumbit={props.onEditFormSubmit}
+                  onClose={() => setEditMode(false)}
+                  isBot={props.isBot}
+                />
+              )}
             </div>
             {/* source if aviable */}
-            {props.images && props.images.length > 0 && (
+            {props.images &&
+              props.images &&
+              props.images.filter((img) => img.length > 0).length > 0 && (
                 <div className="flex md:max-w-2xl lg:max-w-xl xl:max-w-3xl mt-4 m-auto w-full">
                   {props.images
                     .filter((image) => image.length > 0)
@@ -74,7 +89,7 @@ export const PlaygroundMessage = (props: Props) => {
                 </div>
               )}
 
-            {props.isBot && (
+            {props.isBot && props?.sources && props?.sources.length > 0 && (
               <div className="mb-3 flex flex-wrap gap-2">
                 {props?.sources?.map((source, index) => (
                   <a
@@ -87,8 +102,15 @@ export const PlaygroundMessage = (props: Props) => {
                 ))}
               </div>
             )}
-            {props.isBot && !props.isProcessing && (
+            {!props.isProcessing && !editMode && (
-              <div className="flex space-x-2 gap-2">
+              <div
+                className={`space-x-2 gap-2 mt-3 ${
+                  props.currentMessageIndex !== props.totalMessages - 1
+                    ? "hidden group-hover:flex"
+                    : "flex"
+                }`}>
+                {props.isBot && (
+                  <>
                     {!props.hideCopy && (
                       <Tooltip title="Copy to clipboard">
                         <button
@@ -109,15 +131,27 @@ export const PlaygroundMessage = (props: Props) => {
                       </Tooltip>
                     )}
 
-                {/* {props.currentMessageIndex === props.totalMessages - 1 && (
+                    {!props.hideEditAndRegenerate &&
+                      props.currentMessageIndex === props.totalMessages - 1 && (
                         <Tooltip title="Regenerate">
                           <button
                             onClick={props.onRengerate}
                             className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
-                      <ArrowPathIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                            <RotateCcw className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                           </button>
                         </Tooltip>
-                )} */}
+                      )}
+                  </>
+                )}
+                {!props.hideEditAndRegenerate && (
+                  <Tooltip title="Edit">
+                    <button
+                      onClick={() => setEditMode(true)}
+                      className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                      <Pen className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                    </button>
+                  </Tooltip>
+                )}
               </div>
             )}
           </div>

src/components/Option/Playground/PlaygroundChat.tsx

@@ -4,7 +4,13 @@ import { PlaygroundEmpty } from "./PlaygroundEmpty"
 import { PlaygroundMessage } from "~components/Common/Playground/Message"
 
 export const PlaygroundChat = () => {
-  const { messages, streaming, regenerateLastMessage, isSearchingInternet } = useMessageOption()
+  const {
+    messages,
+    streaming,
+    regenerateLastMessage,
+    isSearchingInternet,
+    editMessage
+  } = useMessageOption()
   const divRef = React.useRef<HTMLDivElement>(null)
   React.useEffect(() => {
     if (divRef.current) {
@@ -32,6 +38,9 @@ export const PlaygroundChat = () => {
           isProcessing={streaming}
           isSearchingInternet={isSearchingInternet}
           sources={message.sources}
+          onEditFormSubmit={(value) => {
+            editMessage(index, value, !message.isBot)
+          }}
         />
       ))}
       {messages.length > 0 && (

src/components/Sidepanel/Chat/body.tsx

@@ -16,6 +16,7 @@ export const SidePanelBody = () => {
       {messages.length === 0 && <EmptySidePanel />}
       {messages.map((message, index) => (
         <PlaygroundMessage
+        onEditFormSubmit={(value) => {}}
           key={index}
           isBot={message.isBot}
           message={message.message}
@@ -25,6 +26,7 @@ export const SidePanelBody = () => {
           totalMessages={messages.length}
           onRengerate={() => {}}
           isProcessing={streaming}
+          hideEditAndRegenerate
         />
       ))}
       <div className="w-full h-32 md:h-48 flex-shrink-0"></div>

src/hooks/useMessageOption.tsx

@@ -15,10 +15,12 @@ import {
 } from "@langchain/core/messages"
 import { useStoreMessageOption } from "~store/option"
 import {
+  deleteChatForEdit,
   getPromptById,
   removeMessageUsingHistoryId,
   saveHistory,
-  saveMessage
+  saveMessage,
+  updateMessageByIndex
 } from "~libs/db"
 import { useNavigate } from "react-router-dom"
 import { notification } from "antd"
@@ -114,6 +116,8 @@ export const useMessageOption = () => {
     setSelectedSystemPrompt
   } = useStoreMessageOption()
 
+  // const { notification } = App.useApp()
+
   const navigate = useNavigate()
   const textareaRef = React.useRef<HTMLTextAreaElement>(null)
 
@@ -134,7 +138,9 @@ export const useMessageOption = () => {
   const searchChatMode = async (
     message: string,
     image: string,
-    isRegenerate: boolean
+    isRegenerate: boolean,
+    messages: Message[],
+    history: ChatHistory
   ) => {
     const url = await getOllamaURL()
 
@@ -148,7 +154,9 @@ export const useMessageOption = () => {
       baseUrl: cleanUrl(url)
     })
 
-    let newMessage: Message[] = [
+    let newMessage: Message[] = []
+    if (!isRegenerate) {
+      newMessage = [
         ...messages,
         {
           isBot: false,
@@ -164,11 +172,19 @@ export const useMessageOption = () => {
           sources: []
         }
       ]
-
+    } else {
-    const appendingIndex = newMessage.length - 1
+      newMessage = [
-    if (!isRegenerate) {
+        ...messages,
-      setMessages(newMessage)
+        {
+          isBot: true,
+          name: selectedModel,
+          message: "▋",
+          sources: []
         }
+      ]
+    }
+    setMessages(newMessage)
+    const appendingIndex = newMessage.length - 1
 
     try {
       setIsSearchingInternet(true)
@@ -321,8 +337,6 @@ export const useMessageOption = () => {
       setIsProcessing(false)
       setStreaming(false)
     } catch (e) {
-      e
-
       if (e?.name === "AbortError") {
         newMessage[appendingIndex].message = newMessage[
           appendingIndex
@@ -379,7 +393,9 @@ export const useMessageOption = () => {
   const normalChatMode = async (
     message: string,
     image: string,
-    isRegenerate: boolean
+    isRegenerate: boolean,
+    messages: Message[],
+    history: ChatHistory
   ) => {
     const url = await getOllamaURL()
 
@@ -393,7 +409,9 @@ export const useMessageOption = () => {
       baseUrl: cleanUrl(url)
     })
 
-    let newMessage: Message[] = [
+    let newMessage: Message[] = []
+    if (!isRegenerate) {
+      newMessage = [
         ...messages,
         {
           isBot: false,
@@ -409,11 +427,19 @@ export const useMessageOption = () => {
           sources: []
         }
       ]
-
+    } else {
-    const appendingIndex = newMessage.length - 1
+      newMessage = [
-    if (!isRegenerate) {
+        ...messages,
-      setMessages(newMessage)
+        {
+          isBot: true,
+          name: selectedModel,
+          message: "▋",
+          sources: []
         }
+      ]
+    }
+    setMessages(newMessage)
+    const appendingIndex = newMessage.length - 1
 
     try {
       const prompt = await systemPromptForNonRagOption()
@@ -607,31 +633,57 @@ export const useMessageOption = () => {
   const onSubmit = async ({
     message,
     image,
-    isRegenerate = false
+    isRegenerate = false,
+    messages: chatHistory,
+    memory
   }: {
     message: string
     image: string
     isRegenerate?: boolean
+    messages?: Message[]
+    memory?: ChatHistory
   }) => {
     setStreaming(true)
     if (webSearch) {
-      await searchChatMode(message, image, isRegenerate)
+      await searchChatMode(
+        message,
+        image,
+        isRegenerate,
+        chatHistory || messages,
+        memory || history
+      )
     } else {
-      await normalChatMode(message, image, isRegenerate)
+      await normalChatMode(
+        message,
+        image,
+        isRegenerate,
+        chatHistory || messages,
+        memory || history
+      )
     }
   }
 
   const regenerateLastMessage = async () => {
+    const isOk = validateBeforeSubmit()
+
+    if (!isOk) {
+      return
+    }
     if (history.length > 0) {
       const lastMessage = history[history.length - 2]
-      setHistory(history.slice(0, -1))
+      let newHistory = history
-      setMessages(messages.slice(0, -1))
+      let mewMessages = messages
+      newHistory.pop()
+      mewMessages.pop()
+      setHistory(newHistory)
+      setMessages(mewMessages)
       await removeMessageUsingHistoryId(historyId)
       if (lastMessage.role === "user") {
         await onSubmit({
           message: lastMessage.content,
           image: lastMessage.image || "",
-          isRegenerate: true
+          isRegenerate: true,
+          memory: newHistory
         })
       }
     }
@@ -644,7 +696,61 @@ export const useMessageOption = () => {
     }
   }
 
+  const validateBeforeSubmit = () => {
+    if (!selectedModel || selectedModel?.trim()?.length === 0) {
+      notification.error({
+        message: "Error",
+        description: "Please select a model to continue"
+      })
+      return false
+    }
+
+    return true
+  }
+
+  const editMessage = async (
+    index: number,
+    message: string,
+    isHuman: boolean
+  ) => {
+    // update message and history by index
+    let newMessages = messages
+    let newHistory = history
+
+    if (isHuman) {
+      const isOk = validateBeforeSubmit()
+
+      if (!isOk) {
+        return
+      }
+
+      const currentHumanMessage = newMessages[index]
+      newMessages[index].message = message
+      newHistory[index].content = message
+      const previousMessages = newMessages.slice(0, index + 1)
+      setMessages(previousMessages)
+      const previousHistory = newHistory.slice(0, index + 1)
+      setHistory(previousHistory)
+      await updateMessageByIndex(historyId, index, message)
+      await deleteChatForEdit(historyId, index)
+      await onSubmit({
+        message: message,
+        image: currentHumanMessage.images[0] || "",
+        isRegenerate: true,
+        messages: previousMessages,
+        memory: previousHistory
+      })
+    } else {
+      newMessages[index].message = message
+      setMessages(newMessages)
+      newHistory[index].content = message
+      setHistory(newHistory)
+      await updateMessageByIndex(historyId, index, message)
+    }
+  }
+
   return {
+    editMessage,
     messages,
     setMessages,
     onSubmit,

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)
+  chatHistory.shift()
-  await db.db.set({ [history_id]: newChatHistory })
+  await db.db.set({ [history_id]: chatHistory })
 }
 
 
@@ -300,6 +299,22 @@ export const getAllPrompts = async () => {
 }
 
 
+export const updateMessageByIndex = async (history_id: string, index: number, message: string) => {
+  const db = new PageAssitDatabase()
+  const chatHistory = (await db.getChatHistory(history_id)).reverse()
+  chatHistory[index].content = message
+  await db.db.set({ [history_id]: chatHistory.reverse() })
+
+}
+
+export const deleteChatForEdit = async (history_id: string, index: number) => {
+  const db = new PageAssitDatabase()
+  const chatHistory = (await db.getChatHistory(history_id)).reverse()
+  const previousHistory = chatHistory.slice(0, index + 1)
+  // console.log(previousHistory)
+  await db.db.set({ [history_id]: previousHistory.reverse() })
+}
+
 export const savePrompt = async ({ content, title, is_system = false }: { title: string, content: string, is_system: boolean }) => {
   const db = new PageAssitDatabase()
   const id = generateID()

src/web/web.ts

@@ -1,6 +1,15 @@
 import { getWebSearchPrompt } from "~services/ollama"
 import { webSearch } from "./local-google"
 
+const getHostName = (url: string) => {
+    try {
+        const hostname = new URL(url).hostname
+        return hostname
+    } catch (e) {
+        return ""
+    }
+}
+
 export const getSystemPromptForWeb = async (query: string) => {
     try {
         const search = await webSearch(query)
@@ -18,7 +27,7 @@ export const getSystemPromptForWeb = async (query: string) => {
             source: search.map((result) => {
                 return {
                     url: result.url,
-                    name: new URL(result.url).hostname,
+                    name: getHostName(result.url),
                     type: "url",
                 }
             })