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

Add lucide-react package and remove unused icons

Browse Source
This commit is contained in:
n4ze3m
2024-02-25 18:44:47 +05:30
parent 06b32176a9
commit 43f3727369
37 changed files with 610 additions and 574 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Common/Playground/Message.tsx
View File

@@ -1,9 +1,8 @@
import Markdown from "../../Common/Markdown"
import React from "react"
import { Image, Tooltip } from "antd"
import { ClipboardIcon } from "~icons/ClipboardIcon"
import { CheckIcon } from "~icons/CheckIcon"
import { ArrowPathIcon } from "~icons/ArrowPathIcon"
import { WebSearch } from "./WebSearch"
import { CheckIcon, ClipboardIcon } from "lucide-react"
type Props = {
message: string
@@ -17,9 +16,8 @@ type Props = {
totalMessages: number
onRengerate: () => void
isProcessing: boolean
webSearch?: {
}
webSearch?: {}
isSearchingInternet?: boolean
}
export const PlaygroundMessage = (props: Props) => {
@@ -49,6 +47,12 @@ export const PlaygroundMessage = (props: Props) => {
{props.isBot ? props.name : "You"}
</span>
{props.isBot &&
props.isSearchingInternet &&
props.currentMessageIndex === props.totalMessages - 1 ? (
<WebSearch />
) : null}
<div className="flex flex-grow flex-col">
<Markdown message={props.message} />
</div>

25
src/components/Common/Playground/WebSearch.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { useWebSearch } from "~store/web"
export const WebSearch = () => {
const {} = useWebSearch()
return (
<div className="gradient-border mt-4 flex w-56 items-center gap-4 rounded-lg bg-neutral-100 p-1ccc text-slate-900 dark:bg-neutral-800 dark:text-slate-50">
<div className="rounded p-1">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6">
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"
/>
</svg>
</div>
<div className="text-sm font-semibold">Searching Web</div>
</div>
)
}

3
src/components/Option/Playground/PlaygroundChat.tsx
View File

@@ -4,7 +4,7 @@ import { PlaygroundEmpty } from "./PlaygroundEmpty"
import { PlaygroundMessage } from "~components/Common/Playground/Message"
export const PlaygroundChat = () => {
const { messages, streaming, regenerateLastMessage } = useMessageOption()
const { messages, streaming, regenerateLastMessage, isSearchingInternet } = useMessageOption()
const divRef = React.useRef<HTMLDivElement>(null)
React.useEffect(() => {
if (divRef.current) {
@@ -30,6 +30,7 @@ export const PlaygroundChat = () => {
totalMessages={messages.length}
onRengerate={regenerateLastMessage}
isProcessing={streaming}
isSearchingInternet={isSearchingInternet}
/>
))}
{messages.length > 0 && (

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

@@ -4,14 +4,12 @@ import React from "react"
import useDynamicTextareaSize from "~hooks/useDynamicTextareaSize"
import { toBase64 } from "~libs/to-base64"
import { useMessageOption } from "~hooks/useMessageOption"
import { Checkbox, Dropdown, Tooltip } from "antd"
import { Checkbox, Dropdown, Switch, Tooltip } from "antd"
import { Image } from "antd"
import { useSpeechRecognition } from "~hooks/useSpeechRecognition"
import { MicIcon } from "~icons/MicIcon"
import { StopCircleIcon } from "~icons/StopCircleIcon"
import { PhotoIcon } from "~icons/PhotoIcon"
import { XMarkIcon } from "~icons/XMarkIcon"
import { useWebUI } from "~store/webui"
import { defaultEmbeddingModelForRag } from "~services/ollama"
import { ImageIcon, MicIcon, StopCircleIcon, X } from "lucide-react"
type Props = {
dropedFile: File | undefined
@@ -68,7 +66,9 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
chatMode,
speechToTextLanguage,
stopStreamingRequest,
streaming: isSending
streaming: isSending,
webSearch,
setWebSearch
} = useMessageOption()
const { isListening, start, stop, transcript } = useSpeechRecognition()
@@ -110,19 +110,10 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
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" />
<X 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
@@ -131,6 +122,16 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
form.setFieldError("message", "Please select a model")
return
}
if (webSearch) {
const defaultEM = await defaultEmbeddingModelForRag()
if (!defaultEM) {
form.setFieldError(
"message",
"Please set an embedding model on the Settings > Ollama page"
)
return
}
}
form.reset()
resetHeight()
await sendMessage({
@@ -167,6 +168,16 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
form.setFieldError("message", "Please select a model")
return
}
if (webSearch) {
const defaultEM = await defaultEmbeddingModelForRag()
if (!defaultEM) {
form.setFieldError(
"message",
"Please set an embedding model on the Settings > Ollama page"
)
return
}
}
form.reset()
resetHeight()
await sendMessage({
@@ -177,7 +188,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
}
}}
ref={textareaRef}
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"
className="px-2 py-2 w-full resize-none bg-transparent focus-within:outline-none focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
required
rows={1}
style={{ minHeight: "60px" }}
@@ -185,108 +196,136 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
placeholder="Type a message..."
{...form.getInputProps("message")}
/>
<div className="flex mt-4 !justify-end gap-3">
<Tooltip title="Voice Message">
<button
type="button"
onClick={() => {
if (isListening) {
stop()
} else {
start({
lang: speechToTextLanguage,
continuous: true
})
}
}}
className={`flex items-center justify-center dark:text-gray-300`}>
{!isListening ? (
<MicIcon className="h-5 w-5" />
) : (
<div className="relative">
<span className="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"></span>
<MicIcon className="h-5 w-5" />
</div>
)}
</button>
</Tooltip>
<Tooltip title="Upload Image">
<button
type="button"
onClick={() => {
inputRef.current?.click()
}}
className={`flex items-center justify-center dark:text-gray-300 ${
chatMode === "rag" ? "hidden" : "block"
}`}>
<PhotoIcon className="h-5 w-5" />
</button>
</Tooltip>
{!isSending ? (
<Dropdown.Button
htmlType="submit"
disabled={
isSending || form.values.message.trim().length === 0
}
className="!justify-end !w-auto"
icon={
<div className="mt-4 flex justify-between items-center">
<div className="flex">
<Tooltip title="Search Internet">
<div className="inline-flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-5 h-5">
className="w-5 h-5 dark:text-gray-300">
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"
/>
</svg>
}
menu={{
items: [
{
key: 1,
label: (
<Checkbox
onChange={(e) =>
setSendWhenEnter(e.target.checked)
}>
Send when Enter pressed
</Checkbox>
)
<Switch
value={webSearch}
onChange={(e) => setWebSearch(e)}
checkedChildren="On"
unCheckedChildren="Off"
/>
</div>
</Tooltip>
</div>
<div className="flex !justify-end gap-3">
<Tooltip title="Voice Message">
<button
type="button"
onClick={() => {
if (isListening) {
stop()
} else {
start({
lang: speechToTextLanguage,
continuous: true
})
}
]
}}>
<div className="inline-flex gap-2">
{sendWhenEnter ? (
}}
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"
}`}>
<ImageIcon className="h-5 w-5" />
</button>
</Tooltip>
{!isSending ? (
<Dropdown.Button
htmlType="submit"
disabled={
isSending || form.values.message.trim().length === 0
}
className="!justify-end !w-auto"
icon={
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="h-5 w-5"
viewBox="0 0 24 24">
<path d="M9 10L4 15 9 20"></path>
<path d="M20 4v7a4 4 0 01-4 4H4"></path>
className="w-5 h-5">
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
/>
</svg>
) : null}
Submit
</div>
</Dropdown.Button>
) : (
<Tooltip title="Stop Streaming">
<button
type="button"
onClick={stopStreamingRequest}
className="text-gray-800 dark:text-gray-300">
<StopCircleIcon className="h-6 w-6" />
</button>
</Tooltip>
)}
}
menu={{
items: [
{
key: 1,
label: (
<Checkbox
value={sendWhenEnter}
onChange={(e) =>
setSendWhenEnter(e.target.checked)
}>
Send when Enter pressed
</Checkbox>
)
}
]
}}>
<div className="inline-flex gap-2">
{sendWhenEnter ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="h-5 w-5"
viewBox="0 0 24 24">
<path d="M9 10L4 15 9 20"></path>
<path d="M20 4v7a4 4 0 01-4 4H4"></path>
</svg>
) : null}
Submit
</div>
</Dropdown.Button>
) : (
<Tooltip title="Stop Streaming">
<button
type="button"
onClick={stopStreamingRequest}
className="text-gray-800 dark:text-gray-300">
<StopCircleIcon className="h-6 w-6" />
</button>
</Tooltip>
)}
</div>
</div>
</div>
</form>

11
src/components/Sidepanel/Chat/form.tsx
View File

@@ -6,11 +6,9 @@ import { useMessage } from "~hooks/useMessage"
import { toBase64 } from "~libs/to-base64"
import { Checkbox, Dropdown, Image, Tooltip } from "antd"
import { useSpeechRecognition } from "~hooks/useSpeechRecognition"
import { MicIcon } from "~icons/MicIcon"
import { PhotoIcon } from "~icons/PhotoIcon"
import { XMarkIcon } from "~icons/XMarkIcon"
import { useWebUI } from "~store/webui"
import { defaultEmbeddingModelForRag } from "~services/ollama"
import { ImageIcon, MicIcon, X } from "lucide-react"
type Props = {
dropedFile: File | undefined
@@ -88,7 +86,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
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" />
<X className="h-5 w-5" />
</button>
</div>
</div>
@@ -166,7 +164,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
}
}}
ref={textareaRef}
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"
className="px-2 py-2 w-full resize-none bg-transparent focus-within:outline-none focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
required
rows={1}
style={{ minHeight: "60px" }}
@@ -208,7 +206,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
className={`flex items-center justify-center dark:text-gray-300 ${
chatMode === "rag" ? "hidden" : "block"
}`}>
<PhotoIcon className="h-5 w-5" />
<ImageIcon className="h-5 w-5" />
</button>
</Tooltip>
<Dropdown.Button
@@ -238,6 +236,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
key: 1,
label: (
<Checkbox
value={sendWhenEnter}
onChange={(e) =>
setSendWhenEnter(e.target.checked)
}>