[improvement][headless-fe] Chat: Enabled integration with agent configuration. (#1265)

* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab.
[improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions.
[improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager.

* [improvement][semantic-fe] Add time granularity setting in the data source configuration.

* [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility

* [improvement][semantic-fe] Modification of data source creation prompt wording"

* [improvement][semantic-fe] metric market experience optimization

* [improvement][semantic-fe] enhance the analysis of metric trends

* [improvement][semantic-fe] optimize the presentation of metric trend permissions

* [improvement][semantic-fe] add metric trend download functionality

* [improvement][semantic-fe] fix the dimension initialization issue in metric correlation

* [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source.

* [improvement][semantic-fe] Optimizing pagination logic and some CSS styles

* [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum"

* [improvement][semantic-fe] Fixing the default value setting for the indicator list

* [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models

* [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API

* [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators

* [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality

* [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component.

* [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not.

* [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas.

* [improvement][semantic-fe] Updating the datePicker component to use dayjs instead.

* [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market.

* [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model.

* [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market.

* [improvement][semantic-fe] Adding the ability to download and transpose data.

* [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity.

* [improvement][semantic-fe] Fixing the logic error in the dimension value setting.

* [improvement][semantic-fe] Fixing the synchronization issue with the question and answer settings information.

* [improvement][semantic-fe] Optimizing the canvas functionality for better performance and user experience.

* [improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas.

* [improvement][semantic-fe] Changing the line type for canvas connections.

* [improvement][semantic-fe] Replacing the initialization variable from "semantic" to "headless".

* [improvement][semantic-fe] Fixing the missing migration issue for default drill-down dimension configuration in model editing. Additionally, optimizing the data retrieval method for initializing fields in the model.

* [improvement][semantic-fe] Updating the logic for the fieldName.

* [improvement][semantic-fe] Adjusting the position of the metrics tab.

* [improvement][semantic-fe] Changing the 字段名称 to 英文名称.

* [improvement][semantic-fe] Fix metric measurement deletion.

* [improvement][semantic-fe] UI optimization for metric details page.

* [improvement][semantic-fe] UI optimization for metric details page.

* [improvement][semantic-fe] UI adjustment for metric details page.

* [improvement][semantic-fe] The granularity field in the time type of model editing now supports setting it as empty.

* [improvement][semantic-fe] Added field type and metric type to the metric creation options.

* [improvement][semantic-fe] The organization structure selection feature has been added to the permission management.

* [improvement][semantic-fe] Improved user experience for the metric list.

* [improvement][semantic-fe] fix update the metric list.

* [improvement][headless-fe] Added view management functionality.

* [improvement][headless-fe] The view management functionality has been added. This feature allows users to create, edit, and manage different views within the system.

* [improvement][headless-fe] Added model editing side effect detection.

* [improvement][headless-fe] Fixed the logic error in view editing.

* [improvement][headless-fe] Fixed the issue with initializing dimension associations in metric settings.

* [improvement][headless-fe] Added the ability to hide the Q&A settings entry point.

* [improvement][headless-fe] Fixed the issue with selecting search results in metric field creation.

* [improvement][headless-fe] Added search functionality to the field list in model editing.

* [improvement][headless-fe] fix the field list in model editing

* [improvement][headless-fe] Restructured the data for the dimension value settings interface.

* [improvement][headless-fe] Added dynamic variable functionality to model creation based on SQL scripts.

* [improvement][headless-fe] Added support for passing dynamic variables as parameters in the executeSql function.

* [improvement][headless-fe] Resolved the issue where users were unable to select all options for dimensions, metrics, and fields in the metric generation process.

* [improvement][headless-fe] Replaced the term "view" with "dataset"

* [improvement][headless-fe] Added the ability to export metrics and dimensions to a specific target.

* [improvement][headless-fe] Enhanced dataset creation to support the tag mode.

* [improvement][headless-fe] Added tag value setting.

* [improvement][headless-fe] Optimized the tag setting system.

* [improvement][headless-fe] Optimized the tag setting system.

* [improvement][headless-fe] Updated the data initialization for model editing to use API requests instead.

* [improvement][headless-fe] Added search functionality to model management.

* [improvement][headless-fe] Removed field null validation during model editing.

* [improvement][headless-fe] Updated the batch operation button component.

* [improvement][headless-fe] Optimized the logic for initializing indicators in dimension value settings.

* [improvement][headless-fe] Adjusted the length of the input field for model editing names.

* [improvement][headless-fe]  Lock the version of the @ant-design/pro-table component and replace it with @ant-design/pro-components.

* [improvement][headless-fe] Optimized the style of the metrics market and tags market.

* [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling.

* [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling

* [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling.

* [improvement][headless-fe] Fixed the issue where the conditions for metric measurement creation were not being saved correctly.

* [improvement][headless-fe] Default value setting for hiding dimensions.

* [improvement][headless-fe] Updated the file imports in the project.

* [improvement][headless-fe] Adjusted the logic for displaying the tab in the theme domain.

* [improvement][headless-fe] Added term management functionality.

* [improvement][headless-fe] When creating a model, the current metric operator now allows for clearance.

* [improvement][headless-fe] Term management interface transformation

* [improvement][headless-fe] Migrating scaffold version to @umi/max

* [improvement][headless-fe] remove modle column

* [improvement][headless-fe] 1.Added configuration for the large language model in the agent; 2.upgraded React version from 17 to 18; 3.modified some UI effects.

* [improvement][headless-fe] Added a simplified mode to the question-answering system.

* [improvement][headless-fe] remove pnpm-lock

* [improvement][headless-fe] add pnpm-lock

* [improvement][headless-fe] Fixed the issue with passing the modelId during initialization.

* [improvement][headless-fe] Fixed the issue with abnormal comments during model creation.

* [improvement][headless-fe] fix  build bugs

* [improvement][headless-fe]  change build config

* [improvement][headless-fe] route config change

* [improvement][headless-fe] Optimized data updating when switching domains.

* [improvement][headless-fe] css change

* [improvement][semantic-fe] logo css change

* [improvement][semantic-fe] system config add defaultValue support

* [improvement][semantic-fe] tag mode wording change

* [improvement][semantic-fe] fix metric edit page init error

* [improvement][supersonic-fe] Updated the way chat projects are imported in supersonic-fe.

* [improvement][chat-engine] Added a background silent mode for watching chat projects.

* [improvement][supersonic-fe] fix proxy url

* [improvement][headless-fe] agent setting update

* [improvement][headless-fe] Agent configuration: Added connectivity testing for large models.

* [improvement][headless-fe] Chat: Enabled integration with agent configuration.

---------

Co-authored-by: tristanliu <tristanliu@tencent.com>

webapp/packages/chat-sdk/src/Chat/MessageContainer/index.tsx

@@ -19,6 +19,7 @@ type Props = {
   isDeveloper?: boolean;
   integrateSystem?: string;
   isSimpleMode?: boolean;
+  isDebugMode?: boolean;
   onMsgDataLoaded: (
     data: MsgDataType,
     questionId: string | number,
@@ -39,6 +40,7 @@ const MessageContainer: React.FC<Props> = ({
   isDeveloper,
   integrateSystem,
   isSimpleMode,
+  isDebugMode,
   onMsgDataLoaded,
   onSendMsg,
 }) => {
@@ -95,6 +97,7 @@ const MessageContainer: React.FC<Props> = ({
                   {identityMsg && <Text position="left" data={identityMsg} />}
                   <ChatItem
                     isSimpleMode={isSimpleMode}
+                    isDebugMode={isDebugMode}
                     msg={msgValue || msg || ''}
                     parseInfos={parseInfos}
                     parseTimeCostValue={parseTimeCost}

webapp/packages/chat-sdk/src/Chat/index.tsx

@@ -15,12 +15,13 @@ import { useThrottleFn } from 'ahooks';
 import Conversation from './Conversation';
 import ChatFooter from './ChatFooter';
 import classNames from 'classnames';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isBoolean } from 'lodash';
 import AgentList from './AgentList';
 import MobileAgents from './MobileAgents';
 import { HistoryMsgItemType, MsgDataType, SendMsgParamsType } from '../common/type';
 import { getHistoryMsg } from '../service';
 import ShowCase from '../ShowCase';
+import { jsonParse } from '../utils/utils';
 import { Drawer, Modal, Row, Col, Space, Switch, Tooltip } from 'antd';
 
 type Props = {
@@ -67,6 +68,7 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
   const [showCaseVisible, setShowCaseVisible] = useState(false);
 
   const [isSimpleMode, setIsSimpleMode] = useState<boolean>(false);
+  const [isDebugMode, setIsDebugMode] = useState<boolean>(true);
 
   const conversationRef = useRef<any>();
   const chatFooterRef = useRef<any>();
@@ -87,10 +89,28 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
     }
   };
 
+  const updateAgentConfigMode = (agent: AgentType) => {
+    const agentConfig = jsonParse(agent?.agentConfig, {});
+    const { simpleMode, debugMode } = agentConfig;
+    if (isBoolean(simpleMode)) {
+      setIsSimpleMode(simpleMode);
+    } else {
+      setIsSimpleMode(false);
+    }
+    if (isBoolean(debugMode)) {
+      setIsDebugMode(debugMode);
+    } else {
+      setIsDebugMode(true);
+    }
+  };
+
   const updateCurrentAgent = (agent?: AgentType) => {
     setCurrentAgent(agent);
     onCurrentAgentChange?.(agent);
     localStorage.setItem('AGENT_ID', `${agent?.id}`);
+    if (agent) {
+      updateAgentConfigMode(agent);
+    }
     if (!isCopilot) {
       window.history.replaceState({}, '', `${window.location.pathname}?agentId=${agent?.id}`);
     }
@@ -398,6 +418,7 @@ const Chat: ForwardRefRenderFunction<any, Props> = (
                 <MessageContainer
                   id="messageContainer"
                   isSimpleMode={isSimpleMode}
+                  isDebugMode={isDebugMode}
                   messageList={messageList}
                   chatId={currentConversation?.chatId}
                   historyVisible={historyVisible}

webapp/packages/chat-sdk/src/Chat/type.ts

@@ -1,4 +1,4 @@
-import { ChatContextType, MsgDataType, ParseTimeCostType, SendMsgParamsType } from "../common/type";
+import { ChatContextType, MsgDataType, ParseTimeCostType, SendMsgParamsType } from '../common/type';
 
 export enum MessageTypeEnum {
   TEXT = 'text', // 指标文本
@@ -84,4 +84,22 @@ export type AgentType = {
   examples: string[];
   status: 0 | 1;
   initialSendMsgParams?: SendMsgParamsType;
+  createdBy: string;
+  updatedBy: string;
+  createdAt: string;
+  updatedAt: string;
+  enableSearch: number;
+  agentConfig: string;
+  llmConfig: {
+    provider: string;
+    baseUrl: string;
+    apiKey: string;
+    modelName: string;
+    temperature: number;
+    timeOut: number;
+  };
+  multiTurnConfig: {
+    enableMultiTurn: boolean;
+  };
+  dataSetIds: number[];
 };

webapp/packages/chat-sdk/src/components/ChatItem/index.tsx

@@ -37,6 +37,7 @@ type Props = {
   executeItemNode?: React.ReactNode;
   renderCustomExecuteNode?: boolean;
   isSimpleMode?: boolean;
+  isDebugMode?: boolean;
   onMsgDataLoaded?: (data: MsgDataType, valid: boolean, isRefresh?: boolean) => void;
   onUpdateMessageScroll?: () => void;
   onSendMsg?: (msg: string) => void;
@@ -58,6 +59,7 @@ const ChatItem: React.FC<Props> = ({
   executeItemNode,
   renderCustomExecuteNode,
   isSimpleMode,
+  isDebugMode,
   onMsgDataLoaded,
   onUpdateMessageScroll,
   onSendMsg,
@@ -341,7 +343,7 @@ const ChatItem: React.FC<Props> = ({
           />
           {executeMode && (
             <>
-              {!isMobile && parseInfo?.sqlInfo && isDeveloper && !isSimpleMode && (
+              {!isMobile && parseInfo?.sqlInfo && isDeveloper && isDebugMode && !isSimpleMode && (
                 <SqlItem
                   llmReq={llmReq}
                   llmResp={llmResp}

webapp/packages/chat-sdk/src/components/ChatItem/style.less

@@ -108,6 +108,7 @@
     max-width: 100%;
     padding: 12px 16px;
     background: #fff;
+    min-height: 100px;
     border: 1px solid transparent;
     border-radius: 12px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);

webapp/packages/chat-sdk/src/demo/ChatDemo.tsx

@@ -3,7 +3,7 @@ import styles from './style.module.less';
 
 type Props = {};
 
-const ChatDemo: React.FC<Props> = ({}) => {
+const ChatDemo: React.FC<Props> = () => {
   return (
     <div className={styles.chatDemo}>
       <Chat isDeveloper />

webapp/packages/chat-sdk/src/utils/utils.ts

@@ -1,5 +1,6 @@
 import moment, { Moment } from 'moment';
 import { NumericUnit } from '../common/constants';
+import { isString } from 'lodash';
 
 export function formatByDecimalPlaces(value: number | string, decimalPlaces: number) {
   if (isNaN(+value) || decimalPlaces < 0 || decimalPlaces > 100) {
@@ -255,3 +256,18 @@ export const getTextWidth = (
   const metrics = context.measureText(text);
   return Math.ceil(metrics.width);
 };
+
+export function jsonParse(config: any, defaultReturn?: any) {
+  if (!isString(config)) {
+    return config;
+  }
+  if (!config) {
+    return defaultReturn;
+  }
+  try {
+    return JSON.parse(config);
+  } catch (error) {
+    console.log(error);
+    return defaultReturn;
+  }
+}

webapp/packages/supersonic-fe/src/pages/Agent/AgentForm.tsx

@@ -9,16 +9,17 @@ import {
   InputNumber,
   Select,
   Row,
-  Col,
+  message,
   Space,
 } from 'antd';
 import { AgentType } from './type';
 import { useEffect, useState } from 'react';
 import styles from './style.less';
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
-import { uuid, jsonParse } from '@/utils/utils';
+import { uuid, jsonParse, encryptPassword, decryptPassword } from '@/utils/utils';
 import ToolsSection from './ToolsSection';
 import globalStyles from '@/global.less';
+import { testLLMConn } from './service';
 
 const FormItem = Form.Item;
 const { TextArea } = Input;
@@ -38,11 +39,13 @@ const AgentForm: React.FC<Props> = ({ editAgent, onSaveAgent, onCreateToolBtnCli
   const [saveLoading, setSaveLoading] = useState(false);
   const [examples, setExamples] = useState<{ id: string; question?: string }[]>([]);
   const [activeKey, setActiveKey] = useState('basic');
+  const [llmTestLoading, setLlmTestLoading] = useState<boolean>(false);
   const [formData, setFormData] = useState<any>({
     enableSearch: true,
     llmConfig: {
       timeOut: 60,
       provider: 'OPEN_AI',
+      temperature: 0,
     },
     agentConfig: {
       ...defaultAgentConfig,
@@ -86,13 +89,28 @@ const AgentForm: React.FC<Props> = ({ editAgent, onSaveAgent, onCreateToolBtnCli
       id: editAgent?.id,
       ...(editAgent || {}),
       ...values,
-      agentConfig: JSON.stringify({ ...config, ...values.agentConfig }) as any,
+      agentConfig: JSON.stringify({
+        ...config,
+        ...values.agentConfig,
+        debugMode: values.agentConfig?.simpleMode === true ? false : values.agentConfig?.debugMode,
+      }) as any,
       examples: examples.map((example) => example.question),
       enableSearch: values.enableSearch ? 1 : 0,
     });
     setSaveLoading(false);
   };
 
+  const testLLMConnect = async (params: any) => {
+    setLlmTestLoading(true);
+    const { code, msg, data } = await testLLMConn(params);
+    setLlmTestLoading(false);
+    if (code === 200 && data) {
+      message.success('连接成功');
+    } else {
+      message.error(msg);
+    }
+  };
+
   const formTabList = [
     {
       label: '基本信息',
@@ -148,6 +166,7 @@ const AgentForm: React.FC<Props> = ({ editAgent, onSaveAgent, onCreateToolBtnCli
           <FormItem
             name={['agentConfig', 'debugMode']}
             label="显示调试信息"
+            hidden={formData?.agentConfig?.simpleMode === true}
             tooltip="包含Schema映射、SQL生成每阶段的关键信息"
             valuePropName="checked"
           >
@@ -217,7 +236,15 @@ const AgentForm: React.FC<Props> = ({ editAgent, onSaveAgent, onCreateToolBtnCli
           <FormItem
             name={['llmConfig', 'apiKey']}
             label="API Key"
-            // hidden={formData?.llmConfig?.provider === 'LOCAL_AI'}
+            getValueFromEvent={(event) => {
+              const value = event.target.value;
+              return encryptPassword(value);
+            }}
+            getValueProps={(value) => {
+              return {
+                value: value ? decryptPassword(value) : '',
+              };
+            }}
           >
             <Input placeholder="请输入API Key" />
           </FormItem>
@@ -231,7 +258,6 @@ const AgentForm: React.FC<Props> = ({ editAgent, onSaveAgent, onCreateToolBtnCli
                 0: '精准',
                 1: '随机',
               }}
-              defaultValue={0}
             />
           </FormItem>
           <FormItem name={['llmConfig', 'timeOut']} label="超时时间(秒)">
@@ -273,14 +299,23 @@ const AgentForm: React.FC<Props> = ({ editAgent, onSaveAgent, onCreateToolBtnCli
               <Button
                 type="primary"
                 onClick={() => {
-                  // setEditTool(undefined);
-                  // setModalVisible(true);
                   onCreateToolBtnClick?.();
                 }}
               >
                 <PlusOutlined /> 新增工具
               </Button>
             )}
+            {activeKey === 'llmConfig' && (
+              <Button
+                type="primary"
+                loading={llmTestLoading}
+                onClick={() => {
+                  testLLMConnect(formData.llmConfig);
+                }}
+              >
+                大模型连接测试
+              </Button>
+            )}
           </Space>
         }
         defaultActiveKey="basic"

webapp/packages/supersonic-fe/src/pages/Agent/service.ts

@@ -34,3 +34,10 @@ export function getMetricList(modelId: number) {
     },
   });
 }
+
+export function testLLMConn(data: any) {
+  return request<Result<{ list: MetricType[] }>>('/api/chat/agent/testLLMConn', {
+    method: 'POST',
+    data,
+  });
+}

webapp/packages/supersonic-fe/src/utils/utils.ts

@@ -472,14 +472,29 @@ export const objToArray = (_obj: ObjToArrayParams, keyType: string = 'string') =
   });
 };
 
-export function encryptPassword(password: string, username: string) {
+const encryptKey = CryptoJS.enc.Hex.parse(
+  '9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08',
+);
+
+export const encryptPassword = (password: string, key?: string) => {
   if (!password) {
     return password;
   }
-  // TODO This key should be stored in a secure place
-  const key = CryptoJS.enc.Utf8.parse('supersonic@2024');
   const srcs = CryptoJS.enc.Utf8.parse(password);
-  const encrypted = CryptoJS.AES.encrypt(srcs, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7});
+  const encrypted = CryptoJS.AES.encrypt(srcs, key || encryptKey, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7,
+  });
   return encrypted.toString();
-
 };
+
+export function decryptPassword(encryptPassword: string) {
+  if (!encryptPassword) {
+    return encryptPassword;
+  }
+  const decrypt = CryptoJS.AES.decrypt(encryptPassword, encryptKey, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7,
+  });
+  return CryptoJS.enc.Utf8.stringify(decrypt).toString();
+}