From 0da06128e3d678e9ec1390bdbb37d8d3b4e259ea Mon Sep 17 00:00:00 2001 From: StyleZhang Date: Wed, 21 Aug 2024 15:29:22 +0800 Subject: [PATCH] agent tool in chat --- .../base/chat/chat/answer/agent-content.tsx | 4 -- .../base/chat/chat/answer/index.tsx | 4 -- .../base/chat/chat/answer/tool-detail.tsx | 71 +++++++++++++++++++ web/app/components/base/chat/chat/context.tsx | 3 - web/app/components/base/chat/chat/index.tsx | 3 - .../base/chat/chat/thought/index.tsx | 8 +-- web/i18n/en-US/tools.ts | 4 +- web/i18n/zh-Hans/tools.ts | 4 +- web/tailwind.config.js | 1 + web/themes/dark.css | 1 + web/themes/light.css | 1 + 11 files changed, 80 insertions(+), 24 deletions(-) create mode 100644 web/app/components/base/chat/chat/answer/tool-detail.tsx diff --git a/web/app/components/base/chat/chat/answer/agent-content.tsx b/web/app/components/base/chat/chat/answer/agent-content.tsx index 6f0a603608..b52dd54607 100644 --- a/web/app/components/base/chat/chat/answer/agent-content.tsx +++ b/web/app/components/base/chat/chat/answer/agent-content.tsx @@ -7,17 +7,14 @@ import type { import { Markdown } from '@/app/components/base/markdown' import Thought from '@/app/components/base/chat/chat/thought' import ImageGallery from '@/app/components/base/image-gallery' -import type { Emoji } from '@/app/components/tools/types' type AgentContentProps = { item: ChatItem responding?: boolean - allToolIcons?: Record } const AgentContent: FC = ({ item, responding, - allToolIcons, }) => { const { annotation, @@ -45,7 +42,6 @@ const AgentContent: FC = ({ {!!thought.tool && ( )} diff --git a/web/app/components/base/chat/chat/answer/index.tsx b/web/app/components/base/chat/chat/answer/index.tsx index f66f51a1aa..79c2e0cb9c 100644 --- a/web/app/components/base/chat/chat/answer/index.tsx +++ b/web/app/components/base/chat/chat/answer/index.tsx @@ -19,7 +19,6 @@ import { MessageFast } from '@/app/components/base/icons/src/vender/solid/commun import LoadingAnim from '@/app/components/base/chat/chat/loading-anim' import Citation from '@/app/components/base/chat/chat/citation' import { EditTitle } from '@/app/components/app/annotation/edit-annotation-modal/edit-item' -import type { Emoji } from '@/app/components/tools/types' import type { AppData } from '@/models/share' import cn from '@/utils/classnames' @@ -30,7 +29,6 @@ type AnswerProps = { config?: ChatConfig answerIcon?: ReactNode responding?: boolean - allToolIcons?: Record showPromptLog?: boolean chatAnswerContainerInner?: string hideProcessDetail?: boolean @@ -43,7 +41,6 @@ const Answer: FC = ({ config, answerIcon, responding, - allToolIcons, showPromptLog, chatAnswerContainerInner, hideProcessDetail, @@ -171,7 +168,6 @@ const Answer: FC = ({ ) } diff --git a/web/app/components/base/chat/chat/answer/tool-detail.tsx b/web/app/components/base/chat/chat/answer/tool-detail.tsx new file mode 100644 index 0000000000..130ad42fda --- /dev/null +++ b/web/app/components/base/chat/chat/answer/tool-detail.tsx @@ -0,0 +1,71 @@ +import { useState } from 'react' +import { useTranslation } from 'react-i18next' +import { + RiArrowDownSLine, + RiArrowRightSLine, + RiHammerFill, + RiLoader2Line, +} from '@remixicon/react' +import type { ToolInfoInThought } from '../type' +import cn from '@/utils/classnames' + +type ToolDetailProps = { + payload: ToolInfoInThought +} +const ToolDetail = ({ + payload, +}: ToolDetailProps) => { + const { t } = useTranslation() + const { name, label, input, isFinished, output } = payload + const toolLabel = name.startsWith('dataset_') ? t('dataset.knowledge') : label + const [expand, setExpand] = useState(false) + + return ( +
+
setExpand(!expand)} + > + {isFinished && } + {!isFinished && } + {t(`tools.thought.${isFinished ? 'used' : 'using'}`)} +
{toolLabel}
+ {!expand && } + {expand && } +
+ { + expand && ( + <> +
+
+ {t('tools.thought.requestTitle')} +
+
+ {input} +
+
+
+
+ {t('tools.thought.responseTitle')} +
+
+ {output} +
+
+ + ) + } +
+ ) +} + +export default ToolDetail diff --git a/web/app/components/base/chat/chat/context.tsx b/web/app/components/base/chat/chat/context.tsx index ba6f67189e..f8208e284e 100644 --- a/web/app/components/base/chat/chat/context.tsx +++ b/web/app/components/base/chat/chat/context.tsx @@ -10,7 +10,6 @@ export type ChatContextValue = Pick = ({ showPromptLog, questionIcon, answerIcon, - allToolIcons, onAnnotationAdded, onAnnotationEdited, onAnnotationRemoved, @@ -183,7 +182,6 @@ const Chat: FC = ({ showPromptLog={showPromptLog} questionIcon={questionIcon} answerIcon={answerIcon} - allToolIcons={allToolIcons} onSend={onSend} onAnnotationAdded={onAnnotationAdded} onAnnotationEdited={onAnnotationEdited} @@ -214,7 +212,6 @@ const Chat: FC = ({ config={config} answerIcon={answerIcon} responding={isLast && isResponding} - allToolIcons={allToolIcons} showPromptLog={showPromptLog} chatAnswerContainerInner={chatAnswerContainerInner} hideProcessDetail={hideProcessDetail} diff --git a/web/app/components/base/chat/chat/thought/index.tsx b/web/app/components/base/chat/chat/thought/index.tsx index 768f432e85..409f83dfaa 100644 --- a/web/app/components/base/chat/chat/thought/index.tsx +++ b/web/app/components/base/chat/chat/thought/index.tsx @@ -2,12 +2,10 @@ import type { FC } from 'react' import React from 'react' import type { ThoughtItem, ToolInfoInThought } from '../type' -import Tool from '@/app/components/base/chat/chat/thought/tool' -import type { Emoji } from '@/app/components/tools/types' +import ToolDetail from '@/app/components/base/chat/chat/answer/tool-detail' export type IThoughtProps = { thought: ThoughtItem - allToolIcons: Record isFinished: boolean } @@ -24,7 +22,6 @@ function getValue(value: string, isValueArray: boolean, index: number) { const Thought: FC = ({ thought, - allToolIcons, isFinished, }) => { const [toolNames, isValueArray]: [string[], boolean] = (() => { @@ -50,10 +47,9 @@ const Thought: FC = ({ return (
{toolThoughtList.map((item: ToolInfoInThought, index) => ( - ))}
diff --git a/web/i18n/en-US/tools.ts b/web/i18n/en-US/tools.ts index e50086c3eb..f96ae8144e 100644 --- a/web/i18n/en-US/tools.ts +++ b/web/i18n/en-US/tools.ts @@ -119,8 +119,8 @@ const translation = { thought: { using: 'Using', used: 'Used', - requestTitle: 'Request to', - responseTitle: 'Response from', + requestTitle: 'Request', + responseTitle: 'Response', }, setBuiltInTools: { info: 'Info', diff --git a/web/i18n/zh-Hans/tools.ts b/web/i18n/zh-Hans/tools.ts index 9064bbd263..1473fc23d3 100644 --- a/web/i18n/zh-Hans/tools.ts +++ b/web/i18n/zh-Hans/tools.ts @@ -119,8 +119,8 @@ const translation = { thought: { using: '正在使用', used: '已使用', - requestTitle: '请求来自', - responseTitle: '响应来自', + requestTitle: '请求', + responseTitle: '响应', }, setBuiltInTools: { info: '信息', diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 8e87ada90c..5ede7e29fa 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -91,6 +91,7 @@ module.exports = { backgroundImage: { 'chatbot-bg': 'var(--color-chatbot-bg)', 'chat-bubble-bg': 'var(--color-chat-bubble-bg)', + 'workflow-process-bg': 'var(--color-workflow-process-bg)', }, }, }, diff --git a/web/themes/dark.css b/web/themes/dark.css index a74129827f..9696f5e26d 100644 --- a/web/themes/dark.css +++ b/web/themes/dark.css @@ -601,4 +601,5 @@ html[data-theme="dark"] { --color-chatbot-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.90) 0%, rgba(29, 29, 32, 0.90) 90.48%); --color-chat-bubble-bg: linear-gradient(180deg, rgba(200, 206, 218, 0.08) 0%, rgba(200, 206, 218, 0.02) 100%); --color-third-party-Github: #FFFFFF; + --color-workflow-process-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%); } \ No newline at end of file diff --git a/web/themes/light.css b/web/themes/light.css index bece4052f8..ca120d24f1 100644 --- a/web/themes/light.css +++ b/web/themes/light.css @@ -601,4 +601,5 @@ html[data-theme="light"] { --color-chatbot-bg: linear-gradient(180deg, rgba(249, 250, 251, 0.90) 0%, rgba(242, 244, 247, 0.90) 90.48%); --color-chat-bubble-bg: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.60) 100%); --color-third-party-Github: #1B1F24; + --color-workflow-process-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%); } \ No newline at end of file