Add key prop to Image component and update speechToTextLanguage state

src/components/Common/Playground/Message.tsx

@@ -1,6 +1,7 @@
 import { CheckIcon, ClipboardIcon } from "@heroicons/react/24/outline"
 import Markdown from "../../Common/Markdown"
 import React from "react"
+import { Image } from "antd"
 
 type Props = {
   message: string
@@ -53,23 +54,25 @@ export const PlaygroundMessage = (props: Props) => {
               <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 && (
                   <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) => (
-                    <div
+                        <Image
                           key={index}
-                      className="h-full rounded-md shadow relative">
-                      <img
                           src={image}
-                        alt="Uploaded"
+                          alt="Uploaded Image"
-                        className="h-full w-auto object-cover rounded-md min-w-[50px]"
+                          width={180}
+                          className="rounded-md relative"
                         />
-                    </div>
                       ))}
                   </div>
                 )}
+              </div>
+            )}
 
             {props.isBot && (
               <div className="flex space-x-2">

src/components/Option/Playground/PlaygroundMessage.tsx

@@ -60,6 +60,7 @@ export const PlaygroundMessage = (props: Props) => {
                   .filter((image) => image.length > 0)
                   .map((image, index) => (
                     <Image
+                      key={index}
                       src={image}
                       alt="Uploaded Image"
                       width={180}

src/components/Sidepanel/Chat/empty.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query"
+import { RotateCcw } from "lucide-react"
 import { useEffect, useState } from "react"
 import { useMessage } from "~hooks/useMessage"
 import {
@@ -79,7 +80,8 @@ export const EmptySidePanel = () => {
                   saveOllamaURL(ollamaURL)
                   refetch()
                 }}
-                className="bg-pink-500 mt-4 hover:bg-pink-600 text-white px-4 py-2 rounded-md dark:bg-pink-600 dark:hover:bg-pink-700">
+                className="inline-flex mt-4 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 ">
+                <RotateCcw className="h-4 w-4 mr-3" />
                 Retry
               </button>
             </div>

src/components/Sidepanel/Chat/form.tsx

@@ -6,6 +6,9 @@ import { useMessage } from "~hooks/useMessage"
 import PhotoIcon from "@heroicons/react/24/outline/PhotoIcon"
 import XMarkIcon from "@heroicons/react/24/outline/XMarkIcon"
 import { toBase64 } from "~libs/to-base64"
+import { MicIcon } from "lucide-react"
+import { Image, Tooltip } from "antd"
+import { useSpeechRecognition } from "~hooks/useSpeechRecognition"
 
 type Props = {
   dropedFile: File | undefined
@@ -50,33 +53,52 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
 
   useDynamicTextareaSize(textareaRef, form.values.message, 120)
 
-  const { onSubmit, selectedModel, chatMode } = useMessage()
+  const { onSubmit, selectedModel, chatMode, speechToTextLanguage } =
+    useMessage()
+  const { isListening, start, stop, transcript } = useSpeechRecognition()
 
+  React.useEffect(() => {
+    if (isListening) {
+      form.setFieldValue("message", transcript)
+    }
+  }, [transcript])
   const { mutateAsync: sendMessage, isPending: isSending } = useMutation({
     mutationFn: onSubmit
   })
 
   return (
-    <div className="p-3 md:p-6 md:bg-white dark:bg-[#262626] border rounded-t-xl border-black/10 dark:border-gray-700">
+    <div className="px-3 pt-3 md:px-6 md:pt-6 md:bg-white dark:bg-[#262626] border rounded-t-xl border-black/10 dark:border-gray-600">
-      <div className="flex-grow space-y-6 ">
+      <div
-        {chatMode === "normal" && form.values.image && (
+        className={`h-full rounded-md shadow relative ${
-          <div className="h-full rounded-md shadow relative">
+          form.values.image.length === 0 ? "hidden" : "block"
-            <div>
+        }`}>
-              <img
+        <div className="relative">
+          <Image
             src={form.values.image}
-                alt="Uploaded"
+            alt="Uploaded Image"
-                className="h-full w-auto object-cover rounded-md min-w-[50px]"
+            width={180}
+            preview={false}
+            className="rounded-md"
           />
           <button
             onClick={() => {
               form.setFieldValue("image", "")
             }}
-                className="absolute top-2 right-2 bg-white dark:bg-[#262626] p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 text-black dark:text-gray-100">
+            className="flex items-center justify-center absolute top-0 m-2 bg-white  dark:bg-[#262626] p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-600 text-black dark:text-gray-100">
             <XMarkIcon className="h-5 w-5" />
           </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
             onSubmit={form.onSubmit(async (value) => {
@@ -91,18 +113,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                 message: value.message.trim()
               })
             })}
-            className="shrink-0 flex-grow  flex items-center ">
+            className="shrink-0 flex-grow  flex flex-col items-center ">
-            <div className="flex items-center p-2 rounded-2xl border  bg-gray-100 w-full dark:bg-[#262626] dark:border-gray-700">
-              <button
-                type="button"
-                onClick={() => {
-                  inputRef.current?.click()
-                }}
-                className={`flex ml-3 items-center justify-center dark:text-gray-100 ${
-                  chatMode === "rag" ? "hidden" : "block"
-                }`}>
-                <PhotoIcon className="h-5 w-5" />
-              </button>
             <input
               id="file-upload"
               name="file-upload"
@@ -113,7 +124,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
               multiple={false}
               onChange={onInputChange}
             />
-
+            <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) {
@@ -139,13 +150,51 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                 className="px-2 py-2 w-full resize-none bg-transparent focus-within:outline-none sm:text-sm focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
                 required
                 rows={1}
+                style={{ minHeight: "60px" }}
                 tabIndex={0}
                 placeholder="Type a message..."
                 {...form.getInputProps("message")}
               />
+              <div className="flex mt-4 justify-end gap-3">
+                <Tooltip title="Voice Message">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      if (isListening) {
+                        stop()
+                      } else {
+                        start({
+                          lang: speechToTextLanguage,
+                          continuous: true
+                        })
+                      }
+                    }}
+                    className={`flex items-center justify-center dark:text-gray-300`}>
+                    {!isListening ? (
+                      <MicIcon className="h-5 w-5" />
+                    ) : (
+                      <div className="relative">
+                        <span className="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"></span>
+                        <MicIcon className="h-5 w-5" />
+                      </div>
+                    )}
+                  </button>
+                </Tooltip>
+                <Tooltip title="Upload Image">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      inputRef.current?.click()
+                    }}
+                    className={`flex items-center justify-center dark:text-gray-300 ${
+                      chatMode === "rag" ? "hidden" : "block"
+                    }`}>
+                    <PhotoIcon className="h-5 w-5" />
+                  </button>
+                </Tooltip>
                 <button
                   disabled={isSending || form.values.message.length === 0}
-                className="ml-2 flex items-center justify-center w-10 h-10  text-white bg-black rounded-xl disabled:opacity-50">
+                  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"
@@ -153,13 +202,15 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth="2"
-                  className="h-6 w-6"
+                    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>
               </div>
+            </div>
           </form>
         </div>
         {form.errors.message && (

src/components/Sidepanel/Settings/body.tsx

@@ -9,9 +9,12 @@ import {
   setSystemPromptForNonRag
 } from "~services/ollama"
 
-import { Skeleton, Radio } from "antd"
+import { Skeleton, Radio, Select } from "antd"
 import { useDarkMode } from "~hooks/useDarkmode"
 import { SaveButton } from "~components/Common/SaveButton"
+import { Moon, Sun } from "lucide-react"
+import { SUPPORTED_LANGUAGES } from "~utils/supporetd-languages"
+import { useMessage } from "~hooks/useMessage"
 
 export const SettingsBody = () => {
   const [ollamaURL, setOllamaURL] = React.useState<string>("")
@@ -21,6 +24,8 @@ export const SettingsBody = () => {
   const [selectedValue, setSelectedValue] = React.useState<"normal" | "rag">(
     "normal"
   )
+
+  const { speechToTextLanguage, setSpeechToTextLanguage } = useMessage()
   const { mode, toggleDarkMode } = useDarkMode()
 
   const { data, status } = useQuery({
@@ -67,25 +72,6 @@ export const SettingsBody = () => {
 
   return (
     <div className="flex flex-col gap-4 p-4 max-w-2xl mx-auto lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl">
-      <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">
-          Ollama URL
-        </h2>
-        <input
-          className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
-          value={ollamaURL}
-          type="url"
-          onChange={(e) => setOllamaURL(e.target.value)}
-          placeholder="Enter Ollama URL here"
-        />
-        <div className="flex justify-end">
-          <SaveButton
-            onClick={() => {
-              saveOllamaURL(ollamaURL)
-            }}
-          />
-        </div>
-      </div>
       <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
         <h2 className="text-md font-semibold dark:text-white">Prompt</h2>
         <div className="my-3 flex justify-end">
@@ -151,19 +137,62 @@ export const SettingsBody = () => {
         )}
       </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">
+          Ollama URL
+        </h2>
+        <input
+          className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
+          value={ollamaURL}
+          type="url"
+          onChange={(e) => setOllamaURL(e.target.value)}
+          placeholder="Enter Ollama URL here"
+        />
+        <div className="flex justify-end">
+          <SaveButton
+            onClick={() => {
+              saveOllamaURL(ollamaURL)
+            }}
+          />
+        </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">
+          Speech Recognition Language
+        </h2>
+        <Select
+          placeholder="Select Language"
+          allowClear
+          showSearch
+          options={SUPPORTED_LANGUAGES}
+          value={speechToTextLanguage}
+          filterOption={(input, option) =>
+            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
+            option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }
+          onChange={(value) => {
+            setSpeechToTextLanguage(value)
+          }}
+          style={{
+            width: "100%"
+          }}
+        />
+      </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">Theme</h2>
         {mode === "dark" ? (
           <button
             onClick={toggleDarkMode}
-            className="select-none w-full rounded-lg border border-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
+            className="select-none inline-flex w-full rounded-lg border border-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
-            Light Mode
+            <Sun className="h-4 w-4 mr-2" />
+            Light
           </button>
         ) : (
           <button
             onClick={toggleDarkMode}
-            className="select-none w-full rounded-lg border border-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
+            className="select-none inline-flex w-full rounded-lg border border-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
-            Dark Mode
+            <Moon className="h-4 w-4 mr-2" />
+            Dark
           </button>
         )}
       </div>

src/hooks/useMessage.tsx

@@ -99,7 +99,9 @@ export const useMessage = () => {
     chatMode,
     setChatMode,
     setIsEmbedding,
-    isEmbedding
+    isEmbedding,
+    speechToTextLanguage,
+    setSpeechToTextLanguage
   } = useStoreMessage()
 
   const abortControllerRef = React.useRef<AbortController | null>(null)
@@ -439,6 +441,8 @@ ${e?.message}
     setSelectedModel,
     chatMode,
     setChatMode,
-    isEmbedding
+    isEmbedding,
+    speechToTextLanguage,
+    setSpeechToTextLanguage
   }
 }

src/store/index.tsx

@@ -10,7 +10,7 @@ export type Message = {
 
 export type ChatHistory = {
   role: "user" | "assistant" | "system"
-  content: string,
+  content: string
   image?: string
 }[]
 
@@ -35,6 +35,8 @@ type State = {
   setChatMode: (chatMode: "normal" | "rag") => void
   isEmbedding: boolean
   setIsEmbedding: (isEmbedding: boolean) => void
+  speechToTextLanguage: string
+  setSpeechToTextLanguage: (speechToTextLanguage: string) => void
 }
 
 export const useStoreMessage = create<State>((set) => ({
@@ -59,4 +61,7 @@ export const useStoreMessage = create<State>((set) => ({
   setChatMode: (chatMode) => set({ chatMode }),
   isEmbedding: false,
   setIsEmbedding: (isEmbedding) => set({ isEmbedding }),
+  speechToTextLanguage: "en-US",
+  setSpeechToTextLanguage: (speechToTextLanguage) =>
+    set({ speechToTextLanguage })
 }))