From 9ecc1241563f64d6652773adf80d1342391b6bfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= Date: Fri, 30 Aug 2024 13:44:10 +0800 Subject: [PATCH] chore: Update lint config and fix lint error in web folder --- web/.eslintrc.js | 2 +- web/client/api/app/index.ts | 19 ++-- web/client/api/chat/index.ts | 5 +- web/client/api/evaluate/index.ts | 26 +++-- web/client/api/index.ts | 34 ++++-- web/client/api/knowledge/index.ts | 18 +++- web/client/api/prompt/index.ts | 5 +- web/genAntdCss.ts | 4 +- web/locales/en/index.ts | 6 +- web/locales/zh/flow.ts | 2 - web/locales/zh/index.ts | 6 +- web/new-components/app/AppCard.tsx | 18 ++-- web/new-components/app/TabContent.tsx | 46 ++++---- .../chat/ChatContentContainer.tsx | 5 +- .../chat/content/ChatCompletion.tsx | 35 +++--- .../chat/content/ChatContent.tsx | 101 +++++++----------- .../chat/content/ChatDefault.tsx | 45 ++++---- web/new-components/chat/content/Feedback.tsx | 78 ++++++++------ web/new-components/chat/content/ModelIcon.tsx | 4 +- web/new-components/chat/content/RobotIcon.tsx | 7 +- web/new-components/chat/header/ChatHeader.tsx | 72 +++++++------ web/new-components/chat/input/ChatInput.tsx | 8 +- .../chat/input/ChatInputPanel.tsx | 39 ++++--- .../chat/input/ModelSwitcher.tsx | 16 +-- web/new-components/chat/input/Resource.tsx | 43 ++++---- web/new-components/chat/input/Temperature.tsx | 35 +++--- web/new-components/chat/input/ToolsBar.tsx | 42 +++++--- web/new-components/chat/sider/ChatSider.tsx | 52 ++++----- web/new-components/common/AppDefaultIcon.tsx | 10 +- web/new-components/common/MarkdownContext.tsx | 8 +- .../common/blurredCard/index.tsx | 62 +++++++---- .../common/modelSelector/index.tsx | 20 ++-- web/new-components/layout/Construct.tsx | 29 ++--- web/new-components/layout/FloatHelper.tsx | 7 +- web/new-components/layout/Header.tsx | 11 +- web/new-components/layout/Sider.tsx | 21 ++-- web/new-components/layout/UserBar.tsx | 26 +++-- web/package.json | 4 +- web/postcss.config.js | 2 +- web/utils/constants/index.ts | 4 +- 40 files changed, 535 insertions(+), 442 deletions(-) diff --git a/web/.eslintrc.js b/web/.eslintrc.js index 6e3b18fe9..53ea14119 100644 --- a/web/.eslintrc.js +++ b/web/.eslintrc.js @@ -18,7 +18,7 @@ module.exports = { ecmaFeatures: { jsx: true, }, - ecmaVersion: 12, + ecmaVersion: 'latest', sourceType: 'module', }, plugins: ['@typescript-eslint', 'prettier'], diff --git a/web/client/api/app/index.ts b/web/client/api/app/index.ts index bcd3377a5..bf991c5d7 100644 --- a/web/client/api/app/index.ts +++ b/web/client/api/app/index.ts @@ -32,7 +32,10 @@ export const updateApp = (data: CreateAppParams) => { * 应用列表 */ export const getAppList = (data: Record) => { - return POST, AppListResponse>(`/api/v1/app/list?page=${data.page || 1}&page_size=${data.page_size || 12}`, data); + return POST, AppListResponse>( + `/api/v1/app/list?page=${data.page || 1}&page_size=${data.page_size || 12}`, + data, + ); }; /** * 获取创建应用agents @@ -52,9 +55,7 @@ export const getAppStrategy = () => { * 获取资源参数 */ export const getResource = (data: Record) => { - return GET, Record[]>( - `/api/v1/app/resources/list?type=${data.type}` - ); + return GET, Record[]>(`/api/v1/app/resources/list?type=${data.type}`); }; /** * 创建native_app应用 @@ -80,12 +81,6 @@ export const getAppAdmins = (appCode: string) => { /** * 更新应用权限 */ -export const updateAppAdmins = (data: { - app_code: string; - admins: string[]; -}) => { - return POST<{ app_code: string; admins: string[] }, null>( - `/api/v1/app/admins/update`, - data - ); +export const updateAppAdmins = (data: { app_code: string; admins: string[] }) => { + return POST<{ app_code: string; admins: string[] }, null>(`/api/v1/app/admins/update`, data); }; diff --git a/web/client/api/chat/index.ts b/web/client/api/chat/index.ts index 940a6845d..a4ac732f1 100644 --- a/web/client/api/chat/index.ts +++ b/web/client/api/chat/index.ts @@ -36,5 +36,8 @@ export const cancelFeedback = (data: CancelFeedbackAddParams) => { * 终止话题 */ export const stopTopic = (data: StopTopicParams) => { - return POST(`/api/v1/chat/topic/terminate?conv_id=${data.conv_id}&round_index=${data.round_index}`, data); + return POST( + `/api/v1/chat/topic/terminate?conv_id=${data.conv_id}&round_index=${data.round_index}`, + data, + ); }; diff --git a/web/client/api/evaluate/index.ts b/web/client/api/evaluate/index.ts index 80224d512..cc51ca662 100644 --- a/web/client/api/evaluate/index.ts +++ b/web/client/api/evaluate/index.ts @@ -1,16 +1,16 @@ -import { getUserId } from '@/utils'; -import { GET, POST, DELETE } from '../index'; import type { - getDataSetsRequest, - getEvaluationsRequest, + createEvaluationsRequest, delDataSetRequest, delEvaluationRequest, - uploadDataSetsRequest, - createEvaluationsRequest, + downloadEvaluationRequest, + getDataSetsRequest, + getEvaluationsRequest, getMetricsRequest, updateDataSetRequest, - downloadEvaluationRequest, + uploadDataSetsRequest, } from '@/types/evaluate'; +import { getUserId } from '@/utils'; +import { DELETE, GET, POST } from '../index'; export const getTestAuth = () => { return GET(`/api/v1/evaluate/test_auth`); @@ -100,11 +100,15 @@ export const getMetrics = (data: getMetricsRequest) => { }); }; export const showEvaluation = (data: Partial) => { - return GET, Record[]>(`/api/v1/evaluate/evaluation/detail/show`, data, { - headers: { - 'user-id': userId, + return GET, Record[]>( + `/api/v1/evaluate/evaluation/detail/show`, + data, + { + headers: { + 'user-id': userId, + }, }, - }); + ); }; export const getStorageTypes = () => { return GET>(`/api/v1/evaluate/storage/types`, undefined, { diff --git a/web/client/api/index.ts b/web/client/api/index.ts index 7936755c1..8f477afd8 100644 --- a/web/client/api/index.ts +++ b/web/client/api/index.ts @@ -1,6 +1,6 @@ import { getUserId } from '@/utils'; import { HEADER_USER_ID_KEY } from '@/utils/constants/index'; -import axios, { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios'; +import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'; export type ResponseType = { data: T; @@ -38,8 +38,8 @@ const LONG_TIME_API: string[] = [ '/personal/agent/upload', ]; -ins.interceptors.request.use((request) => { - const isLongTimeApi = LONG_TIME_API.some((item) => request.url && request.url.indexOf(item) >= 0); +ins.interceptors.request.use(request => { + const isLongTimeApi = LONG_TIME_API.some(item => request.url && request.url.indexOf(item) >= 0); if (!request.timeout) { request.timeout = isLongTimeApi ? 60000 : 100000; } @@ -47,7 +47,11 @@ ins.interceptors.request.use((request) => { return request; }); -export const GET = (url: string, params?: Params, config?: AxiosRequestConfig) => { +export const GET = ( + url: string, + params?: Params, + config?: AxiosRequestConfig, +) => { return ins.get>(url, { params, ...config }); }; @@ -55,7 +59,11 @@ export const POST = (url: string, data?: Da return ins.post>(url, data, config); }; -export const PATCH = (url: string, data?: Data, config?: AxiosRequestConfig) => { +export const PATCH = ( + url: string, + data?: Data, + config?: AxiosRequestConfig, +) => { return ins.patch>(url, data, config); }; @@ -63,16 +71,20 @@ export const PUT = (url: string, data?: Dat return ins.put>(url, data, config); }; -export const DELETE = (url: string, params?: Params, config?: AxiosRequestConfig) => { +export const DELETE = ( + url: string, + params?: Params, + config?: AxiosRequestConfig, +) => { return ins.delete>(url, { params, ...config }); }; -export * from './tools'; -export * from './request'; +export * from './app'; export * from './chat'; +export * from './evaluate'; export * from './flow'; -export * from './app'; export * from './knowledge'; -export * from './user'; export * from './prompt'; -export * from './evaluate'; +export * from './request'; +export * from './tools'; +export * from './user'; diff --git a/web/client/api/knowledge/index.ts b/web/client/api/knowledge/index.ts index cb59396d0..ef515cb04 100644 --- a/web/client/api/knowledge/index.ts +++ b/web/client/api/knowledge/index.ts @@ -1,12 +1,14 @@ -import { AddYuqueProps, RecallTestChunk, RecallTestProps } from '@/types/knowledge'; +import { AddYuqueProps, RecallTestChunk, RecallTestProps, SearchDocumentParams } from '@/types/knowledge'; import { GET, POST } from '../index'; -import { SearchDocumentParams } from '@/types/knowledge'; /** * 知识库编辑搜索 */ export const searchDocumentList = (spaceName: string, data: SearchDocumentParams) => { - return POST(`/knowledge/${spaceName}/document/list`, data); + return POST( + `/knowledge/${spaceName}/document/list`, + data, + ); }; /** @@ -19,8 +21,14 @@ export const addYuque = (data: AddYuqueProps) => { /** * 编辑知识库切片 */ -export const editChunk = (knowledgeName: string, data: { questions: string[]; doc_id: string | number; doc_name: string }) => { - return POST<{ questions: string[]; doc_id: string | number; doc_name: string }, null>(`/knowledge/${knowledgeName}/document/edit`, data); +export const editChunk = ( + knowledgeName: string, + data: { questions: string[]; doc_id: string | number; doc_name: string }, +) => { + return POST<{ questions: string[]; doc_id: string | number; doc_name: string }, null>( + `/knowledge/${knowledgeName}/document/edit`, + data, + ); }; /** * 召回测试推荐问题 diff --git a/web/client/api/prompt/index.ts b/web/client/api/prompt/index.ts index 84c1e128b..c6e03ae96 100644 --- a/web/client/api/prompt/index.ts +++ b/web/client/api/prompt/index.ts @@ -49,7 +49,10 @@ export const deletePrompt = (data: OperatePromptParams) => { * prompt列表 */ export const getPromptList = (data: Record) => { - return POST, PromptListResponse>(`/prompt/query_page?page=${data.page}&page_size=${data.page_size}`, data); + return POST, PromptListResponse>( + `/prompt/query_page?page=${data.page}&page_size=${data.page_size}`, + data, + ); }; /** diff --git a/web/genAntdCss.ts b/web/genAntdCss.ts index ac1ff3663..386403b97 100644 --- a/web/genAntdCss.ts +++ b/web/genAntdCss.ts @@ -1,8 +1,8 @@ +import { extractStyle } from '@ant-design/cssinjs'; +import type Entity from '@ant-design/cssinjs/lib/Cache'; import { createHash } from 'crypto'; import fs from 'fs'; import path from 'path'; -import { extractStyle } from '@ant-design/cssinjs'; -import type Entity from '@ant-design/cssinjs/lib/Cache'; export type DoExtraStyleOptions = { cache: Entity; diff --git a/web/locales/en/index.ts b/web/locales/en/index.ts index 471d0ea71..424c0e52e 100644 --- a/web/locales/en/index.ts +++ b/web/locales/en/index.ts @@ -1,6 +1,6 @@ -import { ChatEn } from "./chat"; -import { CommonEn } from "./common"; -import { FlowEn } from "./flow"; +import { ChatEn } from './chat'; +import { CommonEn } from './common'; +import { FlowEn } from './flow'; const en = { ...ChatEn, diff --git a/web/locales/zh/flow.ts b/web/locales/zh/flow.ts index bf9ed2f9d..fda54cd50 100644 --- a/web/locales/zh/flow.ts +++ b/web/locales/zh/flow.ts @@ -1,5 +1,3 @@ -import { Select } from 'antd'; - export const FlowZn = { Upload_Data_Successfully: '文件上传成功', Upload_Data_Failed: '文件上传失败', diff --git a/web/locales/zh/index.ts b/web/locales/zh/index.ts index c0a70fbfe..65bb9cfc3 100644 --- a/web/locales/zh/index.ts +++ b/web/locales/zh/index.ts @@ -1,6 +1,6 @@ -import { CommonZh } from "./common"; -import { ChatZh } from "./chat"; -import { FlowZn } from "./flow"; +import { ChatZh } from './chat'; +import { CommonZh } from './common'; +import { FlowZn } from './flow'; const zh = { ...ChatZh, diff --git a/web/new-components/app/AppCard.tsx b/web/new-components/app/AppCard.tsx index 296bb868a..0bb887a1e 100644 --- a/web/new-components/app/AppCard.tsx +++ b/web/new-components/app/AppCard.tsx @@ -16,7 +16,7 @@ const AppCard: React.FC<{ data: IApp }> = ({ data }) => { const router = useRouter(); return ( { @@ -34,24 +34,24 @@ const AppCard: React.FC<{ data: IApp }> = ({ data }) => { }} > {/* title & functions */} -
-
+
+
{data.app_name} -
+
- {data?.app_name} + {data?.app_name}
- + {languageMap[data?.language]} - + {data?.team_mode}
@@ -64,7 +64,7 @@ const AppCard: React.FC<{ data: IApp }> = ({ data }) => { rows: 2, tooltip: true, }} - className="mt-4 text-sm text-gray-500 font-normal h-10" + className='mt-4 text-sm text-gray-500 font-normal h-10' > {data?.app_describe} diff --git a/web/new-components/app/TabContent.tsx b/web/new-components/app/TabContent.tsx index f13042dd1..97bb099cf 100644 --- a/web/new-components/app/TabContent.tsx +++ b/web/new-components/app/TabContent.tsx @@ -1,13 +1,12 @@ -import { IApp } from '@/types/app'; -import { Avatar, Empty, Spin } from 'antd'; -import { useRouter } from 'next/router'; -import React, { useContext } from 'react'; - -import BlurredCard from '@/new-components/common/blurredCard'; import { ChatContext } from '@/app/chat-context'; import { apiInterceptors, collectApp, newDialogue, unCollectApp } from '@/client/api'; +import BlurredCard from '@/new-components/common/blurredCard'; +import { IApp } from '@/types/app'; import { StarFilled, StarOutlined } from '@ant-design/icons'; +import { Avatar, Empty, Spin } from 'antd'; import Image from 'next/image'; +import { useRouter } from 'next/router'; +import React, { useContext } from 'react'; import IconFont from '../common/Icon'; const TabContent: React.FC<{ apps: IApp[]; loading: boolean; refresh: () => void; type: 'used' | 'recommend' }> = ({ @@ -18,7 +17,9 @@ const TabContent: React.FC<{ apps: IApp[]; loading: boolean; refresh: () => void }) => { const collect = async (data: Record) => { const [error] = await apiInterceptors( - data.is_collected === 'true' ? unCollectApp({ app_code: data.app_code }) : collectApp({ app_code: data.app_code }), + data.is_collected === 'true' + ? unCollectApp({ app_code: data.app_code }) + : collectApp({ app_code: data.app_code }), ); if (error) return; refresh(); @@ -67,12 +68,12 @@ const TabContent: React.FC<{ apps: IApp[]; loading: boolean; refresh: () => void }; if (loading) { - return ; + return ; } return ( -
+
{apps?.length > 0 ? ( - apps.map((item) => ( + apps.map(item => ( void RightTop={ item.is_collected === 'true' ? ( { + onClick={e => { e.stopPropagation(); collect(item); }} @@ -93,7 +94,7 @@ const TabContent: React.FC<{ apps: IApp[]; loading: boolean; refresh: () => void /> ) : ( { + onClick={e => { e.stopPropagation(); collect(item); }} @@ -105,10 +106,13 @@ const TabContent: React.FC<{ apps: IApp[]; loading: boolean; refresh: () => void ) } LeftBottom={ -
+
{item.owner_name && ( -
- +
+ {item.owner_name} {item.owner_name} @@ -116,9 +120,9 @@ const TabContent: React.FC<{ apps: IApp[]; loading: boolean; refresh: () => void )} {/* 最近使用不展示热度值 */} {type !== 'used' && ( -
- - {item.hot_value} +
+ + {item.hot_value}
)}
@@ -128,8 +132,10 @@ const TabContent: React.FC<{ apps: IApp[]; loading: boolean; refresh: () => void )) ) : ( } - className="flex justify-center items-center w-full h-full min-h-[200px]" + image={ + empty + } + className='flex justify-center items-center w-full h-full min-h-[200px]' /> )}
diff --git a/web/new-components/chat/ChatContentContainer.tsx b/web/new-components/chat/ChatContentContainer.tsx index 901a1fb57..f3e4170c3 100644 --- a/web/new-components/chat/ChatContentContainer.tsx +++ b/web/new-components/chat/ChatContentContainer.tsx @@ -4,6 +4,7 @@ import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } f const ChatCompletion = dynamic(() => import('@/new-components/chat/content/ChatCompletion'), { ssr: false }); +// eslint-disable-next-line no-empty-pattern const ChatContentContainer = ({}, ref: React.ForwardedRef) => { const scrollRef = useRef(null); const [isScrollToTop, setIsScrollToTop] = useState(false); @@ -30,8 +31,8 @@ const ChatContentContainer = ({}, ref: React.ForwardedRef) => { }, []); return ( -
-
+
+
diff --git a/web/new-components/chat/content/ChatCompletion.tsx b/web/new-components/chat/content/ChatCompletion.tsx index 26b110ce5..f5200fb71 100644 --- a/web/new-components/chat/content/ChatCompletion.tsx +++ b/web/new-components/chat/content/ChatCompletion.tsx @@ -1,7 +1,7 @@ -import ChatContent from '@/new-components/chat/content/ChatContent'; import { ChatContext } from '@/app/chat-context'; import { apiInterceptors, getAppInfo } from '@/client/api'; import MonacoEditor from '@/components/chat/monaco-editor'; +import ChatContent from '@/new-components/chat/content/ChatContent'; import { ChatContentContext } from '@/pages/chat'; import { IApp } from '@/types/app'; import { IChatDialogueMessageSchema } from '@/types/chat'; @@ -10,7 +10,7 @@ import { useAsyncEffect } from 'ahooks'; import { Modal } from 'antd'; import { cloneDeep } from 'lodash'; import { useSearchParams } from 'next/navigation'; -import React, { useContext, useMemo, useState, useEffect, useRef } from 'react'; +import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'; import { v4 as uuid } from 'uuid'; const ChatCompletion: React.FC = () => { @@ -19,16 +19,17 @@ const ChatCompletion: React.FC = () => { const chatId = searchParams?.get('id') ?? ''; const { currentDialogInfo, model } = useContext(ChatContext); - const { history, handleChat, refreshDialogList, setAppInfo, setModelValue, setTemperatureValue, setResourceValue } = useContext(ChatContentContext); + const { history, handleChat, refreshDialogList, setAppInfo, setModelValue, setTemperatureValue, setResourceValue } = + useContext(ChatContentContext); const [jsonModalOpen, setJsonModalOpen] = useState(false); const [jsonValue, setJsonValue] = useState(''); const showMessages = useMemo(() => { - let tempMessage: IChatDialogueMessageSchema[] = cloneDeep(history); + const tempMessage: IChatDialogueMessageSchema[] = cloneDeep(history); return tempMessage - .filter((item) => ['view', 'human'].includes(item.role)) - .map((item) => { + .filter(item => ['view', 'human'].includes(item.role)) + .map(item => { return { ...item, key: uuid(), @@ -45,10 +46,10 @@ const ChatCompletion: React.FC = () => { }), ); if (res) { - const paramKey: string[] = res?.param_need?.map((i) => i.type) || []; - const resModel = res?.param_need?.filter((item) => item.type === 'model')[0]?.value || model; - const temperature = res?.param_need?.filter((item) => item.type === 'temperature')[0]?.value || 0.5; - const resource = res?.param_need?.filter((item) => item.type === 'resource')[0]?.bind_value; + const paramKey: string[] = res?.param_need?.map(i => i.type) || []; + const resModel = res?.param_need?.filter(item => item.type === 'model')[0]?.value || model; + const temperature = res?.param_need?.filter(item => item.type === 'temperature')[0]?.value || 0.5; + const resource = res?.param_need?.filter(item => item.type === 'resource')[0]?.bind_value; setAppInfo(res || ({} as IApp)); setTemperatureValue(temperature || 0.5); setModelValue(resModel); @@ -57,7 +58,9 @@ const ChatCompletion: React.FC = () => { app_code: res?.app_code, model_name: resModel, ...(paramKey?.includes('temperature') && { temperature }), - ...(paramKey.includes('resource') && { select_param: typeof resource === 'string' ? resource : JSON.stringify(resource) }), + ...(paramKey.includes('resource') && { + select_param: typeof resource === 'string' ? resource : JSON.stringify(resource), + }), }); await refreshDialogList(); localStorage.removeItem(STORAGE_INIT_MESSAGE_KET); @@ -72,9 +75,9 @@ const ChatCompletion: React.FC = () => { }, [history]); return ( -
+
{!!showMessages.length && - showMessages.map((content) => { + showMessages.map(content => { return ( { ); })} { setJsonModalOpen(false); }} > - +
); diff --git a/web/new-components/chat/content/ChatContent.tsx b/web/new-components/chat/content/ChatContent.tsx index 3e98505f2..2cf0090a0 100644 --- a/web/new-components/chat/content/ChatContent.tsx +++ b/web/new-components/chat/content/ChatContent.tsx @@ -2,15 +2,14 @@ import markdownComponents from '@/components/chat/chat-content/config'; import { IChatDialogueMessageSchema } from '@/types/chat'; import { STORAGE_USERINFO_KEY } from '@/utils/constants/index'; import { CheckOutlined, ClockCircleOutlined, CloseOutlined, CodeOutlined, LoadingOutlined } from '@ant-design/icons'; +import { GPTVis } from '@antv/gpt-vis'; import classNames from 'classnames'; import Image from 'next/image'; import { useSearchParams } from 'next/navigation'; import React, { memo, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { GPTVis } from '@antv/gpt-vis'; import rehypeRaw from 'rehype-raw'; import remarkGfm from 'remark-gfm'; - import Feedback from './Feedback'; import RobotIcon from './RobotIcon'; @@ -19,14 +18,14 @@ const UserIcon: React.FC = () => { if (!user.avatar_url) { return ( -
+
{user?.nick_name}
); } return ( ["0"]["components"]; +type MarkdownComponent = Parameters['0']['components']; const pluginViewStatusMapper: Record = { todo: { bgClass: 'bg-gray-500', - icon: , + icon: , }, runing: { bgClass: 'bg-blue-500', - icon: , + icon: , }, failed: { bgClass: 'bg-red-500', - icon: , + icon: , }, completed: { bgClass: 'bg-green-500', - icon: , + icon: , }, }; @@ -94,7 +93,11 @@ const ChatContent: React.FC<{ const isRobot = useMemo(() => role === 'view', [role]); - const { relations, value, cachePluginContext } = useMemo<{ relations: string[]; value: string; cachePluginContext: DBGPTView[] }>(() => { + const { value, cachePluginContext } = useMemo<{ + relations: string[]; + value: string; + cachePluginContext: DBGPTView[]; + }>(() => { if (typeof context !== 'string') { return { relations: [], @@ -107,7 +110,7 @@ const ChatContent: React.FC<{ const cachePluginContext: DBGPTView[] = []; let cacheIndex = 0; - const result = value.replace(/]*>[^<]*<\/dbgpt-view>/gi, (matchVal) => { + const result = value.replace(/]*>[^<]*<\/dbgpt-view>/gi, matchVal => { try { const pluginVal = matchVal.replaceAll('\n', '\\n').replace(/<[^>]*>|<\/[^>]*>/gm, ''); const pluginContext = JSON.parse(pluginVal) as DBGPTView; @@ -142,28 +145,19 @@ const ChatContent: React.FC<{ const { name, status, err_msg, result } = cachePluginContext[index]; const { bgClass, icon } = pluginViewStatusMapper[status] ?? {}; return ( -
-
+
+
{name} {icon}
{result ? ( -
- - {result ?? ""} +
+ + {result ?? ''}
) : ( -
{err_msg}
+
{err_msg}
)}
); @@ -173,48 +167,35 @@ const ChatContent: React.FC<{ ); return ( -
+
{/* icon */} -
- {isRobot ? : } -
-
+
{isRobot ? : }
+
{/* 用户提问 */} {!isRobot && ( -
- {typeof context === "string" && context} +
+ {typeof context === 'string' && context}
)} {/* ai回答 */} {isRobot && ( -
-
- {typeof context === "object" && ( +
+
+ {typeof context === 'object' && (
{`[${context.template_name}]: `} - - - {context.template_introduce || "More Details"} + + + {context.template_introduce || 'More Details'}
)} - {typeof context === "string" && scene === "chat_agent" && ( - + {typeof context === 'string' && scene === 'chat_agent' && ( + {formatMarkdownValForAgent(value)} )} - {typeof context === "string" && scene !== "chat_agent" && ( + {typeof context === 'string' && scene !== 'chat_agent' && (
- - {t("thinking")} - -
-
-
-
+
+ {t('thinking')} +
+
+
+
)} diff --git a/web/new-components/chat/content/ChatDefault.tsx b/web/new-components/chat/content/ChatDefault.tsx index 6cd42429c..49b36bce4 100644 --- a/web/new-components/chat/content/ChatDefault.tsx +++ b/web/new-components/chat/content/ChatDefault.tsx @@ -1,8 +1,8 @@ -import TabContent from '@/new-components/app/TabContent'; -import ChatInput from '@/new-components/chat/input/ChatInput'; import { ChatContext } from '@/app/chat-context'; import { apiInterceptors, getAppList, newDialogue, recommendApps } from '@/client/api'; import { getRecommendQuestions } from '@/client/api/chat'; +import TabContent from '@/new-components/app/TabContent'; +import ChatInput from '@/new-components/chat/input/ChatInput'; import { STORAGE_INIT_MESSAGE_KET } from '@/utils'; import { useRequest } from 'ahooks'; import { ConfigProvider, Segmented, SegmentedProps } from 'antd'; @@ -58,8 +58,8 @@ function ChatDefault() { }, { manual: true, - onSuccess: (res) => { - const [error, data] = res; + onSuccess: res => { + const [_error, data] = res; if (activeKey === 'recommend') { return setApps({ app_list: data, @@ -106,27 +106,33 @@ function ChatDefault() { }, }} > -
+
-
+
{ + onChange={value => { setActiveKey(value as string); }} /> - + {t('app_in_mind')} { router.push('/'); }} > - construct_image - {t('explore')} + construct_image + {t('explore')} {t('Discover_more')} @@ -134,12 +140,12 @@ function ChatDefault() { {helps && helps.length > 0 && (
-

{t('help')}

-
- {helps.map((help) => ( +

{t('help')}

+
+ {helps.map(help => ( { const [, res] = await apiInterceptors(newDialogue({ chat_mode: 'chat_knowledge', model })); if (res) { @@ -154,13 +160,16 @@ function ChatDefault() { app_code: help.app_code, }), ); - localStorage.setItem(STORAGE_INIT_MESSAGE_KET, JSON.stringify({ id: res.conv_uid, message: help.question })); + localStorage.setItem( + STORAGE_INIT_MESSAGE_KET, + JSON.stringify({ id: res.conv_uid, message: help.question }), + ); router.push(`/chat/?scene=${res.chat_mode}&id=${res?.conv_uid}`); } }} > {help.question} - construct_image + construct_image ))}
diff --git a/web/new-components/chat/content/Feedback.tsx b/web/new-components/chat/content/Feedback.tsx index 5dde69075..6697a6a08 100644 --- a/web/new-components/chat/content/Feedback.tsx +++ b/web/new-components/chat/content/Feedback.tsx @@ -1,4 +1,4 @@ -import { apiInterceptors, feedbackAdd, getFeedbackReasons, cancelFeedback } from '@/client/api'; +import { apiInterceptors, cancelFeedback, feedbackAdd, getFeedbackReasons } from '@/client/api'; import { CopyOutlined, DislikeOutlined, LikeOutlined } from '@ant-design/icons'; import { useRequest } from 'ahooks'; import { Button, Divider, Input, Popover, Tag, message } from 'antd'; @@ -16,7 +16,11 @@ interface Tags { const DislikeContent: React.FC<{ list: Tags[]; loading: boolean; - feedback: (params: { feedback_type: string; reason_types?: string[] | undefined; remark?: string | undefined }) => void; + feedback: (params: { + feedback_type: string; + reason_types?: string[] | undefined; + remark?: string | undefined; + }) => void; setFeedbackOpen: React.Dispatch>; }> = ({ list, loading, feedback, setFeedbackOpen }) => { const { t } = useTranslation(); @@ -24,17 +28,17 @@ const DislikeContent: React.FC<{ const [remark, setRemark] = useState(''); return ( -
-
- {list?.map((item) => { - const isSelect = selectedTags.findIndex((tag) => tag.reason_type === item.reason_type) > -1; +
+
+ {list?.map(item => { + const isSelect = selectedTags.findIndex(tag => tag.reason_type === item.reason_type) > -1; return ( { setSelectedTags((preArr: Tags[]) => { - const index = preArr.findIndex((tag) => tag.reason_type === item.reason_type); + const index = preArr.findIndex(tag => tag.reason_type === item.reason_type); if (index > -1) { return [...preArr.slice(0, index), ...preArr.slice(index + 1)]; } @@ -49,13 +53,13 @@ const DislikeContent: React.FC<{
setRemark(e.target.value.trim())} + onChange={e => setRemark(e.target.value.trim())} /> -
+
diff --git a/web/new-components/chat/input/ModelSwitcher.tsx b/web/new-components/chat/input/ModelSwitcher.tsx index 53d8ac705..32f8c3250 100644 --- a/web/new-components/chat/input/ModelSwitcher.tsx +++ b/web/new-components/chat/input/ModelSwitcher.tsx @@ -15,14 +15,14 @@ const ModelSwitcher: React.FC = () => { // 左边工具栏动态可用key const paramKey: string[] = useMemo(() => { - return appInfo.param_need?.map((i) => i.type) || []; + return appInfo.param_need?.map(i => i.type) || []; }, [appInfo.param_need]); if (!paramKey.includes('model')) { return ( -
- +
+
); @@ -32,17 +32,17 @@ const ModelSwitcher: React.FC = () => { { + className='w-52 h-8 rounded-3xl' + onChange={val => { setResourceValue(val); }} disabled={!!resource?.bind_value} diff --git a/web/new-components/chat/input/Temperature.tsx b/web/new-components/chat/input/Temperature.tsx index b73de5ae6..cb4720ef3 100644 --- a/web/new-components/chat/input/Temperature.tsx +++ b/web/new-components/chat/input/Temperature.tsx @@ -4,21 +4,24 @@ import { InputNumber, Popover, Slider, Tooltip } from 'antd'; import React, { memo, useContext, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -const Temperature: React.FC<{ temperatureValue: any; setTemperatureValue: any }> = ({ temperatureValue, setTemperatureValue }) => { +const Temperature: React.FC<{ temperatureValue: any; setTemperatureValue: any }> = ({ + temperatureValue, + setTemperatureValue, +}) => { const { appInfo } = useContext(ChatContentContext); const { t } = useTranslation(); // 左边工具栏动态可用key const paramKey: string[] = useMemo(() => { - return appInfo.param_need?.map((i) => i.type) || []; + return appInfo.param_need?.map(i => i.type) || []; }, [appInfo.param_need]); if (!paramKey.includes('temperature')) { return ( -
- +
+
); @@ -33,32 +36,40 @@ const Temperature: React.FC<{ temperatureValue: any; setTemperatureValue: any }> }; return ( -
+
( -
+
- +
)} > - -
+ +
- {temperatureValue} + {temperatureValue}
); }; diff --git a/web/new-components/chat/input/ToolsBar.tsx b/web/new-components/chat/input/ToolsBar.tsx index 472aec247..179b2e687 100644 --- a/web/new-components/chat/input/ToolsBar.tsx +++ b/web/new-components/chat/input/ToolsBar.tsx @@ -23,7 +23,6 @@ interface ToolsConfig { const ToolsBar: React.FC<{ ctrl: AbortController; }> = ({ ctrl }) => { - const { t } = useTranslation(); const { @@ -48,7 +47,7 @@ const ToolsBar: React.FC<{ // 左边工具栏动态可用key const paramKey: string[] = useMemo(() => { - return appInfo.param_need?.map((i) => i.type) || []; + return appInfo.param_need?.map(i => i.type) || []; }, [appInfo.param_need]); const rightToolsConfig: ToolsConfig[] = useMemo(() => { @@ -75,12 +74,15 @@ const ToolsBar: React.FC<{ can_use: !replyLoading && history.length > 0, key: 'redo', onClick: async () => { - const lastHuman = history.filter((i) => i.role === 'human')?.slice(-1)?.[0]; + const lastHuman = history.filter(i => i.role === 'human')?.slice(-1)?.[0]; handleChat(lastHuman?.context || '', { app_code: appInfo.app_code, ...(paramKey.includes('temperature') && { temperature: temperatureValue }), ...(paramKey.includes('resource') && { - select_param: typeof resourceValue === 'string' ? resourceValue : JSON.stringify(resourceValue) || currentDialogue.select_param, + select_param: + typeof resourceValue === 'string' + ? resourceValue + : JSON.stringify(resourceValue) || currentDialogue.select_param, }), }); setTimeout(() => { @@ -93,7 +95,11 @@ const ToolsBar: React.FC<{ }, { tip: t('erase_memory'), - icon: clsLoading ? } /> : , + icon: clsLoading ? ( + } /> + ) : ( + + ), can_use: history.length > 0, key: 'clear', onClick: async () => { @@ -131,8 +137,8 @@ const ToolsBar: React.FC<{ const returnTools = (config: ToolsConfig[]) => { return ( <> - {config.map((item) => ( - + {config.map(item => ( +
{ try { return JSON.parse(currentDialogue.select_param).file_name; - } catch (error) { + } catch { return ''; } }, [currentDialogue.select_param]); return ( -
-
-
+
+
+
-
{returnTools(rightToolsConfig)}
+
{returnTools(rightToolsConfig)}
{(fileName || fileList[0]?.name) && ( -
-
-
- file-icon - {fileName || fileList[0]?.name} +
+
+
+ file-icon + + {fileName || fileList[0]?.name} +
} />
diff --git a/web/new-components/chat/sider/ChatSider.tsx b/web/new-components/chat/sider/ChatSider.tsx index 8ede1a2eb..4e3d51d78 100644 --- a/web/new-components/chat/sider/ChatSider.tsx +++ b/web/new-components/chat/sider/ChatSider.tsx @@ -30,17 +30,17 @@ const zeroWidthTriggerDefaultStyle: React.CSSProperties = { /** * 会话项 */ -const MenuItem: React.FC<{ item: any; refresh?: any; order: React.MutableRefObject; historyLoading?: boolean }> = ({ - item, - refresh, - historyLoading, - order, -}) => { +const MenuItem: React.FC<{ + item: any; + refresh?: any; + order: React.MutableRefObject; + historyLoading?: boolean; +}> = ({ item, refresh, historyLoading }) => { const { t } = useTranslation(); const router = useRouter(); const searchParams = useSearchParams(); const chatId = searchParams?.get('id') ?? ''; - const scene = searchParams?.get('scene') ?? ''; + const scene = searchParams?.get('scene') ?? ''; const { setCurrentDialogInfo } = useContext(ChatContext); @@ -74,7 +74,7 @@ const MenuItem: React.FC<{ item: any; refresh?: any; order: React.MutableRefObje return ( -
{item.icon}
+
{item.icon}
 -
+
{!item.default && ( -
+
{ + className='group-hover/item:opacity-100 cursor-pointer opacity-0' + onClick={e => { e.stopPropagation(); }} > @@ -126,8 +126,8 @@ const MenuItem: React.FC<{ item: any; refresh?: any; order: React.MutableRefObje />
{ + className='group-hover/item:opacity-100 cursor-pointer opacity-0' + onClick={e => { e.stopPropagation(); handleDelChat(); }} @@ -191,31 +191,35 @@ const ChatSider: React.FC<{ return ( : } + trigger={collapsed ? : } zeroWidthTriggerStyle={triggerStyle} - onCollapse={(collapsed) => setCollapsed(collapsed)} + onCollapse={collapsed => setCollapsed(collapsed)} > -
-
{t('dialog_list')}
- +
+
+ {t('dialog_list')} +
+ , + icon: default, default: true, }} order={order} /> - + {!!items?.length && - items.map((item) => )} + items.map(item => ( + + ))}
diff --git a/web/new-components/common/AppDefaultIcon.tsx b/web/new-components/common/AppDefaultIcon.tsx index 5de9e4365..0a1d0c309 100644 --- a/web/new-components/common/AppDefaultIcon.tsx +++ b/web/new-components/common/AppDefaultIcon.tsx @@ -1,4 +1,12 @@ -import { ColorfulChat, ColorfulDB, ColorfulDashboard, ColorfulData, ColorfulDoc, ColorfulExcel, ColorfulPlugin } from '@/components/icons'; +import { + ColorfulChat, + ColorfulDB, + ColorfulDashboard, + ColorfulData, + ColorfulDoc, + ColorfulExcel, + ColorfulPlugin, +} from '@/components/icons'; import Icon from '@ant-design/icons'; import React, { useCallback } from 'react'; diff --git a/web/new-components/common/MarkdownContext.tsx b/web/new-components/common/MarkdownContext.tsx index d92346e89..677ae065a 100644 --- a/web/new-components/common/MarkdownContext.tsx +++ b/web/new-components/common/MarkdownContext.tsx @@ -1,16 +1,12 @@ import markdownComponents from '@/components/chat/chat-content/config'; -import React from 'react'; import { GPTVis } from '@antv/gpt-vis'; +import React from 'react'; import rehypeRaw from 'rehype-raw'; import remarkGfm from 'remark-gfm'; const MarkDownContext: React.FC<{ children: string }> = ({ children }) => { return ( - + {children} ); diff --git a/web/new-components/common/blurredCard/index.tsx b/web/new-components/common/blurredCard/index.tsx index a51b0c943..2334514bc 100644 --- a/web/new-components/common/blurredCard/index.tsx +++ b/web/new-components/common/blurredCard/index.tsx @@ -1,5 +1,5 @@ import { EllipsisOutlined } from '@ant-design/icons'; -import { Divider, DropDownProps, Dropdown, Space, Tooltip, Typography } from 'antd'; +import { Divider, DropDownProps, Dropdown, Tooltip, Typography } from 'antd'; import cls from 'classnames'; import { t } from 'i18next'; import Image from 'next/image'; @@ -13,7 +13,7 @@ const BlurredCard: React.FC<{ Tags?: React.ReactNode; LeftBottom?: React.ReactNode; RightBottom?: React.ReactNode; - rightTopHover?: Boolean; + rightTopHover?: boolean; name: string; description: string | React.ReactNode; logo?: string; @@ -21,28 +21,43 @@ const BlurredCard: React.FC<{ className?: string; scene?: string; code?: string; -}> = ({ RightTop, Tags, LeftBottom, RightBottom, onClick, rightTopHover = true, logo, name, description, className, scene, code }) => { +}> = ({ + RightTop, + Tags, + LeftBottom, + RightBottom, + onClick, + rightTopHover = true, + logo, + name, + description, + className, + scene, + code, +}) => { if (typeof description === 'string') { description = ( -

+

{description}

); } - + return (
-
-
-
+
+
+
{scene ? ( ) : ( - logo && {name} + logo && ( + {name} + ) )}
@@ -50,7 +65,7 @@ const BlurredCard: React.FC<{ {name.length > 6 ? ( ) : ( { + onClick={e => { e.stopPropagation(); }} > @@ -83,15 +98,15 @@ const BlurredCard: React.FC<{
{description} -
{Tags}
-
+
{Tags}
+
{LeftBottom}
{RightBottom}
{code && ( <> - - + + {code} @@ -112,8 +127,8 @@ const ChatButton: React.FC<{ return (
{ + className='flex items-center gap-1 text-default' + onClick={e => { e.stopPropagation(); onClick && onClick(); }} @@ -126,8 +141,13 @@ const ChatButton: React.FC<{ const InnerDropdown: React.FC<{ menu: DropDownProps['menu'] }> = ({ menu }) => { return ( - node.parentNode as HTMLElement} placement="bottomRight" autoAdjustOverflow={false}> - + node.parentNode as HTMLElement} + placement='bottomRight' + autoAdjustOverflow={false} + > + ); }; diff --git a/web/new-components/common/modelSelector/index.tsx b/web/new-components/common/modelSelector/index.tsx index cb4be1173..98da69847 100644 --- a/web/new-components/common/modelSelector/index.tsx +++ b/web/new-components/common/modelSelector/index.tsx @@ -1,12 +1,12 @@ import { ChatContext } from '@/app/chat-context'; import { apiInterceptors, getUsableModels } from '@/client/api'; import { MODEL_ICON_MAP } from '@/utils/constants'; +import { CaretDownOutlined } from '@ant-design/icons'; import { useRequest } from 'ahooks'; import { Select } from 'antd'; import Image from 'next/image'; import React, { useContext, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { CaretDownOutlined } from '@ant-design/icons'; import styles from './styles.module.css'; @@ -19,11 +19,11 @@ export function renderModelIcon(model?: string, props?: { width: number; height: return ( llm ); } @@ -35,7 +35,7 @@ const ModelSelector: React.FC = () => { const [modelList, setModelList] = useState([]); useRequest(async () => await apiInterceptors(getUsableModels()), { - onSuccess: (data) => { + onSuccess: data => { const [, res] = data; setModelList(res || []); }, @@ -50,17 +50,17 @@ const ModelSelector: React.FC = () => {