1
This commit is contained in:
184
src/pages/Knowledge/components/createModel.tsx
Normal file
184
src/pages/Knowledge/components/createModel.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
90
src/pages/Knowledge/components/moveModel.tsx
Normal file
90
src/pages/Knowledge/components/moveModel.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
61
src/pages/Knowledge/components/renameModel.tsx
Normal file
61
src/pages/Knowledge/components/renameModel.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user