Add dependencies and update code for PDF parsing and searching

package.json

@@ -20,6 +20,7 @@
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/react-query": "^5.17.19",
+    "@types/pdf-parse": "^1.1.4",
     "antd": "^5.13.3",
     "axios": "^1.6.7",
     "dayjs": "^1.11.10",

src/components/Common/Markdown.tsx

@@ -24,7 +24,7 @@ export default function Markdown({ message }: { message: string }) {
   return (
     <React.Fragment>
       <ReactMarkdown
-        className="prose break-words dark:prose-invert text-sm prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark"
+        className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark"
         remarkPlugins={[remarkGfm, remarkMath]}
         rehypePlugins={[rehypeMathjax]}
         components={{

src/components/Common/Playground/Message.tsx

@@ -1,8 +1,9 @@
 import Markdown from "../../Common/Markdown"
 import React from "react"
-import { Image } from "antd"
+import { Image, Tooltip } from "antd"
 import { ClipboardIcon } from "~icons/ClipboardIcon"
 import { CheckIcon } from "~icons/CheckIcon"
+import { ArrowPathIcon } from "~icons/ArrowPathIcon"
 
 type Props = {
   message: string
@@ -12,22 +13,20 @@ type Props = {
   isBot: boolean
   name: string
   images?: string[]
+  currentMessageIndex: number
+  totalMessages: number
+  onRengerate: () => void
+  isProcessing: boolean
+  webSearch?: {
+    
+  }
 }
 
 export const PlaygroundMessage = (props: Props) => {
   const [isBtnPressed, setIsBtnPressed] = React.useState(false)
 
-  React.useEffect(() => {
-    if (isBtnPressed) {
-      setTimeout(() => {
-        setIsBtnPressed(false)
-      }, 4000)
-    }
-  }, [isBtnPressed])
-
   return (
-    <div
+    <div className="group w-full text-gray-800 dark:text-gray-100">
-      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="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">
@@ -45,52 +44,61 @@ export const PlaygroundMessage = (props: Props) => {
               )}
             </div>
           </div>
-          <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
+          <div className="flex w-[calc(100%-50px)] flex-col gap-3 lg:w-[calc(100%-115px)]">
-            {props.isBot && (
+            <span className="text-xs font-bold text-gray-800 dark:text-white">
-              <span className="absolute mb-8 -top-4 left-0 text-xs text-gray-400 dark:text-gray-500">
+              {props.isBot ? props.name : "You"}
-                {props.name}
+            </span>
-              </span>
+
-            )}
+            <div className="flex flex-grow flex-col">
-            <div className="flex flex-grow flex-col gap-3">
               <Markdown message={props.message} />
             </div>
             {/* source if aviable */}
-            {props.images && (
+            {props.images && props.images.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 && (
+                {props.images
-                  <div className="flex md:max-w-2xl lg:max-w-xl xl:max-w-3xl mt-4 m-auto w-full">
+                  .filter((image) => image.length > 0)
-                    {props.images
+                  .map((image, index) => (
-                      .filter((image) => image.length > 0)
+                    <Image
-                      .map((image, index) => (
+                      key={index}
-                        <Image
+                      src={image}
-                          key={index}
+                      alt="Uploaded Image"
-                          src={image}
+                      width={180}
-                          alt="Uploaded Image"
+                      className="rounded-md relative"
-                          width={180}
+                    />
-                          className="rounded-md relative"
+                  ))}
-                        />
-                      ))}
-                  </div>
-                )}
               </div>
             )}
-
+            {props.isBot && !props.isProcessing && (
-            {props.isBot && (
+              <div className="flex space-x-2 gap-2">
-              <div className="flex space-x-2">
                 {!props.hideCopy && (
-                  <button
+                  <Tooltip title="Copy to clipboard">
-                    onClick={() => {
+                    <button
-                      navigator.clipboard.writeText(props.message)
+                      onClick={() => {
-                      setIsBtnPressed(true)
+                        navigator.clipboard.writeText(props.message)
-                    }}
+                        setIsBtnPressed(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">
+                        setTimeout(() => {
-                    {!isBtnPressed ? (
+                          setIsBtnPressed(false)
-                      <ClipboardIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                        }, 2000)
-                    ) : (
+                      }}
-                      <CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
+                      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">
-                    )}
+                      {!isBtnPressed ? (
-                  </button>
+                        <ClipboardIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                      ) : (
+                        <CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
+                      )}
+                    </button>
+                  </Tooltip>
                 )}
+
+                {/* {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" />
+                    </button>
+                  </Tooltip>
+                )} */}
               </div>
             )}
           </div>

src/components/Common/SaveButton.tsx

@@ -1,11 +1,12 @@
 import { useState } from "react"
 
 type Props = {
-  onClick: () => void
+  onClick?: () => void
   disabled?: boolean
   className?: string
   text?: string
   textOnSave?: string
+  btnType?: "button" | "submit" | "reset"
 }
 
 export const SaveButton = ({
@@ -13,11 +14,13 @@ export const SaveButton = ({
   disabled,
   className,
   text = "Save",
-  textOnSave = "Saved"
+  textOnSave = "Saved",
+  btnType = "button"
 }: Props) => {
   const [clickedSave, setClickedSave] = useState(false)
   return (
     <button
+      type={btnType}
       onClick={() => {
         setClickedSave(true)
         onClick()

src/components/Option/Playground/PlaygroundChat.tsx

@@ -1,11 +1,10 @@
 import React from "react"
-import { useMessage } from "~hooks/useMessage"
 import { useMessageOption } from "~hooks/useMessageOption"
-import { PlaygroundMessage } from "./PlaygroundMessage"
 import { PlaygroundEmpty } from "./PlaygroundEmpty"
+import { PlaygroundMessage } from "~components/Common/Playground/Message"
 
 export const PlaygroundChat = () => {
-  const { messages } = useMessageOption()
+  const { messages, streaming, regenerateLastMessage } = useMessageOption()
   const divRef = React.useRef<HTMLDivElement>(null)
   React.useEffect(() => {
     if (divRef.current) {
@@ -19,7 +18,7 @@ export const PlaygroundChat = () => {
           <PlaygroundEmpty />
         </div>
       )}
-      {messages.length > 0 && <div className="w-full h-14 flex-shrink-0"></div>}
+      {messages.length > 0 && <div className="w-full h-16 flex-shrink-0"></div>}
       {messages.map((message, index) => (
         <PlaygroundMessage
           key={index}
@@ -27,6 +26,10 @@ export const PlaygroundChat = () => {
           message={message.message}
           name={message.name}
           images={message.images || []}
+          currentMessageIndex={index}
+          totalMessages={messages.length}
+          onRengerate={regenerateLastMessage}
+          isProcessing={streaming}
         />
       ))}
       {messages.length > 0 && (

src/components/Option/Playground/PlaygroundForm.tsx

@@ -4,13 +4,14 @@ import React from "react"
 import useDynamicTextareaSize from "~hooks/useDynamicTextareaSize"
 import { toBase64 } from "~libs/to-base64"
 import { useMessageOption } from "~hooks/useMessageOption"
-import { Tooltip } from "antd"
+import { Checkbox, Dropdown, Tooltip } from "antd"
 import { Image } from "antd"
 import { useSpeechRecognition } from "~hooks/useSpeechRecognition"
 import { MicIcon } from "~icons/MicIcon"
 import { StopCircleIcon } from "~icons/StopCircleIcon"
 import { PhotoIcon } from "~icons/PhotoIcon"
 import { XMarkIcon } from "~icons/XMarkIcon"
+import { useWebUI } from "~store/webui"
 
 type Props = {
   dropedFile: File | undefined
@@ -66,10 +67,12 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
     selectedModel,
     chatMode,
     speechToTextLanguage,
-    stopStreamingRequest
+    stopStreamingRequest,
+    streaming: isSending
   } = useMessageOption()
 
   const { isListening, start, stop, transcript } = useSpeechRecognition()
+  const { sendWhenEnter, setSendWhenEnter } = useWebUI()
 
   React.useEffect(() => {
     if (isListening) {
@@ -79,7 +82,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
 
   const queryClient = useQueryClient()
 
-  const { mutateAsync: sendMessage, isPending: isSending } = useMutation({
+  const { mutateAsync: sendMessage } = useMutation({
     mutationFn: onSubmit,
     onSuccess: () => {
       queryClient.invalidateQueries({
@@ -149,7 +152,12 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
             <div className="w-full border-x border-t flex flex-col dark:border-gray-600 rounded-t-xl p-2">
               <textarea
                 onKeyDown={(e) => {
-                  if (e.key === "Enter" && !e.shiftKey && !isSending) {
+                  if (
+                    e.key === "Enter" &&
+                    !e.shiftKey &&
+                    !isSending &&
+                    sendWhenEnter
+                  ) {
                     e.preventDefault()
                     form.onSubmit(async (value) => {
                       if (value.message.trim().length === 0) {
@@ -177,7 +185,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
                 placeholder="Type a message..."
                 {...form.getInputProps("message")}
               />
-              <div className="flex mt-4 justify-end gap-3">
+              <div className="flex mt-4 !justify-end gap-3">
                 <Tooltip title="Voice Message">
                   <button
                     type="button"
@@ -215,23 +223,60 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
                   </button>
                 </Tooltip>
                 {!isSending ? (
-                  <button
+                  <Dropdown.Button
-                    disabled={isSending || form.values.message.length === 0}
+                    htmlType="submit"
-                    className="inline-flex items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50 ">
+                    disabled={
-                    <svg
+                      isSending || form.values.message.trim().length === 0
-                      xmlns="http://www.w3.org/2000/svg"
+                    }
-                      fill="none"
+                    className="!justify-end !w-auto"
-                      stroke="currentColor"
+                    icon={
-                      strokeLinecap="round"
+                      <svg
-                      strokeLinejoin="round"
+                        xmlns="http://www.w3.org/2000/svg"
-                      strokeWidth="2"
+                        fill="none"
-                      className="h-4 w-4 mr-2"
+                        viewBox="0 0 24 24"
-                      viewBox="0 0 24 24">
+                        strokeWidth={1.5}
-                      <path d="M9 10L4 15 9 20"></path>
+                        stroke="currentColor"
-                      <path d="M20 4v7a4 4 0 01-4 4H4"></path>
+                        className="w-5 h-5">
-                    </svg>
+                        <path
-                    Send
+                          strokeLinecap="round"
-                  </button>
+                          strokeLinejoin="round"
+                          d="m19.5 8.25-7.5 7.5-7.5-7.5"
+                        />
+                      </svg>
+                    }
+                    menu={{
+                      items: [
+                        {
+                          key: 1,
+                          label: (
+                            <Checkbox
+                              onChange={(e) =>
+                                setSendWhenEnter(e.target.checked)
+                              }>
+                              Send when Enter pressed
+                            </Checkbox>
+                          )
+                        }
+                      ]
+                    }}>
+                    <div className="inline-flex gap-2">
+                      {sendWhenEnter ? (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          className="h-5 w-5"
+                          viewBox="0 0 24 24">
+                          <path d="M9 10L4 15 9 20"></path>
+                          <path d="M20 4v7a4 4 0 01-4 4H4"></path>
+                        </svg>
+                      ) : null}
+                      Submit
+                    </div>
+                  </Dropdown.Button>
                 ) : (
                   <Tooltip title="Stop Streaming">
                     <button

src/components/Option/Playground/PlaygroundMessage.tsx

@@ -1,95 +0,0 @@
-import Markdown from "../../Common/Markdown"
-import React from "react"
-import { Image } from "antd"
-import { ClipboardIcon } from "~icons/ClipboardIcon"
-import { CheckIcon } from "~icons/CheckIcon"
-
-type Props = {
-  message: string
-  hideCopy?: boolean
-  botAvatar?: JSX.Element
-  userAvatar?: JSX.Element
-  isBot: boolean
-  name: string
-  images?: string[]
-}
-
-export const PlaygroundMessage = (props: Props) => {
-  const [isBtnPressed, setIsBtnPressed] = React.useState(false)
-
-  React.useEffect(() => {
-    if (isBtnPressed) {
-      setTimeout(() => {
-        setIsBtnPressed(false)
-      }, 4000)
-    }
-  }, [isBtnPressed])
-
-  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="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">
-              {props.isBot ? (
-                !props.botAvatar ? (
-                  <div className="absolute h-8 w-8 rounded-full bg-gradient-to-r from-green-300 to-purple-400"></div>
-                ) : (
-                  props.botAvatar
-                )
-              ) : !props.userAvatar ? (
-                <div className="absolute h-8 w-8 rounded-full from-blue-400 to-blue-600 bg-gradient-to-r"></div>
-              ) : (
-                props.userAvatar
-              )}
-            </div>
-          </div>
-          <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
-            {props.isBot && (
-              <span className="absolute mb-8 -top-4 left-0 text-xs text-gray-400 dark:text-gray-500">
-                {props.name}
-              </span>
-            )}
-            <div className="flex flex-grow flex-col gap-3">
-              <Markdown message={props.message} />
-            </div>
-            {/* source if aviable */}
-            {props.images && (
-              <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)
-                  .map((image, index) => (
-                    <Image
-                      key={index}
-                      src={image}
-                      alt="Uploaded Image"
-                      width={180}
-                      className="rounded-md relative"
-                    />
-                  ))}
-              </div>
-            )}
-          </div>
-          {props.isBot && (
-            <div className="flex space-x-2">
-              {!props.hideCopy && (
-                <button
-                  onClick={() => {
-                    navigator.clipboard.writeText(props.message)
-                    setIsBtnPressed(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">
-                  {!isBtnPressed ? (
-                    <ClipboardIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
-                  ) : (
-                    <CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
-                  )}
-                </button>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

src/components/Sidepanel/Chat/body.tsx

@@ -4,7 +4,7 @@ import { useMessage } from "~hooks/useMessage"
 import { EmptySidePanel } from "../Chat/empty"
 
 export const SidePanelBody = () => {
-  const { messages } = useMessage()
+  const { messages, streaming } = useMessage()
   const divRef = React.useRef<HTMLDivElement>(null)
   React.useEffect(() => {
     if (divRef.current) {
@@ -21,6 +21,10 @@ export const SidePanelBody = () => {
           message={message.message}
           name={message.name}
           images={message.images || []}
+          currentMessageIndex={index}
+          totalMessages={messages.length}
+          onRengerate={() => {}}
+          isProcessing={streaming}
         />
       ))}
       <div className="w-full h-32 md:h-48 flex-shrink-0"></div>

src/components/Sidepanel/Chat/empty.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query"
+import { Select } from "antd"
 import { useEffect, useState } from "react"
 import { useMessage } from "~hooks/useMessage"
 import { RotateCcw } from "~icons/RotateCcw"
@@ -92,24 +93,25 @@ export const EmptySidePanel = () => {
           <div className="mt-4">
             <p className="dark:text-gray-400 text-gray-900">Models:</p>
 
-            <select
+            <Select
               onChange={(e) => {
-                if (e.target.value === "") {
+                setSelectedModel(e)
-                  return
-                }
-                setSelectedModel(e.target.value)
               }}
               value={selectedModel}
-              className="bg-gray-100 truncate w-full dark:bg-[#171717] dark:text-gray-100 rounded-md px-4 py-2 mt-2">
+              size="large"
-              <option key="0x" value={""}>
+              filterOption={(input, option) =>
-                Select a model
+                option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
-              </option>
+                option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-              {ollamaInfo.models.map((model, index) => (
+              }
-                <option key={index} value={model.name}>
+              showSearch
-                  {model.name}
+              placeholder="Select a model"
-                </option>
+              style={{ width: "100%" }}
-              ))}
+              className="mt-4"
-            </select>
+              options={ollamaInfo.models?.map((model) => ({
+                label: model.name,
+                value: model.model
+              }))}
+            />
 
             <div className="mt-4">
               <div className="inline-flex items-center">

src/components/Sidepanel/Chat/form.tsx

@@ -4,11 +4,13 @@ import React from "react"
 import useDynamicTextareaSize from "~hooks/useDynamicTextareaSize"
 import { useMessage } from "~hooks/useMessage"
 import { toBase64 } from "~libs/to-base64"
-import { Image, Tooltip } from "antd"
+import { Checkbox, Dropdown, Image, Tooltip } from "antd"
 import { useSpeechRecognition } from "~hooks/useSpeechRecognition"
 import { MicIcon } from "~icons/MicIcon"
 import { PhotoIcon } from "~icons/PhotoIcon"
 import { XMarkIcon } from "~icons/XMarkIcon"
+import { useWebUI } from "~store/webui"
+import { defaultEmbeddingModelForRag } from "~services/ollama"
 
 type Props = {
   dropedFile: File | undefined
@@ -17,6 +19,7 @@ type Props = {
 export const SidepanelForm = ({ dropedFile }: Props) => {
   const textareaRef = React.useRef<HTMLTextAreaElement>(null)
   const inputRef = React.useRef<HTMLInputElement>(null)
+  const { sendWhenEnter, setSendWhenEnter } = useWebUI()
 
   const resetHeight = () => {
     const textarea = textareaRef.current
@@ -89,15 +92,6 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
           </button>
         </div>
       </div>
-      {/* <div className="flex gap-3 justify-end">
-      <Tooltip title="New Chat">
-        <button
-          onClick={clearChat}
-          className="text-gray-500 dark:text-gray-100 mr-3">
-          <ArrowPathIcon className="h-5 w-5" />
-        </button>
-      </Tooltip>
-    </div> */}
       <div>
         <div className="flex">
           <form
@@ -106,6 +100,16 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                 form.setFieldError("message", "Please select a model")
                 return
               }
+              if (chatMode === "rag") {
+                const defaultEM = await defaultEmbeddingModelForRag()
+                if (!defaultEM) {
+                  form.setFieldError(
+                    "message",
+                    "Please set an embedding model on the settings page"
+                  )
+                  return
+                }
+              }
               form.reset()
               resetHeight()
               await sendMessage({
@@ -127,7 +131,12 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
             <div className="w-full border-x border-t flex flex-col dark:border-gray-600 rounded-t-xl p-2">
               <textarea
                 onKeyDown={(e) => {
-                  if (e.key === "Enter" && !e.shiftKey && !isSending) {
+                  if (
+                    e.key === "Enter" &&
+                    !e.shiftKey &&
+                    !isSending &&
+                    sendWhenEnter
+                  ) {
                     e.preventDefault()
                     form.onSubmit(async (value) => {
                       if (value.message.trim().length === 0) {
@@ -137,6 +146,16 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                         form.setFieldError("message", "Please select a model")
                         return
                       }
+                      if (chatMode === "rag") {
+                        const defaultEM = await defaultEmbeddingModelForRag()
+                        if (!defaultEM) {
+                          form.setFieldError(
+                            "message",
+                            "Please set an embedding model on the settings page"
+                          )
+                          return
+                        }
+                      }
                       form.reset()
                       resetHeight()
                       await sendMessage({
@@ -192,23 +211,60 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                     <PhotoIcon className="h-5 w-5" />
                   </button>
                 </Tooltip>
-                <button
+                <Dropdown.Button
-                  disabled={isSending || form.values.message.length === 0}
+                  htmlType="submit"
-                  className="inline-flex items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50 ">
+                  disabled={
-                  <svg
+                    isSending || form.values.message.trim().length === 0
-                    xmlns="http://www.w3.org/2000/svg"
+                  }
-                    fill="none"
+                  className="!justify-end !w-auto"
-                    stroke="currentColor"
+                  icon={
-                    strokeLinecap="round"
+                    <svg
-                    strokeLinejoin="round"
+                      xmlns="http://www.w3.org/2000/svg"
-                    strokeWidth="2"
+                      fill="none"
-                    className="h-4 w-4 mr-2"
+                      viewBox="0 0 24 24"
-                    viewBox="0 0 24 24">
+                      strokeWidth={1.5}
-                    <path d="M9 10L4 15 9 20"></path>
+                      stroke="currentColor"
-                    <path d="M20 4v7a4 4 0 01-4 4H4"></path>
+                      className="w-5 h-5">
-                  </svg>
+                      <path
-                  Send
+                        strokeLinecap="round"
-                </button>
+                        strokeLinejoin="round"
+                        d="m19.5 8.25-7.5 7.5-7.5-7.5"
+                      />
+                    </svg>
+                  }
+                  menu={{
+                    items: [
+                      {
+                        key: 1,
+                        label: (
+                          <Checkbox
+                            onChange={(e) =>
+                              setSendWhenEnter(e.target.checked)
+                            }>
+                            Send when Enter pressed
+                          </Checkbox>
+                        )
+                      }
+                    ]
+                  }}>
+                  <div className="inline-flex gap-2">
+                    {sendWhenEnter ? (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        className="h-5 w-5"
+                        viewBox="0 0 24 24">
+                        <path d="M9 10L4 15 9 20"></path>
+                        <path d="M20 4v7a4 4 0 01-4 4H4"></path>
+                      </svg>
+                    ) : null}
+                    Submit
+                  </div>
+                </Dropdown.Button>
               </div>
             </div>
           </form>

src/components/Sidepanel/Settings/body.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query"
+import { useMutation, useQuery } from "@tanstack/react-query"
 import React from "react"
 import {
   getOllamaURL,
@@ -6,10 +6,15 @@ import {
   promptForRag,
   setOllamaURL as saveOllamaURL,
   setPromptForRag,
-  setSystemPromptForNonRag
+  setSystemPromptForNonRag,
+  getAllModels,
+  defaultEmbeddingChunkOverlap,
+  defaultEmbeddingChunkSize,
+  defaultEmbeddingModelForRag,
+  saveForRag
 } from "~services/ollama"
 
-import { Skeleton, Radio, Select } from "antd"
+import { Skeleton, Radio, Select, Form, InputNumber } from "antd"
 import { useDarkMode } from "~hooks/useDarkmode"
 import { SaveButton } from "~components/Common/SaveButton"
 import { SUPPORTED_LANGUAGES } from "~utils/supporetd-languages"
@@ -32,21 +37,47 @@ export const SettingsBody = () => {
   const { data, status } = useQuery({
     queryKey: ["sidebarSettings"],
     queryFn: async () => {
-      const [ollamaURL, systemPrompt, ragPrompt] = await Promise.all([
+      const [
+        ollamaURL,
+        systemPrompt,
+        ragPrompt,
+        allModels,
+        chunkOverlap,
+        chunkSize,
+        defaultEM
+      ] = await Promise.all([
         getOllamaURL(),
         systemPromptForNonRag(),
-        promptForRag()
+        promptForRag(),
+        getAllModels(),
+        defaultEmbeddingChunkOverlap(),
+        defaultEmbeddingChunkSize(),
+        defaultEmbeddingModelForRag()
       ])
 
       return {
         url: ollamaURL,
         normalSystemPrompt: systemPrompt,
         ragSystemPrompt: ragPrompt.ragPrompt,
-        ragQuestionPrompt: ragPrompt.ragQuestionPrompt
+        ragQuestionPrompt: ragPrompt.ragQuestionPrompt,
+        models: allModels,
+        chunkOverlap,
+        chunkSize,
+        defaultEM
       }
     }
   })
 
+  const { mutate: saveRAG, isPending: isSaveRAGPending } = useMutation({
+    mutationFn: async (data: {
+      model: string
+      chunkSize: number
+      overlap: number
+    }) => {
+      await saveForRag(data.model, data.chunkSize, data.overlap)
+    }
+  })
+
   React.useEffect(() => {
     if (data) {
       setOllamaURL(data.url)
@@ -157,6 +188,71 @@ export const SettingsBody = () => {
           />
         </div>
       </div>
+
+      <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
+        <h2 className="text-md mb-4 font-semibold dark:text-white">
+          RAG Configuration
+        </h2>
+        <Form
+          onFinish={(data) => {
+            saveRAG({
+              model: data.defaultEM,
+              chunkSize: data.chunkSize,
+              overlap: data.chunkOverlap
+            })
+          }}
+          initialValues={{
+            chunkSize: data.chunkSize,
+            chunkOverlap: data.chunkOverlap,
+            defaultEM: data.defaultEM
+          }}>
+          <Form.Item
+            name="defaultEM"
+            label="Embedding Model"
+            help="Highly recommended to use embedding models like `nomic-embed-text`."
+            rules={[{ required: true, message: "Please select a model!" }]}>
+            <Select
+              size="large"
+              filterOption={(input, option) =>
+                option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
+                option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }
+              showSearch
+              placeholder="Select a model"
+              style={{ width: "100%" }}
+              className="mt-4"
+              options={data.models?.map((model) => ({
+                label: model.name,
+                value: model.model
+              }))}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="chunkSize"
+            label="Chunk Size"
+            rules={[
+              { required: true, message: "Please input your chunk size!" }
+            ]}>
+            <InputNumber style={{ width: "100%" }} placeholder="Chunk Size" />
+          </Form.Item>
+          <Form.Item
+            name="chunkOverlap"
+            label="Chunk Overlap"
+            rules={[
+              { required: true, message: "Please input your chunk overlap!" }
+            ]}>
+            <InputNumber
+              style={{ width: "100%" }}
+              placeholder="Chunk Overlap"
+            />
+          </Form.Item>
+
+          <div className="flex justify-end">
+            <SaveButton disabled={isSaveRAGPending} btnType="submit" />
+          </div>
+        </Form>
+      </div>
       <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
         <h2 className="text-md mb-4 font-semibold dark:text-white">
           Speech Recognition Language

src/hooks/useMessage.tsx

@@ -1,6 +1,9 @@
 import React from "react"
 import { cleanUrl } from "~libs/clean-url"
 import {
+  defaultEmbeddingChunkOverlap,
+  defaultEmbeddingChunkSize,
+  defaultEmbeddingModelForRag,
   getOllamaURL,
   promptForRag,
   systemPromptForNonRag
@@ -131,9 +134,11 @@ export const useMessage = () => {
       url
     })
     const docs = await loader.load()
+    const chunkSize = await defaultEmbeddingChunkSize();
+    const chunkOverlap = await defaultEmbeddingChunkOverlap();
     const textSplitter = new RecursiveCharacterTextSplitter({
-      chunkSize: 1000,
+      chunkSize,
-      chunkOverlap: 200
+      chunkOverlap,
     })
 
     const chunks = await textSplitter.splitDocuments(docs)
@@ -174,11 +179,13 @@ export const useMessage = () => {
 
     const appendingIndex = newMessage.length - 1
     setMessages(newMessage)
+    const embeddingModle = await defaultEmbeddingModelForRag()
     const ollamaEmbedding = new OllamaEmbeddings({
-      model: selectedModel,
+      model: embeddingModle || selectedModel,
       baseUrl: cleanUrl(ollamaUrl)
     })
 
+
     const ollamaChat = new ChatOllama({
       model: selectedModel,
       baseUrl: cleanUrl(ollamaUrl)

src/hooks/useMessageOption.tsx

@@ -10,7 +10,7 @@ import {
   SystemMessage
 } from "@langchain/core/messages"
 import { useStoreMessageOption } from "~store/option"
-import { saveHistory, saveMessage } from "~libs/db"
+import { removeMessageUsingHistoryId, saveHistory, saveMessage } from "~libs/db"
 import { useNavigate } from "react-router-dom"
 import { notification } from "antd"
 
@@ -112,7 +112,11 @@ export const useMessageOption = () => {
     navigate("/")
   }
 
-  const normalChatMode = async (message: string, image: string) => {
+  const normalChatMode = async (
+    message: string,
+    image: string,
+    isRegenerate: boolean
+  ) => {
     const url = await getOllamaURL()
 
     if (image.length > 0) {
@@ -143,7 +147,9 @@ export const useMessageOption = () => {
     ]
 
     const appendingIndex = newMessage.length - 1
-    setMessages(newMessage)
+    if (!isRegenerate) {
+      setMessages(newMessage)
+    }
 
     try {
       const prompt = await systemPromptForNonRagOption()
@@ -215,21 +221,33 @@ export const useMessageOption = () => {
         appendingIndex
       ].message.slice(0, -1)
 
-      setHistory([
+      if (!isRegenerate) {
-        ...history,
+        setHistory([
-        {
+          ...history,
-          role: "user",
+          {
-          content: message,
+            role: "user",
-          image
+            content: message,
-        },
+            image
-        {
+          },
-          role: "assistant",
+          {
-          content: newMessage[appendingIndex].message
+            role: "assistant",
-        }
+            content: newMessage[appendingIndex].message
-      ])
+          }
+        ])
+      } else {
+        setHistory([
+          ...history,
+          {
+            role: "assistant",
+            content: newMessage[appendingIndex].message
+          }
+        ])
+      }
 
       if (historyId) {
-        await saveMessage(historyId, selectedModel, "user", message, [image])
+        if (!isRegenerate) {
+          await saveMessage(historyId, selectedModel, "user", message, [image])
+        }
         await saveMessage(
           historyId,
           selectedModel,
@@ -253,9 +271,10 @@ export const useMessageOption = () => {
       }
 
       setIsProcessing(false)
+      setStreaming(false)
     } catch (e) {
       console.log(e)
-      
+
       if (e?.name === "AbortError") {
         newMessage[appendingIndex].message = newMessage[
           appendingIndex
@@ -311,12 +330,33 @@ export const useMessageOption = () => {
 
   const onSubmit = async ({
     message,
-    image
+    image,
+    isRegenerate = false
   }: {
     message: string
     image: string
+    isRegenerate?: boolean
   }) => {
-    await normalChatMode(message, image)
+    setStreaming(true)
+    // const web = await localGoogleSearch(message)
+    // console.log(web)
+    await normalChatMode(message, image, isRegenerate)
+  }
+
+  const regenerateLastMessage = async () => {
+    if (history.length > 0) {
+      const lastMessage = history[history.length - 2]
+      setHistory(history.slice(0, -1))
+      setMessages(messages.slice(0, -1))
+      await removeMessageUsingHistoryId(historyId)
+      if (lastMessage.role === "user") {
+        await onSubmit({
+          message: lastMessage.content,
+          image: lastMessage.image || "",
+          isRegenerate: true
+        })
+      }
+    }
   }
 
   const stopStreamingRequest = () => {
@@ -346,6 +386,7 @@ export const useMessageOption = () => {
     chatMode,
     setChatMode,
     speechToTextLanguage,
-    setSpeechToTextLanguage
+    setSpeechToTextLanguage,
+    regenerateLastMessage
   }
 }

src/libs/db.ts

@@ -9,6 +9,16 @@ type HistoryInfo = {
   createdAt: number
 }
 
+type WebSearch = {
+  search_engine: string
+  search_url: string
+  search_query: string
+  search_results: {
+    title: string
+    link: string
+  }[]
+}
+
 type Message = {
   id: string
   history_id: string
@@ -17,6 +27,7 @@ type Message = {
   content: string
   images?: string[]
   sources?: string[]
+  search?: WebSearch
   createdAt: number
 }
 
@@ -168,3 +179,11 @@ export const updateHistory = async (id: string, title: string) => {
   })
   db.db.set({ chatHistories: newChatHistories })
 }
+
+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 })
+}

src/libs/get-html.ts

@@ -8,11 +8,11 @@ const _getHtml = () => {
   )
   return { url, html }
 }
-
 export const getHtmlOfCurrentTab = async () => {
   const result = new Promise((resolve) => {
     chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => {
       const tab = tabs[0]
+
       const data = await chrome.scripting.executeScript({
         target: { tabId: tab.id },
         func: _getHtml

src/loader/html.ts

@@ -1,7 +1,14 @@
 import { BaseDocumentLoader } from "langchain/document_loaders/base"
 import { Document } from "@langchain/core/documents"
 import { compile } from "html-to-text"
+import { chromeRunTime } from "~libs/runtime"
 
+const isPDFFetch = async (url: string) => {
+  await chromeRunTime(url)
+  const response = await fetch(url)
+  const blob = await response.blob()
+  return blob.type === "application/pdf"
+}
 export interface WebLoaderParams {
   html: string
   url: string

src/services/ollama.ts

@@ -187,3 +187,63 @@ export const systemPromptForNonRagOption = async () => {
 export const setSystemPromptForNonRagOption = async (prompt: string) => {
   await storage.set("systemPromptForNonRagOption", prompt)
 }
+
+export const sendWhenEnter = async () => {
+  const sendWhenEnter = await storage.get("sendWhenEnter")
+  if (!sendWhenEnter || sendWhenEnter.length === 0) {
+    return true
+  }
+  return sendWhenEnter === "true"
+}
+
+export const setSendWhenEnter = async (sendWhenEnter: boolean) => {
+  await storage.set("sendWhenEnter", sendWhenEnter.toString())
+}
+
+export const defaultEmbeddingModelForRag = async () => {
+  const embeddingMode = await storage.get("defaultEmbeddingModel")
+  if (!embeddingMode || embeddingMode.length === 0) {
+    return null
+  }
+  return embeddingMode
+}
+
+export const defaultEmbeddingChunkSize = async () => {
+  const embeddingChunkSize = await storage.get("defaultEmbeddingChunkSize")
+  if (!embeddingChunkSize || embeddingChunkSize.length === 0) {
+    return 1000
+  }
+  return parseInt(embeddingChunkSize)
+}
+
+export const defaultEmbeddingChunkOverlap = async () => {
+  const embeddingChunkOverlap = await storage.get(
+    "defaultEmbeddingChunkOverlap"
+  )
+  if (!embeddingChunkOverlap || embeddingChunkOverlap.length === 0) {
+    return 200
+  }
+  return parseInt(embeddingChunkOverlap)
+}
+
+export const setDefaultEmbeddingModelForRag = async (model: string) => {
+  await storage.set("defaultEmbeddingModel", model)
+}
+
+export const setDefaultEmbeddingChunkSize = async (size: number) => {
+  await storage.set("defaultEmbeddingChunkSize", size.toString())
+}
+
+export const setDefaultEmbeddingChunkOverlap = async (overlap: number) => {
+  await storage.set("defaultEmbeddingChunkOverlap", overlap.toString())
+}
+
+export const saveForRag = async (
+  model: string,
+  chunkSize: number,
+  overlap: number
+) => {
+  await setDefaultEmbeddingModelForRag(model)
+  await setDefaultEmbeddingChunkSize(chunkSize)
+  await setDefaultEmbeddingChunkOverlap(overlap)
+}

src/store/index.tsx

@@ -44,7 +44,7 @@ export const useStoreMessage = create<State>((set) => ({
   setMessages: (messages) => set({ messages }),
   history: [],
   setHistory: (history) => set({ history }),
-  streaming: true,
+  streaming: false,
   setStreaming: (streaming) => set({ streaming }),
   isFirstMessage: true,
   setIsFirstMessage: (isFirstMessage) => set({ isFirstMessage }),

src/store/option.tsx

@@ -1,11 +1,21 @@
 import { create } from "zustand"
 
+type WebSearch = {
+  search_engine: string
+  search_url: string
+  search_query: string
+  search_results: {
+    title: string
+    link: string
+  }[]
+}
 export type Message = {
   isBot: boolean
   name: string
   message: string
   sources: any[]
   images?: string[]
+  search?: WebSearch
 }
 
 export type ChatHistory = {
@@ -44,7 +54,7 @@ export const useStoreMessageOption = create<State>((set) => ({
   setMessages: (messages) => set({ messages }),
   history: [],
   setHistory: (history) => set({ history }),
-  streaming: true,
+  streaming: false,
   setStreaming: (streaming) => set({ streaming }),
   isFirstMessage: true,
   setIsFirstMessage: (isFirstMessage) => set({ isFirstMessage }),

src/store/webui.tsx

@@ -0,0 +1,11 @@
+import { create } from "zustand"
+
+type State = {
+  sendWhenEnter: boolean
+  setSendWhenEnter: (sendWhenEnter: boolean) => void
+}
+
+export const useWebUI = create<State>((set) => ({
+  sendWhenEnter: true,
+  setSendWhenEnter: (sendWhenEnter) => set({ sendWhenEnter })
+}))

src/web/local-google.ts

@@ -0,0 +1,45 @@
+import { cleanUrl } from "~libs/clean-url"
+import { chromeRunTime } from "~libs/runtime"
+
+const BLOCKED_HOSTS = [
+  "google.com",
+  "youtube.com",
+  "twitter.com",
+]
+
+export const localGoogleSearch = async (query: string) => {
+  await chromeRunTime(
+    cleanUrl("https://www.google.com/search?hl=en&q=" + query)
+  )
+  const abortController = new AbortController()
+  setTimeout(() => abortController.abort(), 10000)
+
+  const htmlString = await fetch(
+    "https://www.google.com/search?hl=en&q=" + query,
+    {
+      signal: abortController.signal
+    }
+  )
+    .then((response) => response.text())
+    .catch()
+
+  const parser = new DOMParser()
+
+  const doc = parser.parseFromString(htmlString, "text/html")
+
+  const searchResults = Array.from(doc.querySelectorAll("div.g")).map(
+    (result) => {
+      const title = result.querySelector("h3")?.textContent
+      const link = result.querySelector("a")?.getAttribute("href")
+      return { title, link }
+    }
+  )
+  const filteredSearchResults = searchResults
+    .filter(
+      (result) =>
+        !result.link ||
+        !BLOCKED_HOSTS.some((host) => result.link.includes(host))
+    )
+    .filter((result) => result.title && result.link)
+  return filteredSearchResults
+}

yarn.lock

@@ -2451,6 +2451,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
+"@types/pdf-parse@^1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@types/pdf-parse/-/pdf-parse-1.1.4.tgz#21a539efd2f16009d08aeed3350133948b5d7ed1"
+  integrity sha512-+gbBHbNCVGGYw1S9lAIIvrHW47UYOhMIFUsJcMkMrzy1Jf0vulBN3XQIjPgnoOXveMuHnF3b57fXROnY/Or7eg==
+
 "@types/prop-types@*":
   version "15.7.11"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"