(feature)(webapp) add show case and support multiple selection and deletion of filter conditions (#251)

2026-04-18 12:24:21 +08:00 · 2023-10-18 09:56:35 +08:00
parent 8d81f63e08
commit 36052cb4f2
36 changed files with 492 additions and 134 deletions
--- a/webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/FilterItem.tsx
@@ -13,6 +13,7 @@ type Props = {
  chatContext: ChatContextType;
  agentId?: number;
  entityAlias?: string;
+  integrateSystem?: string;
  onFiltersChange: (filters: FilterItemType[]) => void;
  onSwitchEntity: (entityId: string) => void;
 };
@@ -24,6 +25,7 @@ const FilterItem: React.FC<Props> = ({
  chatContext,
  agentId,
  entityAlias,
+  integrateSystem,
  onFiltersChange,
  onSwitchEntity,
 }) => {
@@ -50,7 +52,11 @@ const FilterItem: React.FC<Props> = ({
  };

  useEffect(() => {
-    if ((typeof filter.value === 'string' || isArray(filter.value)) && options.length === 0) {
+    if (
+      (typeof filter.value === 'string' || isArray(filter.value)) &&
+      options.length === 0 &&
+      integrateSystem !== 'showcase'
+    ) {
      initData();
    }
  }, []);
@@ -148,17 +154,24 @@ const FilterItem: React.FC<Props> = ({
          onSearch={debounceFetcher}
          notFoundContent={loading ? <Spin size="small" /> : null}
          onChange={onChange}
-          mode={isArray(filter.value) ? 'multiple' : undefined}
+          mode="multiple"
          showSearch
+          allowClear
        />
      ) : entityAlias &&
        ['歌曲', '艺人'].includes(entityAlias) &&
        filter.bizName?.includes('_id') ? (
-        <SwicthEntity
-          entityName={filter.value}
-          chatContext={chatContext}
-          onSwitchEntity={onSwitchEntity}
-        />
+        <>
+          <SwicthEntity
+            entityName={filter.value}
+            chatContext={chatContext}
+            onSwitchEntity={onSwitchEntity}
+          />
+          <span className={`${prefixCls}-switch-entity-tip`}>
+            (如未匹配到相关{entityAlias}，可点击{entityAlias === '艺人' ? '歌手' : entityAlias}
+            ID切换)
+          </span>
+        </>
      ) : (
        <span className={`${prefixCls}-filter-value`}>{filter.value}</span>
      )}
--- a/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/ParseTip.tsx
@@ -18,6 +18,7 @@ type Props = {
  dimensionFilters: FilterItemType[];
  dateInfo: DateInfoType;
  entityInfo: EntityInfoType;
+  integrateSystem?: string;
  onSelectParseInfo: (parseInfo: ChatContextType) => void;
  onSwitchEntity: (entityId: string) => void;
  onFiltersChange: (filters: FilterItemType[]) => void;
@@ -35,6 +36,7 @@ const ParseTip: React.FC<Props> = ({
  dimensionFilters,
  dateInfo,
  entityInfo,
+  integrateSystem,
  onSelectParseInfo,
  onSwitchEntity,
  onFiltersChange,
@@ -115,14 +117,14 @@ const ParseTip: React.FC<Props> = ({

    return (
      <div className={`${prefixCls}-tip-content`}>
-        {!!agentType && queryMode !== 'DSL' ? (
+        {!!agentType && queryMode !== 'LLM_S2QL' ? (
          <div className={`${prefixCls}-tip-item`}>
            将由{agentType === 'plugin' ? '插件' : '内置'}工具
            <span className={itemValueClass}>{agentName}</span>来解答
          </div>
        ) : (
          <>
-            {(queryMode?.includes('ENTITY') || queryMode === 'DSL') &&
+            {(queryMode?.includes('ENTITY') || queryMode === 'LLM_S2QL') &&
            typeof entityId === 'string' &&
            !!entityAlias &&
            !!entityName ? (
@@ -144,12 +146,14 @@ const ParseTip: React.FC<Props> = ({
                  <div className={itemValueClass}>{metric.name}</div>
                </div>
              )}
-            {['METRIC_GROUPBY', 'METRIC_ORDERBY', 'ENTITY_DETAIL', 'DSL'].includes(queryMode!) &&
+            {['METRIC_GROUPBY', 'METRIC_ORDERBY', 'ENTITY_DETAIL', 'LLM_S2QL'].includes(
+              queryMode!
+            ) &&
              fields &&
              fields.length > 0 && (
                <div className={`${prefixCls}-tip-item`}>
                  <div className={`${prefixCls}-tip-item-name`}>
-                    {queryMode === 'DSL'
+                    {queryMode === 'LLM_S2QL'
                      ? nativeQuery
                        ? '查询字段'
                        : '下钻维度'
@@ -178,12 +182,14 @@ const ParseTip: React.FC<Props> = ({
                  <div className={itemValueClass}>{dimension.value}</div>
                </div>
              ))}
-            {queryMode === 'METRIC_ORDERBY' && aggType && aggType !== 'NONE' && (
-              <div className={`${prefixCls}-tip-item`}>
-                <div className={`${prefixCls}-tip-item-name`}>聚合方式：</div>
-                <div className={itemValueClass}>{AGG_TYPE_MAP[aggType]}</div>
-              </div>
-            )}
+            {(queryMode === 'METRIC_ORDERBY' || queryMode === 'METRIC_MODEL') &&
+              aggType &&
+              aggType !== 'NONE' && (
+                <div className={`${prefixCls}-tip-item`}>
+                  <div className={`${prefixCls}-tip-item-name`}>聚合方式：</div>
+                  <div className={itemValueClass}>{AGG_TYPE_MAP[aggType]}</div>
+                </div>
+              )}
          </>
        )}
      </div>
@@ -218,6 +224,7 @@ const ParseTip: React.FC<Props> = ({
            chatContext={currentParseInfo!}
            entityAlias={entityAlias}
            agentId={agentId}
+            integrateSystem={integrateSystem}
            onFiltersChange={onFiltersChange}
            onSwitchEntity={onSwitchEntity}
            key={filter.name}
@@ -240,11 +247,6 @@ const ParseTip: React.FC<Props> = ({
    <div className={`${prefixCls}-tip`}>
      {getTipNode()}
      {getFiltersNode()}
-      {(!type || queryMode === 'DSL') && entityAlias && entityAlias !== '厂牌' && entityName && (
-        <div className={`${prefixCls}-switch-entity-tip`}>
-          (如未匹配到相关{entityAlias}，可点击{entityAlias === '艺人' ? '歌手' : entityAlias}ID切换)
-        </div>
-      )}
    </div>
  );

--- a/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx
@@ -27,7 +27,7 @@ const SqlItem: React.FC<Props> = ({ integrateSystem, sqlInfo }) => {
    setSqlType('');
  };

-  if (!sqlInfo.llmParseSql && !sqlInfo.logicSql && !sqlInfo.querySql) {
+  if (!sqlInfo.s2QL && !sqlInfo.logicSql && !sqlInfo.querySql) {
    return null;
  }

@@ -44,13 +44,13 @@ const SqlItem: React.FC<Props> = ({ integrateSystem, sqlInfo }) => {
          )}
        </div>
        <div className={`${tipPrefixCls}-content-options`}>
-          {sqlInfo.llmParseSql && (
+          {sqlInfo.s2QL && (
            <div
              className={`${tipPrefixCls}-content-option ${
-                sqlType === 'llmParseSql' ? `${tipPrefixCls}-content-option-active` : ''
+                sqlType === 's2QL' ? `${tipPrefixCls}-content-option-active` : ''
              }`}
              onClick={() => {
-                setSqlType(sqlType === 'llmParseSql' ? '' : 'llmParseSql');
+                setSqlType(sqlType === 's2QL' ? '' : 's2QL');
              }}
            >
              LLM解析SQL
--- a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
@@ -25,6 +25,7 @@ type Props = {
  conversationId?: number;
  modelId?: number;
  agentId?: number;
+  score?: number;
  filter?: any[];
  isLastMessage?: boolean;
  msgData?: MsgDataType;
@@ -33,7 +34,7 @@ type Props = {
  integrateSystem?: string;
  executeItemNode?: React.ReactNode;
  renderCustomExecuteNode?: boolean;
-  onMsgDataLoaded?: (data: MsgDataType, valid: boolean) => void;
+  onMsgDataLoaded?: (data: MsgDataType, valid: boolean, isRefresh?: boolean) => void;
  onUpdateMessageScroll?: () => void;
  onSendMsg?: (msg: string) => void;
 };
@@ -43,6 +44,7 @@ const ChatItem: React.FC<Props> = ({
  conversationId,
  modelId,
  agentId,
+  score,
  filter,
  isLastMessage,
  triggerResize,
@@ -68,8 +70,6 @@ const ChatItem: React.FC<Props> = ({
  const [dateInfo, setDateInfo] = useState<DateInfoType>({} as DateInfoType);
  const [entityInfo, setEntityInfo] = useState<EntityInfoType>({} as EntityInfoType);

-  // const [chartIndex, setChartIndex] = useState(0);
-
  const prefixCls = `${PREFIX_CLS}-item`;

  const updateData = (res: Result<MsgDataType>) => {
@@ -208,9 +208,7 @@ const ChatItem: React.FC<Props> = ({
      const resChatContext = res.data?.chatContext;
      const contextValue = { ...(resChatContext || chatContextValue), queryId };
      const dataValue = { ...res.data, chatContext: contextValue };
-      if (onMsgDataLoaded) {
-        onMsgDataLoaded(dataValue, true);
-      }
+      onMsgDataLoaded?.(dataValue, true, true);
      setData(dataValue);
      setParseInfo(contextValue);
    }
@@ -230,7 +228,6 @@ const ChatItem: React.FC<Props> = ({
    } else {
      getEntityInfo(parseInfoValue);
    }
-    onUpdateMessageScroll?.();
  };

  const onSelectQuestion = (question: SimilarQuestionType) => {
@@ -261,6 +258,7 @@ const ChatItem: React.FC<Props> = ({
            dimensionFilters={dimensionFilters}
            dateInfo={dateInfo}
            entityInfo={entityInfo}
+            integrateSystem={integrateSystem}
            onSelectParseInfo={onSelectParseInfo}
            onSwitchEntity={onSwitchEntity}
            onFiltersChange={onFiltersChange}
@@ -294,11 +292,11 @@ const ChatItem: React.FC<Props> = ({
            />
          )}
        </div>
-        {!isMetricCard && data && (
+        {integrateSystem !== 'showcase' && (
          <Tools
            queryId={parseInfo?.queryId || 0}
-            scoreValue={undefined}
-            isLastMessage={isLastMessage}
+            scoreValue={score}
+            // isLastMessage={isLastMessage}
          />
        )}
      </div>
--- a/webapp/packages/chat-sdk/src/components/ChatItem/style.less
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/style.less
@@ -164,15 +164,6 @@
    line-height: 20px;
  }

-  &-switch-entity-tip {
-    display: flex;
-    align-items: center;
-    column-gap: 6px;
-    color: var(--text-color-fourth);
-    font-size: 13px;
-    font-weight: normal;
-  }
-
  &-switch-entity {
    cursor: pointer;
  }
@@ -372,6 +363,16 @@
    min-width: 100px;
  }

+  &-switch-entity-tip {
+    display: flex;
+    align-items: center;
+    column-gap: 6px;
+    margin-left: 4px;
+    color: var(--text-color-fourth);
+    font-size: 13px;
+    font-weight: normal;
+  }
+
  .ant-select-selector, .ant-input-number-input {
    background-color: #f5f8fb !important;
    border-color: #ececec !important;