Add dependencies and update code for PDF parsing and searching

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 === "") {
-                  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">

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>

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