iod/page-assist
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new changes

Browse Source
This commit is contained in:
n4ze3m
2024-02-15 00:26:13 +05:30
parent 31cac3b5b7
commit 31730cad81
12 changed files with 711 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Common/SaveButton.tsx
View File

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

16
src/components/Option/Layout.tsx
View File

@@ -65,7 +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,19 +79,29 @@ export default function OptionLayout({
</button>
</div>
<div>
<button 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 ">
<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

6
src/components/Option/Playground/PlaygroundEmpty.tsx
View File

@@ -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>

35
src/components/Option/Playground/PlaygroundForm.tsx
View File

@@ -7,8 +7,9 @@ import XMarkIcon from "@heroicons/react/24/outline/XMarkIcon"
import { toBase64 } from "~libs/to-base64"
import { useMessageOption } from "~hooks/useMessageOption"
import { Tooltip } from "antd"
import { MicIcon } from "lucide-react"
import { MicIcon, MicOffIcon } from "lucide-react"
import { Image } from "antd"
import { useSpeechRecognition } from "~hooks/useSpeechRecognition"
type Props = {
dropedFile: File | undefined
@@ -59,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()
@@ -74,7 +84,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
return (
<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
<div
className={`h-full rounded-md shadow relative ${
form.values.image.length === 0 ? "hidden" : "block"
}`}>
@@ -165,8 +175,25 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
<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`}>
<MicIcon className="h-5 w-5" />
{!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">

52
src/components/Option/Playground/PlaygroundMessage.tsx
View File

@@ -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,34 @@ export const PlaygroundMessage = (props: Props) => {
{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>
<Image
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>

10
src/components/Option/Settings.tsx
View File

@@ -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 />
}
]}
/>

37
src/components/Option/Settings/other.tsx
View File

@@ -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>