Skip to content

Commit

Permalink
refactor(ui): bot card transition css & knowledge chunks (#232)
Browse files Browse the repository at this point in the history 
1.  bot card transition css 

2. user can check the knowledge chunk once a task is done
  • Loading branch information
@ch-liuzhide
ch-liuzhide authored Aug 20, 2024
2 parents 5795f61 + 65ce75a commit 3d4f078
Show file tree
Hide file tree
Showing 9 changed files with 334 additions and 260 deletions.
291 changes: 147 additions & 144 deletions client/app/factory/edit/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { useBot } from '@/app/contexts/BotContext';
import 'react-toastify/dist/ReactToastify.css';
import Knowledge from '../components/Knowledge';
import KnowledgeBtn from '../components/KnowledgeBtn';
import { BotTaskProvider } from '../components/TaskContext';

const API_HOST = process.env.NEXT_PUBLIC_API_DOMAIN;
enum VisibleTypeEnum {
Expand Down Expand Up @@ -279,163 +280,165 @@ export default function Edit({ params }: { params: { id: string } }) {
);

return (
<div className="flex h-screen w-full flex-col items-center bg-white">
<ToastContainer />
{visibleType === VisibleTypeEnum.BOT_CONFIG ? (
<div className="relative flex w-full grow overflow-hidden">
<div className="flex w-full justify-center md:w-1/2">
<div className="h-full grow">
<div className="relative flex h-[72px] w-full items-center justify-between gap-2 border-[0.5px] border-gray-200 px-6 flex-shrink-0">
<div className="flex items-center gap-2">
<a
className="text-slate-500 hover:text-blue-600 flex items-center gap-2"
href="/factory/list"
>
<BackIcon />
</a>
<BotTaskProvider>
<div className="flex h-full w-full flex-col items-center bg-white">
<ToastContainer />
{visibleType === VisibleTypeEnum.BOT_CONFIG ? (
<div className="relative flex w-full grow overflow-hidden">
<div className="flex w-full justify-center md:w-1/2">
<div className="h-full grow">
<div className="relative flex h-[72px] w-full items-center justify-between gap-2 border-[0.5px] border-gray-200 px-6 flex-shrink-0">
<div className="flex items-center gap-2">
<Avatar
src={botProfile?.avatar}
className="mr-1 w-[32px] h-[32px] text-large bg-gray-50"
name={botProfile?.name!}
/>
<span>{botProfile?.name!}</span>
<a
className="text-slate-500 hover:text-blue-600 flex items-center gap-2"
href="/factory/list"
>
<BackIcon />
</a>
<div className="flex items-center gap-2">
<Avatar
src={botProfile?.avatar}
className="mr-1 w-[32px] h-[32px] text-large bg-gray-50"
name={botProfile?.name!}
/>
<span>{botProfile?.name!}</span>
</div>
</div>
</div>
<div className="flex items-center">
<Tabs
defaultSelectedKey={ConfigTypeEnum.CHAT_CONFIG}
variant="light"
selectedKey={activeTab}
aria-label="Options"
onSelectionChange={(key) =>
setActiveTab(`${key}` as ConfigTypeEnum)
}
classNames={{
base: 'w-[230px] h-[36px]',
tab: 'shadow-none w-[108px] h-[36px] px-0 py-0',
tabContent:
'group-data-[selected=true]:bg-[#FAE4CB] rounded-full px-3 py-2 w-[108px] h-[36px]',
cursor: 'shadow-none rounded-full w-[108px]',
}}
>
<Tab
key={ConfigTypeEnum.CHAT_CONFIG}
title={
<div className="flex items-center space-x-2 text-[#000] group-data-[selected=true]:text-[#000]">
<ChatIcon /> <span className="ml-2">对话调试</span>
</div>
<div className="flex items-center">
<Tabs
defaultSelectedKey={ConfigTypeEnum.CHAT_CONFIG}
variant="light"
selectedKey={activeTab}
aria-label="Options"
onSelectionChange={(key) =>
setActiveTab(`${key}` as ConfigTypeEnum)
}
/>
classNames={{
base: 'w-[230px] h-[36px]',
tab: 'shadow-none w-[108px] h-[36px] px-0 py-0',
tabContent:
'group-data-[selected=true]:bg-[#FAE4CB] rounded-full px-3 py-2 w-[108px] h-[36px]',
cursor: 'shadow-none rounded-full w-[108px]',
}}
>
<Tab
key={ConfigTypeEnum.CHAT_CONFIG}
title={
<div className="flex items-center space-x-2 text-[#000] group-data-[selected=true]:text-[#000]">
<ChatIcon /> <span className="ml-2">对话调试</span>
</div>
}
/>

<Tab
key={ConfigTypeEnum.MANUAL_CONFIG}
title={
<div className="flex items-center space-x-2 text-[#000] group-data-[selected=true]:text-[#000]">
<ConfigIcon />
<span className="ml-2">手动配置</span>
</div>
}
<Tab
key={ConfigTypeEnum.MANUAL_CONFIG}
title={
<div className="flex items-center space-x-2 text-[#000] group-data-[selected=true]:text-[#000]">
<ConfigIcon />
<span className="ml-2">手动配置</span>
</div>
}
/>
</Tabs>
</div>
<div className="flex items-center gap-2">
<PublicSwitcher
isSelected={!!botProfile?.public}
setBotProfile={setBotProfile}
/>
</Tabs>
</div>
</div>
<div className="flex items-center gap-2">
<PublicSwitcher
isSelected={!!botProfile?.public}
setBotProfile={setBotProfile}
/>
<div className="h-full grow overflow-y-auto overflow-x-hidden flex h-full flex-col">
<div
style={{
visibility:
activeTab === ConfigTypeEnum.CHAT_CONFIG
? 'visible'
: 'hidden',
}}
>
{chatConfigContent}
</div>
<div
style={{
position: 'absolute',
width: '50%',
height: 'calc(100vh - 73px)',
visibility:
activeTab !== ConfigTypeEnum.CHAT_CONFIG
? 'visible'
: 'hidden',
}}
>
{manualConfigContent}
</div>
</div>
</div>
<div className="h-full grow overflow-y-auto overflow-x-hidden flex h-full flex-col">
<div
style={{
visibility:
activeTab === ConfigTypeEnum.CHAT_CONFIG
? 'visible'
: 'hidden',
}}
>
{chatConfigContent}
</div>
<div className="hidden w-1/2 justify-center bg-[#FCFCFC] border-[0.5px] border-gray-200 md:flex relative">
<div className="relative flex h-[72px] w-full items-center justify-between gap-2 px-6 flex-shrink-0">
<div className="flex items-center gap-2"></div>
<div className="flex items-center">
<div>预览与测试</div>
</div>
<div
style={{
position: 'absolute',
width: '50%',
height: 'calc(100vh - 73px)',
visibility:
activeTab !== ConfigTypeEnum.CHAT_CONFIG
? 'visible'
: 'hidden',
}}
>
{manualConfigContent}
<div className="flex items-center gap-2">
<Button
className="rounded-full bg-gray-700 text-white"
size="sm"
isLoading={createBotLoading || updateBotLoading}
variant="flat"
startContent={<SaveIcon />}
onClick={(e) => {
e.preventDefault();
if (botProfile?.id) {
updateBot();
}
}}
>
保存
</Button>
</div>
</div>
</div>
</div>
<div className="hidden w-1/2 justify-center bg-[#FCFCFC] border-[0.5px] border-gray-200 md:flex relative">
<div className="relative flex h-[72px] w-full items-center justify-between gap-2 px-6 flex-shrink-0">
<div className="flex items-center gap-2"></div>
<div className="flex items-center">
<div>预览与测试</div>
</div>
<div className="flex items-center gap-2">
<Button
className="rounded-full bg-gray-700 text-white"
size="sm"
isLoading={createBotLoading || updateBotLoading}
variant="flat"
startContent={<SaveIcon />}
onClick={(e) => {
e.preventDefault();
if (botProfile?.id) {
updateBot();
}
}}
>
保存
</Button>
</div>
</div>
<div className="position absolute top-[73px] left-0 w-full">
<div style={{ height: 'calc(100vh - 73px)' }}>
<Chat
hideLogo={true}
assistantMeta={{
avatar:
botProfile?.avatar ||
'https://mdn.alipayobjects.com/huamei_j8gzmo/afts/img/A*YAP3SI7MMHQAAAAAAAAAAAAADrPSAQ/original',
title: botProfile?.name || 'PeterCat',
}}
style={{
backgroundColor: '#FCFCFC',
}}
token={params.id}
apiDomain={API_HOST}
apiUrl="/api/chat/stream_qa"
prompt={botProfile?.prompt}
starters={botProfile?.starters}
helloMessage={botProfile?.helloMessage}
disabledPlaceholder="机器人尚未配置任何内容 请在完成配置后进行对话测试"
disabled={!isEdit}
/>
<div className="position absolute top-[73px] left-0 w-full">
<div style={{ height: 'calc(100vh - 73px)' }}>
<Chat
hideLogo={true}
assistantMeta={{
avatar:
botProfile?.avatar ||
'https://mdn.alipayobjects.com/huamei_j8gzmo/afts/img/A*YAP3SI7MMHQAAAAAAAAAAAAADrPSAQ/original',
title: botProfile?.name || 'PeterCat',
}}
style={{
backgroundColor: '#FCFCFC',
}}
token={params.id}
apiDomain={API_HOST}
apiUrl="/api/chat/stream_qa"
prompt={botProfile?.prompt}
starters={botProfile?.starters}
helloMessage={botProfile?.helloMessage}
disabledPlaceholder="机器人尚未配置任何内容 请在完成配置后进行对话测试"
disabled={!isEdit}
/>
</div>
</div>
</div>
</div>
</div>
) : (
<></>
)}
{visibleType === VisibleTypeEnum.KNOWLEDGE_DETAIL ? (
<Knowledge
botId={botProfile.id}
goBack={() => {
setVisibleType(VisibleTypeEnum.BOT_CONFIG);
}}
></Knowledge>
) : (
<></>
)}
</div>
) : (
<></>
)}
{visibleType === VisibleTypeEnum.KNOWLEDGE_DETAIL ? (
<Knowledge
botId={botProfile.id}
goBack={() => {
setVisibleType(VisibleTypeEnum.BOT_CONFIG);
}}
></Knowledge>
) : (
<></>
)}
</div>
</BotTaskProvider>
);
}
14 changes: 11 additions & 3 deletions client/app/factory/edit/components/Knowledge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import KnowledgeBtn from './KnowledgeBtn';
import { Pagination } from '@nextui-org/react';
import MySpinner from '@/components/Spinner';
import { convertToLocalTime } from '@/app/utils/time';
import { useBotTask } from './TaskContext';

type IProps = {
botId: string;
Expand Down Expand Up @@ -79,12 +80,19 @@ export default function Knowledge({ botId, goBack }: IProps) {
const { botProfile } = useBot();
const [pageSize, setPageSize] = React.useState(12);
const [pageNumber, setPageNumber] = React.useState(1);
const { taskProfile } = useBotTask();
const {
data: RagDocData,
isPending,
isFetching,
isLoading: isListLoading,
} = useBotRAGChunkList(botId, pageSize, pageNumber);
} = useBotRAGChunkList(
botId,
pageSize,
pageNumber,
true,
taskProfile.running,
);
const list = React.useMemo(() => {
return RagDocData?.rows ?? [];
}, [RagDocData]);
Expand All @@ -109,7 +117,7 @@ export default function Knowledge({ botId, goBack }: IProps) {
<KnowledgeBtn botId={botId} onClick={() => {}} mode={'pageHeader'} />
</div>
</div>
<div className="pt-[40px] py-[40px] h-full overflow-y-auto">
<div className="pt-[40px] py-[40px] overflow-y-auto">
<MySpinner loading={isFetching || isPending || isListLoading}>
{list.length > 0 || isPending ? (
<ChunkList data={list}></ChunkList>
Expand All @@ -120,7 +128,7 @@ export default function Knowledge({ botId, goBack }: IProps) {
)}
</MySpinner>
<Pagination
className="flex justify-center items-center mt-[40px]"
className="flex justify-center items-center mt-[60px] p-[0] w-full"
total={Math.ceil((RagDocData?.total ?? 0) / 12)}
initialPage={1}
page={pageNumber}
Expand Down
Loading

0 comments on commit 3d4f078

Please sign in to comment.