Muhammed Nazeem
GitHub
commit
aabb650602
@ -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": {
|
||||
|
||||
@ -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
|
||||
.filter((image) => image.length > 0)
|
||||
.map((image, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="h-full rounded-md shadow relative">
|
||||
<img
|
||||
src={image}
|
||||
alt="Uploaded"
|
||||
className="h-full w-auto object-cover rounded-md min-w-[50px]"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{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>
|
||||
)}
|
||||
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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>
|
||||
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setOpen(true)}
|
||||
className="text-gray-500 dark:text-gray-400">
|
||||
<CogIcon className="w-6 h-6" />
|
||||
</button>
|
||||
<div className="flex gap-3 items-center">
|
||||
<a
|
||||
href="https://github.com/n4ze3m/page-assist"
|
||||
target="_blank"
|
||||
className="text-gray-500 dark:text-gray-400">
|
||||
<GithubIcon className="w-6 h-6" />
|
||||
</a>
|
||||
<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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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="flex-grow space-y-6 ">
|
||||
<div
|
||||
className={`h-full rounded-md shadow relative ${
|
||||
form.values.image.length === 0 ? "hidden" : "block"
|
||||
}`}>
|
||||
<div>
|
||||
<img
|
||||
src={form.values.image}
|
||||
alt="Uploaded"
|
||||
className="h-full w-auto object-cover rounded-md min-w-[50px]"
|
||||
/>
|
||||
<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-600 text-black dark:text-gray-100">
|
||||
<XMarkIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
<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={`h-full rounded-md shadow relative ${
|
||||
form.values.image.length === 0 ? "hidden" : "block"
|
||||
}`}>
|
||||
<div className="relative">
|
||||
<Image
|
||||
src={form.values.image}
|
||||
alt="Uploaded Image"
|
||||
width={180}
|
||||
preview={false}
|
||||
className="rounded-md"
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
form.setFieldValue("image", "")
|
||||
}}
|
||||
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">
|
||||
<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 ">
|
||||
<div className="flex items-center p-2 rounded-2xl border bg-gray-100 w-full dark:bg-[#262626] dark:border-gray-600">
|
||||
<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"
|
||||
type="file"
|
||||
className="sr-only"
|
||||
ref={inputRef}
|
||||
accept="image/*"
|
||||
multiple={false}
|
||||
onChange={onInputChange}
|
||||
/>
|
||||
|
||||
className="shrink-0 flex-grow flex flex-col items-center ">
|
||||
<input
|
||||
id="file-upload"
|
||||
name="file-upload"
|
||||
type="file"
|
||||
className="sr-only"
|
||||
ref={inputRef}
|
||||
accept="image/*"
|
||||
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) {
|
||||
@ -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
|
||||
disabled={isSending || form.values.message.length === 0}
|
||||
className="ml-2 flex items-center justify-center w-10 h-10 text-white bg-[#262626] rounded-xl disabled:opacity-50">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="h-6 w-6"
|
||||
viewBox="0 0 24 24">
|
||||
<path d="M9 10L4 15 9 20"></path>
|
||||
<path d="M20 4v7a4 4 0 01-4 4H4"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<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="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>
|
||||
|
||||
@ -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">
|
||||
<img
|
||||
src={image}
|
||||
alt="Uploaded"
|
||||
className="h-full w-auto object-cover rounded-md min-w-[50px]"
|
||||
/>
|
||||
</div>
|
||||
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 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>
|
||||
|
||||
@ -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",
|
||||
children: <SettingsOllama />
|
||||
label: "Web UI Settings",
|
||||
children: <SettingOther />
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
key: "3",
|
||||
label: "Other",
|
||||
children: <SettingOther />
|
||||
label: "Ollama Settings",
|
||||
children: <SettingsOllama />
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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="flex-grow space-y-6 ">
|
||||
{chatMode === "normal" && form.values.image && (
|
||||
<div className="h-full rounded-md shadow relative">
|
||||
<div>
|
||||
<img
|
||||
src={form.values.image}
|
||||
alt="Uploaded"
|
||||
className="h-full w-auto object-cover rounded-md min-w-[50px]"
|
||||
/>
|
||||
<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">
|
||||
<XMarkIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<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={`h-full rounded-md shadow relative ${
|
||||
form.values.image.length === 0 ? "hidden" : "block"
|
||||
}`}>
|
||||
<div className="relative">
|
||||
<Image
|
||||
src={form.values.image}
|
||||
alt="Uploaded Image"
|
||||
width={180}
|
||||
preview={false}
|
||||
className="rounded-md"
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
form.setFieldValue("image", "")
|
||||
}}
|
||||
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,29 +113,18 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
|
||||
message: value.message.trim()
|
||||
})
|
||||
})}
|
||||
className="shrink-0 flex-grow flex 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"
|
||||
type="file"
|
||||
className="sr-only"
|
||||
ref={inputRef}
|
||||
accept="image/*"
|
||||
multiple={false}
|
||||
onChange={onInputChange}
|
||||
/>
|
||||
|
||||
className="shrink-0 flex-grow flex flex-col items-center ">
|
||||
<input
|
||||
id="file-upload"
|
||||
name="file-upload"
|
||||
type="file"
|
||||
className="sr-only"
|
||||
ref={inputRef}
|
||||
accept="image/*"
|
||||
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,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
|
||||
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">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
className="h-6 w-6"
|
||||
viewBox="0 0 24 24">
|
||||
<path d="M9 10L4 15 9 20"></path>
|
||||
<path d="M20 4v7a4 4 0 01-4 4H4"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<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="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>
|
||||
|
||||
@ -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">
|
||||
Light Mode
|
||||
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">
|
||||
<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">
|
||||
Dark Mode
|
||||
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">
|
||||
<Moon className="h-4 w-4 mr-2" />
|
||||
Dark
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -9,4 +9,9 @@
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@tailwind utilities;
|
||||
|
||||
.ant-select-selection-search-input {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
176
src/hooks/useSpeechRecognition.tsx
Normal file
176
src/hooks/useSpeechRecognition.tsx
Normal file
@ -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,
|
||||
};
|
||||
};
|
||||
@ -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 })
|
||||
}))
|
||||
|
||||
@ -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 })
|
||||
}))
|
||||
|
||||
406
src/utils/supporetd-languages.ts
Normal file
406
src/utils/supporetd-languages.ts
Normal file
@ -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"
|
||||
}
|
||||
]
|
||||
Loading…
x
Reference in New Issue
Block a user