Add dependencies and update code for PDF parsing and searching

2024-02-25 00:12:46 +05:30
parent f87953ba5c
commit 06b32176a9
22 changed files with 577 additions and 249 deletions
--- 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