Merge pull request #4 from n4ze3m/next

v1.0.1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pageassist",
   "displayName": "Page Assist - A Web UI for Local AI Models",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Use your locally running AI models to assist you in your web browsing.",
   "author": "n4ze3m",
   "scripts": {

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
@@ -55,19 +56,21 @@ export const PlaygroundMessage = (props: Props) => {
             {/* 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
+                {props.images && (
-                  .filter((image) => image.length > 0)
+                  <div className="flex md:max-w-2xl lg:max-w-xl xl:max-w-3xl mt-4 m-auto w-full">
-                  .map((image, index) => (
+                    {props.images
-                    <div
+                      .filter((image) => image.length > 0)
-                      key={index}
+                      .map((image, index) => (
-                      className="h-full rounded-md shadow relative">
+                        <Image
-                      <img
+                          key={index}
-                        src={image}
+                          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>
             )}
 

src/components/Common/SaveButton.tsx

@@ -26,7 +26,7 @@ export const SaveButton = ({
         }, 1000)
       }}
       disabled={disabled}
-      className={`bg-pink-500 text-r mt-4 hover:bg-pink-600 text-white px-4 py-2 rounded-md dark:bg-pink-600 dark:hover:bg-pink-700 ${className}`}>
+      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 dark:bg-white dark:text-gray-800 disabled:opacity-50 ${className}`}>
       {clickedSave ? textOnSave : text}
     </button>
   )

src/components/Option/Layout.tsx

@@ -19,7 +19,7 @@ import { Drawer, Layout, Modal, Select } from "antd"
 import { useQuery } from "@tanstack/react-query"
 import { fetchModels } from "~services/ollama"
 import { useMessageOption } from "~hooks/useMessageOption"
-import { PanelLeftIcon, Settings2 } from "lucide-react"
+import { GithubIcon, PanelLeftIcon, Settings2, SquarePen } from "lucide-react"
 import { Settings } from "./Settings"
 import { useDarkMode } from "~hooks/useDarkmode"
 
@@ -65,8 +65,7 @@ export default function OptionLayout({
     queryFn: fetchModels
   })
 
-  const { selectedModel, setSelectedModel } = useMessageOption()
+  const { selectedModel, setSelectedModel, clearChat } = useMessageOption()
-
 
   return (
     <Layout className="bg-white dark:bg-[#171717] md:flex">
@@ -79,14 +78,30 @@ export default function OptionLayout({
               <PanelLeftIcon className="w-6 h-6" />
             </button>
           </div>
+          <div>
+            <button
+              onClick={clearChat}
+              className="inline-flex items-center rounded-lg border  dark:border-gray-700 bg-transparent px-3 py-3 text-sm font-medium leading-4 text-gray-800 shadow-sm  dark:text-white disabled:opacity-50 ">
+              <SquarePen className="h-4 w-4 mr-3" />
+              New Chat
+            </button>
+          </div>
+          <span className="text-lg font-thin text-zinc-300 dark:text-zinc-600">
+            {"/"}
+          </span>
           <div>
             <Select
               value={selectedModel}
               onChange={setSelectedModel}
               size="large"
               loading={isModelsLoading || isModelsFetching}
+              filterOption={(input, option) =>
+                option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
+                option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }
+              showSearch
               placeholder="Select a model"
-              className="w-64"
+              className="w-64 "
               options={models?.map((model) => ({
                 label: model.name,
                 value: model.model
@@ -94,14 +109,19 @@ export default function OptionLayout({
             />
           </div>
         </div>
-        <button>
+        <div className="flex gap-3 items-center">
-
+          <a
-        </button>
+            href="https://github.com/n4ze3m/page-assist"
-        <button
+            target="_blank"
-          onClick={() => setOpen(true)}
+            className="text-gray-500 dark:text-gray-400">
-          className="text-gray-500 dark:text-gray-400">
+            <GithubIcon className="w-6 h-6" />
-          <CogIcon className="w-6 h-6" />
+          </a>
-        </button>
+          <button
+            onClick={() => setOpen(true)}
+            className="text-gray-500 dark:text-gray-400">
+            <CogIcon className="w-6 h-6" />
+          </button>
+        </div>
       </div>
 
       <Layout.Content>{children}</Layout.Content>

src/components/Option/Playground/PlaygroundEmpty.tsx

@@ -1,7 +1,6 @@
 import { useQuery } from "@tanstack/react-query"
+import { RotateCcw } from "lucide-react"
 import { useEffect, useState } from "react"
-import { useMessage } from "~hooks/useMessage"
-import { useMessageOption } from "~hooks/useMessageOption"
 import {
   getOllamaURL,
   isOllamaRunning,
@@ -74,7 +73,8 @@ export const PlaygroundEmpty = () => {
                   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/Option/Playground/PlaygroundForm.tsx

@@ -6,8 +6,10 @@ import PhotoIcon from "@heroicons/react/24/outline/PhotoIcon"
 import XMarkIcon from "@heroicons/react/24/outline/XMarkIcon"
 import { toBase64 } from "~libs/to-base64"
 import { useMessageOption } from "~hooks/useMessageOption"
-import { ArrowPathIcon } from "@heroicons/react/24/outline"
 import { Tooltip } from "antd"
+import { MicIcon, MicOffIcon } from "lucide-react"
+import { Image } from "antd"
+import { useSpeechRecognition } from "~hooks/useSpeechRecognition"
 
 type Props = {
   dropedFile: File | undefined
@@ -30,6 +32,12 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
     }
   })
 
+  React.useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.focus()
+    }
+  }, [])
+
   const onInputChange = async (
     e: React.ChangeEvent<HTMLInputElement> | File
   ) => {
@@ -52,7 +60,16 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
 
   useDynamicTextareaSize(textareaRef, form.values.message, 300)
 
-  const { onSubmit, selectedModel, chatMode, clearChat } = useMessageOption()
+  const { onSubmit, selectedModel, chatMode, speechToTextLanguage } =
+    useMessageOption()
+
+  const { isListening, start, stop, transcript } = useSpeechRecognition()
+
+  React.useEffect(() => {
+    if (isListening) {
+      form.setFieldValue("message", transcript)
+    }
+  }, [transcript])
 
   const queryClient = useQueryClient()
 
@@ -66,35 +83,39 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
   })
 
   return (
-    <div className="p-3 md:p-6 md:bg-white dark:bg-[#262626] border rounded-t-xl border-black/10 dark:border-gray-600">
+    <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
-        <div
+        className={`h-full rounded-md shadow relative ${
-          className={`h-full rounded-md shadow relative ${
+          form.values.image.length === 0 ? "hidden" : "block"
-            form.values.image.length === 0 ? "hidden" : "block"
+        }`}>
-          }`}>
+        <div className="relative">
-          <div>
+          <Image
-            <img
+            src={form.values.image}
-              src={form.values.image}
+            alt="Uploaded Image"
-              alt="Uploaded"
+            width={180}
-              className="h-full w-auto object-cover rounded-md min-w-[50px]"
+            preview={false}
-            />
+            className="rounded-md"
-            <button
+          />
-              onClick={() => {
+          <button
-                form.setFieldValue("image", "")
+            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-600 text-black dark:text-gray-100">
+            }}
-              <XMarkIcon className="h-5 w-5" />
+            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">
-            </button>
+            <XMarkIcon className="h-5 w-5" />
-          </div>
+          </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">
-          <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>
           <form
             onSubmit={form.onSubmit(async (value) => {
               if (!selectedModel || selectedModel.length === 0) {
@@ -108,29 +129,18 @@ export const PlaygroundForm = ({ 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-600">
+            <input
-              <button
+              id="file-upload"
-                type="button"
+              name="file-upload"
-                onClick={() => {
+              type="file"
-                  inputRef.current?.click()
+              className="sr-only"
-                }}
+              ref={inputRef}
-                className={`flex ml-3 items-center justify-center dark:text-gray-100 ${
+              accept="image/*"
-                  chatMode === "rag" ? "hidden" : "block"
+              multiple={false}
-                }`}>
+              onChange={onInputChange}
-                <PhotoIcon className="h-5 w-5" />
+            />
-              </button>
+            <div className="w-full border-x border-t flex flex-col dark:border-gray-600 rounded-t-xl p-2">
-              <input
-                id="file-upload"
-                name="file-upload"
-                type="file"
-                className="sr-only"
-                ref={inputRef}
-                accept="image/*"
-                multiple={false}
-                onChange={onInputChange}
-              />
-
               <textarea
                 onKeyDown={(e) => {
                   if (e.key === "Enter" && !e.shiftKey && !isSending) {
@@ -156,26 +166,66 @@ export const PlaygroundForm = ({ 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")}
               />
-              <button
+              <div className="flex mt-4 justify-end gap-3">
-                disabled={isSending || form.values.message.length === 0}
+                <Tooltip title="Voice Message">
-                className="ml-2 flex items-center justify-center w-10 h-10  text-white bg-[#262626] rounded-xl disabled:opacity-50">
+                  <button
-                <svg
+                    type="button"
-                  xmlns="http://www.w3.org/2000/svg"
+                    onClick={() => {
-                  fill="none"
+                      if (isListening) {
-                  stroke="currentColor"
+                        stop()
-                  strokeLinecap="round"
+                      } else {
-                  strokeLinejoin="round"
+                        start({
-                  strokeWidth="2"
+                          lang: speechToTextLanguage,
-                  className="h-6 w-6"
+                          continuous: true
-                  viewBox="0 0 24 24">
+                        })
-                  <path d="M9 10L4 15 9 20"></path>
+                      }
-                  <path d="M20 4v7a4 4 0 01-4 4H4"></path>
+                    }}
-                </svg>
+                    className={`flex items-center justify-center dark:text-gray-300`}>
-              </button>
+                    {!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="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>
+              </div>
             </div>
           </form>
         </div>

src/components/Option/Playground/PlaygroundMessage.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
@@ -58,39 +59,35 @@ export const PlaygroundMessage = (props: Props) => {
                 {props.images
                   .filter((image) => image.length > 0)
                   .map((image, index) => (
-                    <div
+                    <Image
                       key={index}
-                      className="h-full rounded-md shadow relative">
+                      src={image}
-                      <img
+                      alt="Uploaded Image"
-                        src={image}
+                      width={180}
-                        alt="Uploaded"
+                      className="rounded-md relative"
-                        className="h-full w-auto object-cover rounded-md min-w-[50px]"
+                    />
-                      />
-                    </div>
                   ))}
               </div>
             )}
-
-           
           </div>
           {props.isBot && (
-              <div className="flex space-x-2">
+            <div className="flex space-x-2">
-                {!props.hideCopy && (
+              {!props.hideCopy && (
-                  <button
+                <button
-                    onClick={() => {
+                  onClick={() => {
-                      navigator.clipboard.writeText(props.message)
+                    navigator.clipboard.writeText(props.message)
-                      setIsBtnPressed(true)
+                    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">
+                  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 ? (
+                  {!isBtnPressed ? (
-                      <ClipboardIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                    <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" />
+                    <CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
-                    )}
+                  )}
-                  </button>
+                </button>
-                )}
+              )}
-              </div>
+            </div>
-            )}
+          )}
         </div>
       </div>
     </div>

src/components/Option/Settings.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 export const Settings = ({ setClose }: Props) => {
   return (
-    <div className="my-6">
+    <div className="my-6 max-h-[80vh] overflow-y-auto">
       <Tabs
         tabPosition="left"
         defaultActiveKey="1"
@@ -23,14 +23,14 @@ export const Settings = ({ setClose }: Props) => {
           {
             id: "2",
             key: "2",
-            label: "Ollama",
+            label: "Web UI Settings",
-            children: <SettingsOllama />
+            children: <SettingOther />
           },
           {
             id: "3",
             key: "3",
-            label: "Other",
+            label: "Ollama Settings",
-            children: <SettingOther />
+            children: <SettingsOllama />
           }
         ]}
       />

src/components/Option/Settings/other.tsx

@@ -2,9 +2,13 @@ import { useQueryClient } from "@tanstack/react-query"
 import { useDarkMode } from "~hooks/useDarkmode"
 import { useMessageOption } from "~hooks/useMessageOption"
 import { PageAssitDatabase } from "~libs/db"
+import { Select } from "antd"
+import { Sun, Moon } from "lucide-react"
+import { SUPPORTED_LANGUAGES } from "~utils/supporetd-languages"
 
 export const SettingOther = () => {
-  const { clearChat } = useMessageOption()
+  const { clearChat, speechToTextLanguage, setSpeechToTextLanguage } =
+    useMessageOption()
 
   const queryClient = useQueryClient()
 
@@ -13,18 +17,43 @@ export const SettingOther = () => {
   return (
     <div className="flex flex-col space-y-4">
       <div className="flex flex-row justify-between">
-        <span className="text-gray-500 dark:text-gray-400 text-lg">
+        <span className="text-gray-500 dark:text-gray-400 text-md">
+          Speech Recognition Language
+        </span>
+
+        <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)
+          }}
+        />
+      </div>
+      <div className="flex flex-row justify-between">
+        <span className="text-gray-500 dark:text-gray-400 text-md">
           Change Theme
         </span>
 
         <button
           onClick={toggleDarkMode}
-          className="bg-blue-500 dark:bg-blue-600 text-white dark:text-gray-200 px-4 py-2 rounded-md">
+          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  dark:bg-white dark:text-gray-800 disabled:opacity-50 `}>
+          {mode === "dark" ? (
+            <Sun className="w-4 h-4 mr-2" />
+          ) : (
+            <Moon className="w-4 h-4 mr-2" />
+          )}
           {mode === "dark" ? "Light" : "Dark"}
         </button>
       </div>
       <div className="flex flex-row justify-between">
-        <span className="text-gray-500 dark:text-gray-400 text-lg">
+        <span className="text-gray-500 dark:text-gray-400 text-md">
           Delete Chat History
         </span>
 

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">
-                src={form.values.image}
+          <Image
-                alt="Uploaded"
+            src={form.values.image}
-                className="h-full w-auto object-cover rounded-md min-w-[50px]"
+            alt="Uploaded Image"
-              />
+            width={180}
-              <button
+            preview={false}
-                onClick={() => {
+            className="rounded-md"
-                  form.setFieldValue("image", "")
+          />
-                }}
+          <button
-                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">
+            onClick={() => {
-                <XMarkIcon className="h-5 w-5" />
+              form.setFieldValue("image", "")
-              </button>
+            }}
-            </div>
+            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">
-          </div>
+            <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,29 +113,18 @@ 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">
+            <input
-              <button
+              id="file-upload"
-                type="button"
+              name="file-upload"
-                onClick={() => {
+              type="file"
-                  inputRef.current?.click()
+              className="sr-only"
-                }}
+              ref={inputRef}
-                className={`flex ml-3 items-center justify-center dark:text-gray-100 ${
+              accept="image/*"
-                  chatMode === "rag" ? "hidden" : "block"
+              multiple={false}
-                }`}>
+              onChange={onInputChange}
-                <PhotoIcon className="h-5 w-5" />
+            />
-              </button>
+            <div className="w-full border-x border-t flex flex-col dark:border-gray-600 rounded-t-xl p-2">
-              <input
-                id="file-upload"
-                name="file-upload"
-                type="file"
-                className="sr-only"
-                ref={inputRef}
-                accept="image/*"
-                multiple={false}
-                onChange={onInputChange}
-              />
-
               <textarea
                 onKeyDown={(e) => {
                   if (e.key === "Enter" && !e.shiftKey && !isSending) {
@@ -139,26 +150,66 @@ 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")}
               />
-              <button
+              <div className="flex mt-4 justify-end gap-3">
-                disabled={isSending || form.values.message.length === 0}
+                <Tooltip title="Voice Message">
-                className="ml-2 flex items-center justify-center w-10 h-10  text-white bg-black rounded-xl disabled:opacity-50">
+                  <button
-                <svg
+                    type="button"
-                  xmlns="http://www.w3.org/2000/svg"
+                    onClick={() => {
-                  fill="none"
+                      if (isListening) {
-                  stroke="currentColor"
+                        stop()
-                  strokeLinecap="round"
+                      } else {
-                  strokeLinejoin="round"
+                        start({
-                  strokeWidth="2"
+                          lang: speechToTextLanguage,
-                  className="h-6 w-6"
+                          continuous: true
-                  viewBox="0 0 24 24">
+                        })
-                  <path d="M9 10L4 15 9 20"></path>
+                      }
-                  <path d="M20 4v7a4 4 0 01-4 4H4"></path>
+                    }}
-                </svg>
+                    className={`flex items-center justify-center dark:text-gray-300`}>
-              </button>
+                    {!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="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>
+              </div>
             </div>
           </form>
         </div>

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/css/tailwind.css

@@ -9,4 +9,9 @@
 
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.ant-select-selection-search-input {
+  border: none !important;
+  box-shadow: none !important;
+}

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/hooks/useMessageOption.tsx

@@ -89,7 +89,9 @@ export const useMessageOption = () => {
     selectedModel,
     setSelectedModel,
     chatMode,
-    setChatMode
+    setChatMode,
+    speechToTextLanguage,
+    setSpeechToTextLanguage
   } = useStoreMessageOption()
 
   const abortControllerRef = React.useRef<AbortController | null>(null)
@@ -301,6 +303,8 @@ export const useMessageOption = () => {
     selectedModel,
     setSelectedModel,
     chatMode,
-    setChatMode
+    setChatMode,
+    speechToTextLanguage,
+    setSpeechToTextLanguage
   }
 }

src/hooks/useSpeechRecognition.tsx

@@ -0,0 +1,176 @@
+import { useRef, useEffect, useState, useCallback } from "react";
+
+type SpeechRecognitionEvent = {
+  results: SpeechRecognitionResultList;
+  resultIndex: number;
+};
+
+declare global {
+  interface SpeechRecognitionErrorEvent extends Event {
+    error: string;
+  }
+  interface Window {
+    SpeechRecognition: any;
+    webkitSpeechRecognition: any;
+  }
+}
+
+
+
+
+type SpeechRecognition = {
+  lang: string;
+  interimResults: boolean;
+  continuous: boolean;
+  maxAlternatives: number;
+  grammars: any;
+  onresult: (event: SpeechRecognitionEvent) => void;
+  onerror: (event: Event) => void;
+  onend: () => void;
+  start: () => void;
+  stop: () => void;
+};
+
+type SpeechRecognitionProps = {
+  onEnd?: () => void;
+  onResult?: (transcript: string) => void;
+  onError?: (event: Event) => void;
+};
+
+type ListenArgs = {
+  lang?: string;
+  interimResults?: boolean;
+  continuous?: boolean;
+  maxAlternatives?: number;
+  grammars?: any;
+};
+
+type SpeechRecognitionHook = {
+  start: (args?: ListenArgs) => void;
+  isListening: boolean;
+  stop: () => void;
+  supported: boolean;
+  transcript: string;
+};
+
+const useEventCallback = <T extends (...args: any[]) => any>(
+  fn: T,
+  dependencies: any[]
+) => {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = fn;
+  }, [fn, ...dependencies]);
+
+  return useCallback(
+    (...args: Parameters<T>) => {
+      const fn = ref.current;
+      return fn!(...args);
+    },
+    [ref]
+  );
+};
+
+export const useSpeechRecognition = (
+  props: SpeechRecognitionProps = {}
+): SpeechRecognitionHook => {
+  const { onEnd = () => {}, onResult = () => {}, onError = () => {} } = props;
+  const recognition = useRef<SpeechRecognition | null>(null);
+  const [listening, setListening] = useState<boolean>(false);
+  const [supported, setSupported] = useState<boolean>(false);
+  const [liveTranscript, setLiveTranscript] = useState<string>("");
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    window.SpeechRecognition =
+      window.SpeechRecognition || window.webkitSpeechRecognition;
+    console.log("window.SpeechRecognition", window.SpeechRecognition);
+    if (window.SpeechRecognition) {
+      setSupported(true);
+      recognition.current = new window.SpeechRecognition();
+    }
+  }, []);
+
+  const processResult = (event: SpeechRecognitionEvent) => {
+    const transcript = Array.from(event.results)
+      .map((result) => result[0])
+      .map((result) => result.transcript)
+      .join("");
+
+    onResult(transcript);
+  };
+
+  const handleError = (event: Event) => {
+    if ((event as SpeechRecognitionErrorEvent).error === "not-allowed") {
+      if (recognition.current) {
+        recognition.current.onend = null;
+      }
+      setListening(false);
+    }
+    onError(event);
+  };
+
+  const listen = useEventCallback(
+    (args: ListenArgs = {}) => {
+      if (listening || !supported) return;
+      const {
+        lang = "",
+        interimResults = true,
+        continuous = false,
+        maxAlternatives = 1,
+        grammars,
+      } = args;
+      setListening(true);
+      setLiveTranscript("");
+      if (recognition.current) {
+        recognition.current.lang = lang;
+        recognition.current.interimResults = interimResults;
+        recognition.current.onresult = (event) => {
+          processResult(event);
+          const transcript = Array.from(event.results)
+            .map((result) => result[0])
+            .map((result) => result.transcript)
+            .join("");
+          setLiveTranscript(transcript);
+        };
+        recognition.current.onerror = handleError;
+        recognition.current.continuous = continuous;
+        recognition.current.maxAlternatives = maxAlternatives;
+
+        if (grammars) {
+          recognition.current.grammars = grammars;
+        }
+        recognition.current.onend = () => {
+          if (recognition.current) {
+            recognition.current.start();
+          }
+        };
+        if (recognition.current) {
+          recognition.current.start();
+        }
+      }
+    },
+    [listening, supported, recognition]
+  );
+
+  const stop = useEventCallback(() => {
+    if (!listening || !supported) return;
+    if (recognition.current) {
+      recognition.current.onresult = null;
+      recognition.current.onend = null;
+      recognition.current.onerror = null;
+      setListening(false);
+      recognition.current.stop();
+    }
+    onEnd();
+  }, [listening, supported, recognition, onEnd]);
+
+  return {
+    start: listen,
+    isListening: listening,
+    stop,
+    supported,
+    transcript: liveTranscript,
+  };
+};

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 })
 }))

src/store/option.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: (language: string) => void
 }
 
 export const useStoreMessageOption = create<State>((set) => ({
@@ -52,11 +54,13 @@ export const useStoreMessageOption = create<State>((set) => ({
   setIsLoading: (isLoading) => set({ isLoading }),
   isProcessing: false,
   setIsProcessing: (isProcessing) => set({ isProcessing }),
-  defaultSpeechToTextLanguage: "en-US",
+  speechToTextLanguage: "en-US",
+  setSpeechToTextLanguage: (language) =>
+    set({ speechToTextLanguage: language }),
   selectedModel: null,
   setSelectedModel: (selectedModel) => set({ selectedModel }),
   chatMode: "normal",
   setChatMode: (chatMode) => set({ chatMode }),
   isEmbedding: false,
-  setIsEmbedding: (isEmbedding) => set({ isEmbedding }),
+  setIsEmbedding: (isEmbedding) => set({ isEmbedding })
 }))

src/utils/supporetd-languages.ts

@@ -0,0 +1,406 @@
+export const SUPPORTED_LANGUAGES = [
+  {
+    label: "Afrikaans ",
+    value: "af-ZA"
+  },
+  {
+    label: "አማርኛ",
+    value: "am-ET"
+  },
+  {
+    label: "Azərbaycanca",
+    value: "az-AZ"
+  },
+  {
+    label: "বাংলা",
+    value: "bn-BD"
+  },
+  {
+    label: "বাংলাদেশ",
+    value: "bn-IN"
+  },
+  {
+    label: "Bahasa Indonesia",
+    value: "id-ID"
+  },
+  {
+    label: "Bahasa Melayu",
+    value: "ms-MY"
+  },
+  {
+    label: "Català",
+    value: "ca-ES"
+  },
+  {
+    label: "Čeština",
+    value: "cs-CZ"
+  },
+  {
+    label: "Dansk",
+    value: "da-DK"
+  },
+  {
+    label: "Deutsch",
+    value: "de-DE"
+  },
+  {
+    label: "English (Australia)",
+    value: "en-AU"
+  },
+  {
+    label: "English (Canada)",
+    value: "en-CA"
+  },
+  {
+    label: "English (India)",
+    value: "en-IN"
+  },
+  {
+    label: "English (Kenya)",
+    value: "en-KE"
+  },
+  {
+    label: "English (Tanzania)",
+    value: "en-TZ"
+  },
+  {
+    label: "English (Ghana)",
+    value: "en-GH"
+  },
+  {
+    label: "English (New Zealand)",
+    value: "en-NZ"
+  },
+  {
+    label: "English (Nigeria)",
+    value: "en-NG"
+  },
+  {
+    label: "English (South Africa)",
+    value: "en-ZA"
+  },
+  {
+    label: "English (Philippines)",
+    value: "en-PH"
+  },
+  {
+    label: "English (United Kingdom)",
+    value: "en-GB"
+  },
+  {
+    label: "English (United States)",
+    value: "en-US"
+  },
+  {
+    label: "Español (Argentina)",
+    value: "es-AR"
+  },
+  {
+    label: "Español (Bolivia)",
+    value: "es-BO"
+  },
+  {
+    label: "Español (Chile)",
+    value: "es-CL"
+  },
+  {
+    label: "Español (Colombia)",
+    value: "es-CO"
+  },
+  {
+    label: "Español (Costa Rica)",
+    value: "es-CR"
+  },
+  {
+    label: "Español (Ecuador)",
+    value: "es-EC"
+  },
+  {
+    label: "Español (El Salvador)",
+    value: "es-SV"
+  },
+  {
+    label: "Español (España)",
+    value: "es-ES"
+  },
+  {
+    label: "Español (Estados Unidos)",
+    value: "es-US"
+  },
+  {
+    label: "Español (Guatemala)",
+    value: "es-GT"
+  },
+  {
+    label: "Español (Honduras)",
+    value: "es-HN"
+  },
+  {
+    label: "Español (México)",
+    value: "es-MX"
+  },
+  {
+    label: "Español (Nicaragua)",
+    value: "es-NI"
+  },
+  {
+    label: "Español (Panamá)",
+    value: "es-PA"
+  },
+  {
+    label: "Español (Paraguay)",
+    value: "es-PY"
+  },
+  {
+    label: "Español (Perú)",
+    value: "es-PE"
+  },
+  {
+    label: "Español (Puerto Rico)",
+    value: "es-PR"
+  },
+  {
+    label: "Español (República Dominicana)",
+    value: "es-DO"
+  },
+  {
+    label: "Español (Uruguay)",
+    value: "es-UY"
+  },
+  {
+    label: "Español (Venezuela)",
+    value: "es-VE"
+  },
+  {
+    label: "Euskara",
+    value: "eu-ES"
+  },
+  {
+    label: "Filipino",
+    value: "fil-PH"
+  },
+  {
+    label: "Français",
+    value: "fr-FR"
+  },
+  {
+    label: "Basa Jawa",
+    value: "jv-ID"
+  },
+  {
+    label: "Galego",
+    value: "gl-ES"
+  },
+  {
+    label: "ગુજરાતી",
+    value: "gu-IN"
+  },
+  {
+    label: "Hrvatski",
+    value: "hr-HR"
+  },
+  {
+    label: "IsiZulu",
+    value: "zu-ZA"
+  },
+  {
+    label: "Íslenska",
+    value: "is-IS"
+  },
+  {
+    label: "Italiano (Italia)",
+    value: "it-IT"
+  },
+  {
+    label: "Italiano (Svizzera)",
+    value: "it-CH"
+  },
+  {
+    label: "ಕನ್ನಡ",
+    value: "kn-IN"
+  },
+  {
+    label: "ភាសាខ្មែរ",
+    value: "km-KH"
+  },
+  {
+    label: "Latviešu)",
+    value: "lv-LV"
+  },
+  {
+    label: "Lietuvių",
+    value: "lt-LT"
+  },
+  {
+    label: "മലയാളം",
+    value: "ml-IN"
+  },
+  {
+    label: "मराठी ",
+    value: "mr-IN"
+  },
+  {
+    label: "Magyar",
+    value: "hu-HU"
+  },
+  {
+    label: "ລາວ",
+    value: "lo-LA"
+  },
+  {
+    label: "Nederlands",
+    value: "nl-NL"
+  },
+  {
+    label: "नेपाली भाषा",
+    value: "ne-NP"
+  },
+  {
+    label: "Norsk bokmål",
+    value: "nb-NO"
+  },
+  {
+    label: "Polski",
+    value: "pl-PL"
+  },
+  {
+    label: "Português (Brasil)",
+    value: "pt-BR"
+  },
+  {
+    label: "Português (Portugal)",
+    value: "pt-PT"
+  },
+  {
+    label: "Română",
+    value: "ro-RO"
+  },
+  {
+    label: "සිංහල",
+    value: "si-LK"
+  },
+  {
+    label: "Slovenščina",
+    value: "sl-SI"
+  },
+  {
+    label: "Basa Sunda",
+    value: "su-ID"
+  },
+  {
+    label: "Slovenčina ",
+    value: "sk-SK"
+  },
+  {
+    label: "Suomi",
+    value: "fi-FI"
+  },
+  {
+    label: "Svenska",
+    value: "sv-SE"
+  },
+  {
+    label: "Kiswahili (Tanzania)",
+    value: "sw-TZ"
+  },
+  {
+    label: "Kiswahili (Kenya)",
+    value: "sw-KE"
+  },
+  {
+    label: "ქართული ",
+    value: "ka-GE"
+  },
+  {
+    label: "Հայերեն",
+    value: "hy-AM"
+  },
+  {
+    label: "தமிழ் (இந்தியா)",
+    value: "ta-IN"
+  },
+  {
+    label: "தமிழ் (சிங்கப்பூர்)",
+    value: "ta-SG"
+  },
+  {
+    label: "தமிழ் (இலங்கை)",
+    value: "ta-LK"
+  },
+  {
+    label: "தமிழ் (மலேசியா)",
+    value: "ta-MY"
+  },
+  {
+    label: "తెలుగు",
+    value: "te-IN"
+  },
+  {
+    label: "Tiếng Việt",
+    value: "vi-VN"
+  },
+  {
+    label: "Türkçe",
+    value: "tr-TR"
+  },
+  {
+    label: "اُردُو (پاکستان)",
+    value: "ur-PK"
+  },
+  {
+    label: "اُردُو (بھارت)",
+    value: "ur-IN"
+  },
+  {
+    label: "Ελληνικά ",
+    value: "el-GR"
+  },
+  {
+    label: "български",
+    value: "bg-BG"
+  },
+  {
+    label: "Русский",
+    value: "ru-RU"
+  },
+  {
+    label: "Српски",
+    value: "sr-RS"
+  },
+  {
+    label: "Українська",
+    value: "uk-UA"
+  },
+  {
+    label: "한국어 ",
+    value: "ko-KR"
+  },
+  {
+    label: "中文 (普通话 中国大陆)",
+    value: "cmn-Hans-CN"
+  },
+  {
+    label: "中文 (普通话 香港)",
+    value: "cmn-Hans-HK"
+  },
+  {
+    label: "中文 (台灣)",
+    value: "cmn-Hant-TW"
+  },
+  {
+    label: "粵語 (香港)",
+    value: "yue-Hant-HK"
+  },
+  {
+    label: "日本語",
+    value: "ja-JP"
+  },
+  {
+    label: "हिन्दी ",
+    value: "hi-IN"
+  },
+  {
+    label: "ภาษาไทย",
+    value: "th-TH"
+  }
+]