Add dependencies and update code for PDF parsing and searching

2024-02-25 00:12:46 +05:30 · 2024-02-25 00:12:46 +05:30 · 06b32176a9
commit 06b32176a9
parent f87953ba5c
22 changed files with 577 additions and 249 deletions
--- a/package.json
+++ b/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",
--- a/src/components/Common/Markdown.tsx
+++ b/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={{
--- a/src/components/Common/Playground/Message.tsx
+++ b/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
-      className={`group w-full text-gray-800 dark:text-gray-100`}>
+    <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">
@ -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)]">
-            {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">
+          <div className="flex w-[calc(100%-50px)] flex-col gap-3 lg:w-[calc(100%-115px)]">
+            <span className="text-xs font-bold text-gray-800 dark:text-white">
+              {props.isBot ? props.name : "You"}
+            </span>
+
+            <div className="flex flex-grow flex-col">
              <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 && (
-                  <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>
-                )}
+                {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>
            )}
-
-            {props.isBot && (
-              <div className="flex space-x-2">
+            {props.isBot && !props.isProcessing && (
+              <div className="flex space-x-2 gap-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>
+                  <Tooltip title="Copy to clipboard">
+                    <button
+                      onClick={() => {
+                        navigator.clipboard.writeText(props.message)
+                        setIsBtnPressed(true)
+                        setTimeout(() => {
+                          setIsBtnPressed(false)
+                        }, 2000)
+                      }}
+                      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>
+                  </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>
--- a/src/components/Common/SaveButton.tsx
+++ b/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()
--- a/src/components/Option/Playground/PlaygroundChat.tsx
+++ b/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 && (
--- a/src/components/Option/Playground/PlaygroundForm.tsx
+++ b/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
-                    disabled={isSending || form.values.message.length === 0}
-                    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 ">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      className="h-4 w-4 mr-2"
-                      viewBox="0 0 24 24">
-                      <path d="M9 10L4 15 9 20"></path>
-                      <path d="M20 4v7a4 4 0 01-4 4H4"></path>
-                    </svg>
-                    Send
-                  </button>
+                  <Dropdown.Button
+                    htmlType="submit"
+                    disabled={
+                      isSending || form.values.message.trim().length === 0
+                    }
+                    className="!justify-end !w-auto"
+                    icon={
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        strokeWidth={1.5}
+                        stroke="currentColor"
+                        className="w-5 h-5">
+                        <path
+                          strokeLinecap="round"
+                          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
--- a/src/components/Option/Playground/PlaygroundMessage.tsx
+++ b/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>
-  )
-}
--- a/src/components/Sidepanel/Chat/body.tsx
+++ b/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>
--- a/src/components/Sidepanel/Chat/empty.tsx
+++ b/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 === "") {
-                  return
-                }
-                setSelectedModel(e.target.value)
+                setSelectedModel(e)
              }}
              value={selectedModel}
-              className="bg-gray-100 truncate w-full dark:bg-[#171717] dark:text-gray-100 rounded-md px-4 py-2 mt-2">
-              <option key="0x" value={""}>
-                Select a model
-              </option>
-              {ollamaInfo.models.map((model, index) => (
-                <option key={index} value={model.name}>
-                  {model.name}
-                </option>
-              ))}
-            </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={ollamaInfo.models?.map((model) => ({
+                label: model.name,
+                value: model.model
+              }))}
+            />

            <div className="mt-4">
              <div className="inline-flex items-center">
--- a/src/components/Sidepanel/Chat/form.tsx
+++ b/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
-                  disabled={isSending || form.values.message.length === 0}
-                  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 ">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    className="h-4 w-4 mr-2"
-                    viewBox="0 0 24 24">
-                    <path d="M9 10L4 15 9 20"></path>
-                    <path d="M20 4v7a4 4 0 01-4 4H4"></path>
-                  </svg>
-                  Send
-                </button>
+                <Dropdown.Button
+                  htmlType="submit"
+                  disabled={
+                    isSending || form.values.message.trim().length === 0
+                  }
+                  className="!justify-end !w-auto"
+                  icon={
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      strokeWidth={1.5}
+                      stroke="currentColor"
+                      className="w-5 h-5">
+                      <path
+                        strokeLinecap="round"
+                        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>
--- a/src/components/Sidepanel/Settings/body.tsx
+++ b/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
--- a/src/hooks/useMessage.tsx
+++ b/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,
-      chunkOverlap: 200
+      chunkSize,
+      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)
--- a/src/hooks/useMessageOption.tsx
+++ b/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([
-        ...history,
-        {
-          role: "user",
-          content: message,
-          image
-        },
-        {
-          role: "assistant",
-          content: newMessage[appendingIndex].message
-        }
-      ])
+      if (!isRegenerate) {
+        setHistory([
+          ...history,
+          {
+            role: "user",
+            content: message,
+            image
+          },
+          {
+            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,6 +271,7 @@ export const useMessageOption = () => {
      }

      setIsProcessing(false)
+      setStreaming(false)
    } catch (e) {
      console.log(e)

@ -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
  }
 }
--- a/src/libs/db.ts
+++ b/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 })
+}
--- a/src/libs/get-html.ts
+++ b/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
--- a/src/loader/html.ts
+++ b/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
--- a/src/services/ollama.ts
+++ b/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)
+}
--- a/src/store/index.tsx
+++ b/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 }),
--- a/src/store/option.tsx
+++ b/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 }),
--- a/src/store/webui.tsx
+++ b/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 })
+}))
--- a/src/web/local-google.ts
+++ b/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
+}
--- a/yarn.lock
+++ b/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"