Merge pull request #19 from n4ze3m/next

--- a/package.json
+++ b/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": {
--- a/src/components/Common/Playground/EditMessageForm.tsx
+++ 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<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>
+  )
+}
--- a/src/components/Common/Playground/Message.tsx
+++ b/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 && (
-              <div className="flex space-x-2 gap-2">
+            {!props.isProcessing && !editMode && (
+              <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>
--- a/src/components/Option/Playground/PlaygroundChat.tsx
+++ b/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 && (
--- a/src/components/Sidepanel/Chat/body.tsx
+++ b/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>
--- a/src/hooks/useMessageOption.tsx
+++ b/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: []
        }
      ]
-
-    const appendingIndex = newMessage.length - 1
-    if (!isRegenerate) {
-      setMessages(newMessage)
+    } else {
+      newMessage = [
+        ...messages,
+        {
+          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: []
        }
      ]
-
-    const appendingIndex = newMessage.length - 1
-    if (!isRegenerate) {
-      setMessages(newMessage)
+    } else {
+      newMessage = [
+        ...messages,
+        {
+          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))
-      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({
          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,
--- 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 })
 }


@ -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()
--- a/src/web/web.ts
+++ b/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",
                }
            })