This commit is contained in:
zhangkai
2024-06-05 14:27:06 +08:00
commit b825dcd4d5
730 changed files with 100244 additions and 0 deletions

View File

@@ -0,0 +1,184 @@
import { useTranslation } from "react-i18next";
import {useContext, useEffect, useRef, useState} from "react";
import {useNavigate} from "react-router-dom";
import {createFileLib, getEmbeddingModel} from "../../../controllers/API";
import {alertContext} from "../../../contexts/alertContext";
import {captureAndAlertRequestErrorHoc} from "../../../controllers/request";
import {RadioGroup, RadioGroupItem} from "../../../components/ui/radio-group";
import {Label} from "../../../components/ui/label";
import Dropdown from "../../../components/dropdownComponent";
import knowledgeIcon from "../../../assets/knowledge/knowledge-icon.png";
import knowledgeActiveIcon from "../../../assets/knowledge/knowledge-active-icon.png";
import knowledgeNoIcon from "../../../assets/knowledge/knowledge-no-icon.png";
import webActiveIcon from "../../../assets/knowledge/web-active-icon.png";
import webIcon from "../../../assets/knowledge/web-icon.png";
import changeIcon from "../../../assets/knowledge/change-icon.png";
import folderIcon from "../../../assets/knowledge/folder-icon.png";
export default function CreateModal({ createType, parentId, datalist, open, setOpen, reload }) {
const { t } = useTranslation()
const navigate = useNavigate()
const nameRef = useRef(null)
const descRef = useRef(null)
const [type, setType] = useState(createType)
const [imgType, setImgType] = useState("0")
const [imgUrl, setImgUrl] = useState('')
const [modal, setModal] = useState('')
const [options, setOptions] = useState([])
// Fetch model data
useEffect(() => {
getEmbeddingModel().then(res => {
const models = res.models || []
setOptions(models)
setModal(models[0] || '')
})
}, [])
const { setErrorData } = useContext(alertContext);
const [error, setError] = useState({ name: false, desc: false })
const handleCreate = () => {
const name = nameRef.current.value
const desc = descRef.current ? descRef.current.value : ''
const errorlist = []
if (!name) errorlist.push(t(type == 1? 'lib.createFolderDesc':'lib.enterLibraryName'))
if (name.length > 30) errorlist.push(t('lib.libraryNameLimit'))
if (!modal) errorlist.push(t('lib.selectModel'))
if (datalist.find(data => data.name === name)) errorlist.push(t('lib.nameExists'))
const nameErrors = errorlist.length
if (desc.length > 200) errorlist.push(t('lib.descriptionLimit'))
setError({ name: !!nameErrors, desc: errorlist.length > nameErrors })
if (errorlist.length) return handleError(errorlist)
captureAndAlertRequestErrorHoc(createFileLib({
name,
description: desc,
model: modal,
parent_id: parentId,
type: type
}).then(res => {
// @ts-ignore
reload()
setOpen(false)
}))
}
const handleError = (list) => {
setErrorData({
title: t('prompt'),
list
});
}
function CreateKnowLedge(){
return (<dialog className={`modal bg-blur-shared ${open ? 'modal-open' : 'modal-close'}`} onClick={() => setOpen(false)}>
<form method="dialog" className="max-w-[600px] flex flex-col modal-box bg-[#fff] shadow-lg overflow-visible dialog-box" onClick={e => e.stopPropagation()}>
<h3 className="dialog-title">
<img src={knowledgeIcon} className={"dialog-title-icon"}/>
{t('lib.createOneKnowledge')}
</h3>
<div className="dialog-content">
<div className="dialog-item-title">{t("lib.knowledge")}</div>
<div className={type == 2 ? "select-item-active" : "select-item"} onClick={() => setType(2)}>
<div>
<img src={type == 2? knowledgeActiveIcon : knowledgeNoIcon } className={"dialog-title-icon"}/>
<label>{t("lib.universalKnowledgeBase")}</label>
</div>
<p>{t("lib.knowledgeDescription")}</p>
</div>
<div className={type == 3 ? "select-item-active" : "select-item"} onClick={() => setType(3)}>
<div>
<img src={type == 3? webActiveIcon : webIcon } className={"dialog-title-icon"}/>
<label>{t("lib.webSite")}</label>
</div>
<p>{t("lib.webSiteDescription")}</p>
</div>
<div className="dialog-item-title" style={{marginTop: 20}}>{t("lib.baseSet")}</div>
<div className={"setting-content"}>
<div className={"form-item"}>
{
imgType == "1" ?
<div className={"form-icon-box"}>
<span className={"knowledge-img-bg"}>
<img src={knowledgeIcon}/>
</span>
<button className={"change-button"}>
<img src={changeIcon}/>
{t("lib.change")}
</button>
</div>
:<span className={"knowledge-img-bg"}>
<img src={knowledgeIcon}/>
</span>
}
<RadioGroup defaultValue="0" className="flex gap-6 form-radio-group" onValueChange={(val) => setImgType(val)}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="0" id="r1" />
<Label htmlFor="r1">{t('lib.default')}</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="1" id="r2" />
<Label htmlFor="r2">{t('lib.localUpload')}</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="2" id="r3" />
<Label htmlFor="r3">{t('lib.aIGeneration')}</Label>
</div>
</RadioGroup>
</div>
<div className={"form-item"}>
<label className="form-title">{t('lib.name')}</label>
<input id="name" ref={nameRef} placeholder={t('lib.giveAName')} className={"form-input"} />
</div>
<div className={"form-item"}>
<label className="form-title">{t('lib.description')}</label>
<input id="desc" ref={descRef} placeholder={t('lib.describe')} className={"form-input"} />
</div>
<div className={"form-item"}>
<label className="form-title">{t('lib.useModel')}</label>
<div className={"form-dropdown"}>
<Dropdown
options={options}
onSelect={(val) => setModal(val)}
value={modal}
></Dropdown>
</div>
</div>
</div>
<div className={"button-box"}>
<button className={"cancel-button"} onClick={() => setOpen(false)}>{t("lib.cancel")}</button>
<button className={"confirm-button"} onClick={handleCreate}>{t("lib.confirmCreation")}</button>
</div>
</div>
</form>
</dialog>
)
}
function CreateFolder(){
return (<dialog className={`modal ${open && 'modal-open'}`}>
<form method="dialog" className="modal-box w-[360px] bg-[#fff] shadow-lg dialog-box">
<h3 className="tip-title tip-title-left"><img src={folderIcon} className={"tip-title-icon"}/>{t('lib.createFolder')}</h3>
<input id="name" ref={nameRef} placeholder={t('lib.createFolderDesc')} className={'tip-input'}/>
<div className={"button-box"}>
<button className={"cancel-button tip-button"} onClick={() => setOpen(false)}>{t("cancel")}</button>
<button className={"confirm-button tip-button tip-button-margin"} onClick={handleCreate}>{t("confirmButton")}</button>
</div>
</form>
</dialog>)
}
return (
<div>
{
type == 1? <CreateFolder /> : <CreateKnowLedge />
}
</div>
);
}

View File

@@ -0,0 +1,90 @@
import { useTranslation } from "react-i18next";
import {useContext, useEffect, useRef, useState} from "react";
import {useNavigate} from "react-router-dom";
import {readFileLibDatabase, updateFileLib} from "../../../controllers/API";
import {alertContext} from "../../../contexts/alertContext";
import {captureAndAlertRequestErrorHoc} from "../../../controllers/request";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger
} from "../../../components/ui/dropdown-menu";
import {useTable} from "../../../util/hook";
import moveIcon from "../../../assets/knowledge/move-icon.png";
import folderIcon from "../../../assets/knowledge/folder-icon.png";
import noFolderIcon from "../../../assets/knowledge/no-folder-icon.png";
export default function MoveModal({ data, open, setOpen, reload }) {
const { t } = useTranslation()
const navigate = useNavigate()
const [parentId, setParentId] = useState("")
const { setErrorData } = useContext(alertContext);
const [error, setError] = useState({ name: false })
const handleMove = () => {
const errorlist = []
if (!parentId) errorlist.push(t('lib.selectFold'))
if (errorlist.length) return handleError(errorlist)
captureAndAlertRequestErrorHoc(updateFileLib({
id: data.id,
name: data.name,
parent_id: parentId
}).then(res => {
reload()
setOpen(false)
}))
}
const { page, pageSize, data: datalist, total, loading, setPage, search} = useTable((param) =>
readFileLibDatabase(param.page, 10000, param.keyword, '', '1')
)
const handleError = (list) => {
setErrorData({
title: t('prompt'),
list
});
}
return (
<dialog className={`modal ${open && 'modal-open'}`}>
<form method="dialog" className="modal-box w-[850px] bg-[#fff] shadow-lg dialog-box">
<button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-4" onClick={() => setOpen(false)}></button>
<h3 className="tip-title tip-title-left"><img src={moveIcon} className={"tip-title-icon"}/>{t('lib.myKnowledge')}</h3>
{
datalist.length > 0 ?
<div className={"folder-list third-list"}>
{datalist.map((el) => (
el.id != data.id ?
<div className={parentId == el.id ? "folder-item third-item folder-item-active" : "folder-item third-item"} key={el.id}>
<div className={"folder-content-item"} onClick={() =>setParentId(el.id)}>
<div className={"folder-header"}>
<span className={"knowledge-img-bg"}>
<img src={folderIcon}/>
</span>
<label>{el.name}</label>
</div>
<div className={"folder-description"}>
{el.type == 1 ? t("lib.foldDesc") :el.description}
</div>
<div className={"folder-type"}>{el.type == 1?t('lib.folder'):el.type == 2?t('lib.universalKnowledgeBase'):t('lib.webSite')}</div>
</div>
</div>
: ""
))}
</div>
:
<div className={"no-folder"}>
<img src={noFolderIcon}/>
<p>{t('lib.noFold')}</p>
</div>
}
<div className={"right-button-box"}>
<button className={"yellow-button"} onClick={handleMove}>{t("confirmButton")}</button>
</div>
</form>
</dialog>
);
}

View File

@@ -0,0 +1,61 @@
import { useTranslation } from "react-i18next";
import {useContext, useEffect, useRef, useState} from "react";
import {useNavigate} from "react-router-dom";
import {updateFileLib} from "../../../controllers/API";
import {alertContext} from "../../../contexts/alertContext";
import {captureAndAlertRequestErrorHoc} from "../../../controllers/request";
import writeIcon from "../../../assets/knowledge/write-icon.png";
export default function CreateModal({ data, open, setOpen, reload }) {
const { t } = useTranslation()
const navigate = useNavigate()
const [nameValue, setNameValue] = useState(data.name)
useEffect(() => {
setNameValue(data.name);
}, [data.name]);
const nameRef = useRef(data.name)
const { setErrorData } = useContext(alertContext);
const [error, setError] = useState({ name: false })
const handleRename = () => {
const name = nameValue
const errorlist = []
if (!name) errorlist.push(t('lib.enterLibraryName'))
const nameErrors = errorlist.length
setError({ name: !!nameErrors})
if (errorlist.length) return handleError(errorlist)
captureAndAlertRequestErrorHoc(updateFileLib({
id: data.id,
name: name,
parent_id: data.parent_id
}).then(res => {
reload()
setOpen(false)
}))
}
const handleError = (list) => {
setErrorData({
title: t('prompt'),
list
});
}
return (
<dialog className={`modal ${open && 'modal-open'}`}>
<form method="dialog" className="modal-box w-[360px] bg-[#fff] shadow-lg dialog-box">
<h3 className="tip-title tip-title-left"><img src={writeIcon} className={"tip-title-icon"}/>{t('lib.rename')}</h3>
<input id="name" value={nameValue}
onChange={event => setNameValue(event.target.value)} placeholder={t('lib.createFolderDesc')} className={'tip-input'}/>
<div className={"button-box"}>
<button className={"cancel-button tip-button"} onClick={() => setOpen(false)}>{t("cancel")}</button>
<button className={"confirm-button tip-button tip-button-margin"} onClick={handleRename}>{t("confirmButton")}</button>
</div>
</form>
</dialog>
);
}