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

Update useMessageOption hook and Playground component

Browse Source
This commit is contained in:
n4ze3m 2024-04-05 23:17:55 +05:30
parent b86332f9ec
commit aae2ddecbc
11 changed files with 262 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Icons/CSVIcon.tsx Normal file
View File

@ -0,0 +1,44 @@
import React from "react"
export const CSVIcon = React.forwardRef<
SVGSVGElement,
React.SVGProps<SVGSVGElement>
>((props, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 303.188 303.188"
xmlSpace="preserve"
ref={ref}
{...props}>
<path
fill="#E4E4E4"
d="M219.821 0L32.842 0 32.842 303.188 270.346 303.188 270.346 50.525z"></path>
<path
fill="#007934"
d="M227.64 25.263L32.842 25.263 32.842 0 219.821 0z"></path>
<g fill="#A4A9AD">
<path d="M114.872 227.984c-2.982 0-5.311 1.223-6.982 3.666-1.671 2.444-2.507 5.814-2.507 10.109 0 8.929 3.396 13.393 10.188 13.393 2.052 0 4.041-.285 5.967-.856a59.8 59.8 0 005.808-2.063v10.601c-3.872 1.713-8.252 2.57-13.14 2.57-7.004 0-12.373-2.031-16.107-6.094-3.734-4.062-5.602-9.934-5.602-17.615 0-4.803.904-9.023 2.714-12.663 1.809-3.64 4.411-6.438 7.808-8.395 3.396-1.957 7.39-2.937 11.98-2.937 5.016 0 9.808 1.09 14.378 3.27l-3.841 9.871a42.982 42.982 0 00-5.141-2.031c-1.714-.55-3.554-.826-5.523-.826zM166.732 250.678c0 2.878-.729 5.433-2.191 7.665-1.459 2.232-3.565 3.967-6.315 5.205-2.751 1.237-5.977 1.856-9.681 1.856-3.089 0-5.681-.217-7.775-.65-2.095-.434-4.274-1.191-6.538-2.27v-11.172a37.254 37.254 0 007.458 2.872c2.582.689 4.951 1.032 7.109 1.032 1.862 0 3.227-.322 4.095-.969.867-.645 1.302-1.476 1.302-2.491 0-.635-.175-1.19-.524-1.666-.349-.477-.91-.958-1.682-1.444-.772-.486-2.83-1.48-6.173-2.983-3.026-1.375-5.296-2.708-6.809-3.999s-2.634-2.771-3.364-4.443-1.095-3.65-1.095-5.936c0-4.273 1.555-7.605 4.666-9.997 3.109-2.391 7.384-3.587 12.822-3.587 4.803 0 9.7 1.111 14.694 3.333l-3.841 9.681c-4.337-1.989-8.082-2.984-11.234-2.984-1.63 0-2.814.286-3.555.857s-1.111 1.28-1.111 2.127c0 .91.471 1.725 1.412 2.443.941.72 3.496 2.031 7.665 3.936 3.999 1.799 6.776 3.729 8.331 5.792 1.557 2.063 2.334 4.661 2.334 7.792zM199.964 218.368h14.027l-15.202 46.401H184.03l-15.139-46.401h14.092l6.316 23.519c1.312 5.227 2.031 8.865 2.158 10.918.148-1.481.443-3.333.889-5.555.443-2.222.835-3.967 1.174-5.236l6.444-23.646z"></path>
</g>
<path fill="#D1D3D3" d="M219.821 50.525L270.346 50.525 219.821 0z"></path>
<path fill="#007934" d="M134.957 80.344H168.231V95.762H134.957z"></path>
<path fill="#007934" d="M175.602 80.344H208.875V95.762H175.602z"></path>
<path fill="#007934" d="M134.957 102.661H168.231V118.08H134.957z"></path>
<path fill="#007934" d="M175.602 102.661H208.875V118.08H175.602z"></path>
<path fill="#007934" d="M134.957 124.979H168.231V140.397H134.957z"></path>
<path fill="#007934" d="M175.602 124.979H208.875V140.397H175.602z"></path>
<path
fill="#007934"
d="M94.312 124.979H127.58500000000001V140.397H94.312z"></path>
<path fill="#007934" d="M134.957 147.298H168.231V162.716H134.957z"></path>
<path fill="#007934" d="M175.602 147.298H208.875V162.716H175.602z"></path>
<path
fill="#007934"
d="M94.312 147.298H127.58500000000001V162.716H94.312z"></path>
<path
fill="#007934"
d="M127.088 116.162h-10.04l-6.262-10.041-6.196 10.041h-9.821l10.656-16.435L95.406 84.04h9.624l5.8 9.932 5.581-9.932h9.909l-10.173 16.369 10.941 15.753z"></path>
</svg>
)
})

30
src/components/Icons/PDFIcon.tsx Normal file
View File

@ -0,0 +1,30 @@
import React from "react"
export const PDFIcon = React.forwardRef<
SVGSVGElement,
React.SVGProps<SVGSVGElement>
>((props, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 303.188 303.188"
xmlSpace="preserve"
ref={ref}
{...props}>
<path
fill="#E8E8E8"
d="M219.821 0L32.842 0 32.842 303.188 270.346 303.188 270.346 50.525z"></path>
<path
fill="#FB3449"
d="M230.013 149.935c-3.643-6.493-16.231-8.533-22.006-9.451-4.552-.724-9.199-.94-13.803-.936-3.615-.024-7.177.154-10.693.354-1.296.087-2.579.199-3.861.31a93.594 93.594 0 01-3.813-4.202c-7.82-9.257-14.134-19.755-19.279-30.664 1.366-5.271 2.459-10.772 3.119-16.485 1.205-10.427 1.619-22.31-2.288-32.251-1.349-3.431-4.946-7.608-9.096-5.528-4.771 2.392-6.113 9.169-6.502 13.973-.313 3.883-.094 7.776.558 11.594.664 3.844 1.733 7.494 2.897 11.139a165.324 165.324 0 003.588 9.943 171.593 171.593 0 01-2.63 7.603c-2.152 5.643-4.479 11.004-6.717 16.161l-3.465 7.507c-3.576 7.855-7.458 15.566-11.815 23.02-10.163 3.585-19.283 7.741-26.857 12.625-4.063 2.625-7.652 5.476-10.641 8.603-2.822 2.952-5.69 6.783-5.941 11.024-.141 2.394.807 4.717 2.768 6.137 2.697 2.015 6.271 1.881 9.4 1.225 10.25-2.15 18.121-10.961 24.824-18.387 4.617-5.115 9.872-11.61 15.369-19.465l.037-.054c9.428-2.923 19.689-5.391 30.579-7.205 4.975-.825 10.082-1.5 15.291-1.974 3.663 3.431 7.621 6.555 11.939 9.164 3.363 2.069 6.94 3.816 10.684 5.119 3.786 1.237 7.595 2.247 11.528 2.886 1.986.284 4.017.413 6.092.335 4.631-.175 11.278-1.951 11.714-7.57.134-1.72-.237-3.228-.98-4.55zm-110.869 10.31a170.827 170.827 0 01-6.232 9.041c-4.827 6.568-10.34 14.369-18.322 17.286-1.516.554-3.512 1.126-5.616 1.002-1.874-.11-3.722-.937-3.637-3.065.042-1.114.587-2.535 1.423-3.931.915-1.531 2.048-2.935 3.275-4.226 2.629-2.762 5.953-5.439 9.777-7.918 5.865-3.805 12.867-7.23 20.672-10.286-.449.71-.897 1.416-1.34 2.097zm27.222-84.26a38.169 38.169 0 01-.323-10.503 24.858 24.858 0 011.038-4.952c.428-1.33 1.352-4.576 2.826-4.993 2.43-.688 3.177 4.529 3.452 6.005 1.566 8.396.186 17.733-1.693 25.969-.299 1.31-.632 2.599-.973 3.883a121.219 121.219 0 01-1.648-4.821c-1.1-3.525-2.106-7.091-2.679-10.588zm16.683 66.28a236.508 236.508 0 00-25.979 5.708c.983-.275 5.475-8.788 6.477-10.555 4.721-8.315 8.583-17.042 11.358-26.197 4.9 9.691 10.847 18.962 18.153 27.214.673.749 1.357 1.489 2.053 2.22-4.094.441-8.123.978-12.062 1.61zm61.744 11.694c-.334 1.805-4.189 2.837-5.988 3.121-5.316.836-10.94.167-16.028-1.542-3.491-1.172-6.858-2.768-10.057-4.688-3.18-1.921-6.155-4.181-8.936-6.673 3.429-.206 6.9-.341 10.388-.275 3.488.035 7.003.211 10.475.664 6.511.726 13.807 2.961 18.932 7.186 1.009.833 1.331 1.569 1.214 2.207z"></path>
<path
fill="#FB3449"
d="M227.64 25.263L32.842 25.263 32.842 0 219.821 0z"></path>
<g fill="#A4A9AD">
<path d="M126.841 241.152c0 5.361-1.58 9.501-4.742 12.421-3.162 2.921-7.652 4.381-13.472 4.381h-3.643v15.917H92.022v-47.979h16.606c6.06 0 10.611 1.324 13.652 3.971 3.041 2.647 4.561 6.41 4.561 11.289zm-21.856 6.235h2.363c1.947 0 3.495-.546 4.644-1.641 1.149-1.094 1.723-2.604 1.723-4.529 0-3.238-1.794-4.857-5.382-4.857h-3.348v11.027zM175.215 248.864c0 8.007-2.205 14.177-6.613 18.509s-10.606 6.498-18.591 6.498h-15.523v-47.979h16.606c7.701 0 13.646 1.969 17.836 5.907 4.189 3.938 6.285 9.627 6.285 17.065zm-13.455.46c0-4.398-.87-7.657-2.609-9.78-1.739-2.122-4.381-3.183-7.926-3.183h-3.773v26.877h2.888c3.939 0 6.826-1.143 8.664-3.43 1.837-2.285 2.756-5.78 2.756-10.484zM196.579 273.871h-12.766v-47.979h28.355v10.403h-15.589v9.156h14.374v10.403h-14.374v18.017z"></path>
</g>
<path fill="#D1D3D3" d="M219.821 50.525L270.346 50.525 219.821 0z"></path>
</svg>
)
})

32
src/components/Icons/TXTIcon.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from "react"
export const TXTIcon = React.forwardRef<
SVGSVGElement,
React.SVGProps<SVGSVGElement>
>((props, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="-4 0 64 64"
ref={ref}
{...props}>
<path
fill="#F9CA06"
fillRule="evenodd"
d="M5.151-.036A5.074 5.074 0 00.077 5.038v53.841a5.073 5.073 0 005.074 5.074h45.774a5.074 5.074 0 005.074-5.074V20.274L37.097-.036H5.151z"
clipRule="evenodd"></path>
<g fillRule="evenodd" clipRule="evenodd">
<path
fill="#F7BC04"
d="M56.008 20.316v1H43.209s-6.312-1.26-6.129-6.708c0 0 .208 5.708 6.004 5.708h12.924z"></path>
<path
fill="#fff"
d="M37.106-.036v14.561c0 1.656 1.104 5.792 6.104 5.792h12.799L37.106-.036z"
opacity="0.5"></path>
</g>
<path
fill="#fff"
d="M18.763 43.045h-3.277v10.047a.734.734 0 01-.756.738.73.73 0 01-.738-.738V43.045h-3.259c-.36 0-.648-.288-.648-.684 0-.36.288-.648.648-.648h8.03c.36 0 .648.288.648.685a.645.645 0 01-.648.647zm11.7 10.803a.64.64 0 01-.541-.27l-3.727-4.97-3.745 4.97a.639.639 0 01-.54.27.71.71 0 01-.72-.72c0-.144.036-.306.144-.432l3.889-5.131-3.619-4.826a.721.721 0 01-.144-.414c0-.343.288-.721.72-.721.216 0 .432.108.576.288l3.439 4.627 3.439-4.646a.642.642 0 01.541-.27c.378 0 .738.306.738.721a.7.7 0 01-.126.414l-3.619 4.808 3.89 5.149c.09.126.126.27.126.415a.739.739 0 01-.721.738zm11.195-10.803h-3.277v10.047a.734.734 0 01-.756.738.73.73 0 01-.738-.738V43.045h-3.259c-.36 0-.648-.288-.648-.684 0-.36.288-.648.648-.648h8.03c.36 0 .648.288.648.685a.644.644 0 01-.648.647z"></path>
</svg>
)
})

18
src/components/Option/Knowledge/KnowledgeIcon.tsx Normal file
View File

@ -0,0 +1,18 @@
import { CSVIcon } from "@/components/Icons/CSVIcon"
import { PDFIcon } from "@/components/Icons/PDFIcon"
import { TXTIcon } from "@/components/Icons/TXTIcon"
type Props = {
type: string
className?: string
}
export const KnowledgeIcon = ({ type, className = "w-6 h-6" }: Props) => {
if (type === "pdf" || type === "application/pdf") {
return <PDFIcon className={className} />
} else if (type === "csv" || type === "text/csv") {
return <CSVIcon className={className} />
} else if (type === "txt" || type === "text/plain") {
return <TXTIcon className={className} />
}
}

15
src/components/Option/Knowledge/KnowledgeSelect.tsx
View File

@ -1,4 +1,5 @@
import { getAllKnowledge } from "@/db/knowledge"
import { useMessageOption } from "@/hooks/useMessageOption"
import { useQuery } from "@tanstack/react-query"
import { Dropdown, Tooltip } from "antd"
import { Blocks } from "lucide-react"
@ -7,6 +8,7 @@ import { useTranslation } from "react-i18next"
export const KnowledgeSelect: React.FC = () => {
const { t } = useTranslation("playground")
const { setSelectedKnowledge, selectedKnowledge } = useMessageOption()
const { data } = useQuery({
queryKey: ["getAllKnowledge"],
queryFn: async () => {
@ -30,14 +32,21 @@ export const KnowledgeSelect: React.FC = () => {
{d.title}
</div>
),
onClick: () => {}
onClick: () => {
const knowledge = data?.find((k) => k.id === d.id)
if (selectedKnowledge?.id === d.id) {
setSelectedKnowledge(null)
} else {
setSelectedKnowledge(knowledge)
}
}
})) || [],
style: {
maxHeight: 500,
overflowY: "scroll"
},
// hidescrollbars: true
className: "no-scrollbar"
className: "no-scrollbar",
activeKey: selectedKnowledge?.id
}}
placement={"topLeft"}
trigger={["click"]}>

39
src/components/Option/Knowledge/SelectedKnwledge.tsx Normal file
View File

@ -0,0 +1,39 @@
import { Knowledge } from "@/db/knowledge"
import { XIcon } from "lucide-react"
import { KnowledgeIcon } from "./KnowledgeIcon"
type Props = {
knowledge: Knowledge
onClose: () => void
}
export const SelectedKnowledge = ({ knowledge, onClose }: Props) => {
return (
<div className="mb-3 border flex justify-between items-center rounded-md p-2 dark:border-gray-600">
<div className="flex flex-col gap-2">
<div>
<h3 className="text-lg font-semibold dark:text-gray-100">
{knowledge.title}
</h3>
</div>
<div className="flex flex-row overflow-x-auto gap-2 w-full">
{knowledge.source.map((source, index) => (
<div
key={index}
className="inline-flex gap-2 border rounded-md p-1 dark:border-gray-600 dark:text-gray-100">
<KnowledgeIcon type={source.type} className="w-4 h-4" />
{source.filename}
</div>
))}
</div>
</div>
<div>
<button
onClick={onClose}
className="flex items-center justify-center bg-white dark:bg-[#262626] p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-600 text-black dark:text-gray-100">
<XIcon className="h-5 w-5" />
</button>
</div>
</div>
)
}

20
src/components/Option/Knowledge/index.tsx
View File

@ -1,19 +1,21 @@
import { useState } from "react"
import { useTranslation } from "react-i18next"
import { AddKnowledge } from "./AddKnowledge"
import {
useMutation,
useQuery,
useQueryClient
} from "@tanstack/react-query"
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import { deleteKnowledge, getAllKnowledge } from "@/db/knowledge"
import { Skeleton, Table, Tag, Tooltip, message } from "antd"
import { Trash2 } from "lucide-react"
import { KnowledgeIcon } from "./KnowledgeIcon"
import { useMessageOption } from "@/hooks/useMessageOption"
export const KnowledgeSettings = () => {
const { t } = useTranslation(["knownledge", "common"])
const [open, setOpen] = useState(false)
const queryClient = useQueryClient()
const {
selectedKnowledge,
setSelectedKnowledge
} = useMessageOption()
const { data, status } = useQuery({
queryKey: ["fetchAllKnowledge"],
@ -91,6 +93,9 @@ export const KnowledgeSettings = () => {
onClick={() => {
if (window.confirm(t("confirm.delete"))) {
deleteKnowledgeMutation(record.id)
if(selectedKnowledge.id === record.id) {
setSelectedKnowledge(null)
}
}
}}
className="text-red-500 dark:text-red-400">
@ -110,11 +115,6 @@ export const KnowledgeSettings = () => {
title: t("expandedColumns.name"),
key: "filename",
dataIndex: "filename"
},
{
title: t("expandedColumns.type"),
key: "type",
dataIndex: "type"
}
]}
dataSource={record.source}

8
src/components/Option/Playground/Playground.tsx
View File

@ -1,15 +1,21 @@
import React from "react"
import { PlaygroundForm } from "./PlaygroundForm"
import { PlaygroundChat } from "./PlaygroundChat"
import { useMessageOption } from "@/hooks/useMessageOption"
export const Playground = () => {
const drop = React.useRef<HTMLDivElement>(null)
const [dropedFile, setDropedFile] = React.useState<File | undefined>()
const { selectedKnowledge } = useMessageOption()
const [dropState, setDropState] = React.useState<
"idle" | "dragging" | "error"
>("idle")
React.useEffect(() => {
if (selectedKnowledge) {
return
}
if (!drop.current) {
return
}
@ -64,7 +70,7 @@ export const Playground = () => {
drop.current.removeEventListener("dragleave", handleDragLeave)
}
}
}, [])
}, [selectedKnowledge])
return (
<div
ref={drop}

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

@ -13,6 +13,7 @@ import { ImageIcon, MicIcon, StopCircleIcon, X } from "lucide-react"
import { getVariable } from "~/utils/select-varaible"
import { useTranslation } from "react-i18next"
import { KnowledgeSelect } from "../Knowledge/KnowledgeSelect"
import { SelectedKnowledge } from "../Knowledge/SelectedKnwledge"
type Props = {
dropedFile: File | undefined
@ -33,7 +34,9 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
setWebSearch,
selectedQuickPrompt,
textareaRef,
setSelectedQuickPrompt
setSelectedQuickPrompt,
selectedKnowledge,
setSelectedKnowledge
} = useMessageOption()
const textAreaFocus = () => {
@ -155,6 +158,14 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
}
return (
<div className="px-3 pt-3 md:px-6 md:pt-6 bg-gray-50 dark:bg-[#262626] border rounded-t-xl dark:border-gray-600">
{selectedKnowledge && (
<SelectedKnowledge
onClose={() => {
setSelectedKnowledge(null)
}}
knowledge={selectedKnowledge}
/>
)}
<div
className={`h-full rounded-md shadow relative ${
form.values.image.length === 0 ? "hidden" : "block"
@ -225,6 +236,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
/>
<div className="mt-4 flex justify-between items-center">
<div className="flex">
{!selectedKnowledge && (
<Tooltip title={t("tooltip.searchInternet")}>
<div className="inline-flex items-center gap-2">
<svg
@ -248,6 +260,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
/>
</div>
</Tooltip>
)}
</div>
<div className="flex !justify-end gap-3">
<KnowledgeSelect />
@ -276,6 +289,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
</button>
</Tooltip>
{!selectedKnowledge && (
<Tooltip title={t("tooltip.uploadImage")}>
<button
type="button"
@ -288,6 +302,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
<ImageIcon className="h-5 w-5" />
</button>
</Tooltip>
)}
{!isSending ? (
<Dropdown.Button
htmlType="submit"

10
src/hooks/useMessageOption.tsx
View File

@ -29,7 +29,7 @@ export const useMessageOption = () => {
controller: abortController,
setController: setAbortController,
messages,
setMessages
setMessages,
} = usePageAssist()
const {
history,
@ -56,7 +56,9 @@ export const useMessageOption = () => {
selectedQuickPrompt,
setSelectedQuickPrompt,
selectedSystemPrompt,
setSelectedSystemPrompt
setSelectedSystemPrompt,
selectedKnowledge,
setSelectedKnowledge
} = useStoreMessageOption()
const { t } = useTranslation("option")
@ -664,6 +666,8 @@ export const useMessageOption = () => {
setSelectedQuickPrompt,
selectedSystemPrompt,
setSelectedSystemPrompt,
textareaRef
textareaRef,
selectedKnowledge,
setSelectedKnowledge
}
}

18
src/store/option.tsx
View File

@ -1,3 +1,4 @@
import { Knowledge } from "@/db/knowledge"
import { create } from "zustand"
type WebSearch = {
@ -48,16 +49,19 @@ type State = {
setIsEmbedding: (isEmbedding: boolean) => void
speechToTextLanguage: string
setSpeechToTextLanguage: (language: string) => void
webSearch: boolean;
setWebSearch: (webSearch: boolean) => void;
isSearchingInternet: boolean;
setIsSearchingInternet: (isSearchingInternet: boolean) => void;
webSearch: boolean
setWebSearch: (webSearch: boolean) => void
isSearchingInternet: boolean
setIsSearchingInternet: (isSearchingInternet: boolean) => void
selectedSystemPrompt: string | null
setSelectedSystemPrompt: (selectedSystemPrompt: string) => void
selectedQuickPrompt: string | null
setSelectedQuickPrompt: (selectedQuickPrompt: string) => void
selectedKnowledge: Knowledge | null
setSelectedKnowledge: (selectedKnowledge: Knowledge) => void
}
export const useStoreMessageOption = create<State>((set) => ({
@ -89,7 +93,11 @@ export const useStoreMessageOption = create<State>((set) => ({
isSearchingInternet: false,
setIsSearchingInternet: (isSearchingInternet) => set({ isSearchingInternet }),
selectedSystemPrompt: null,
setSelectedSystemPrompt: (selectedSystemPrompt) => set({ selectedSystemPrompt }),
setSelectedSystemPrompt: (selectedSystemPrompt) =>
set({ selectedSystemPrompt }),
selectedQuickPrompt: null,
setSelectedQuickPrompt: (selectedQuickPrompt) => set({ selectedQuickPrompt }),
selectedKnowledge: null,
setSelectedKnowledge: (selectedKnowledge) => set({ selectedKnowledge })
}))