labring · FinleyGe · Sep 23, 2025 · Sep 11, 2025 · Sep 18, 2025
diff --git a/packages/web/i18n/en/common.json b/packages/web/i18n/en/common.json
@@ -372,6 +372,8 @@
   "core.chat.feedback.Feedback Close": "Close Feedback",
   "core.chat.feedback.No Content": "User Did Not Provide Specific Feedback Content",
   "core.chat.feedback.Read User dislike": "User Disagrees\nClick to View Content",
+  "core.chat.indicator.no_data": "There is no data yet",
+  "core.chat.table.per_page": "{{num}} per page",
   "core.chat.logs.api": "API Call",
   "core.chat.logs.feishu": "Feishu",
   "core.chat.logs.free_login": "No login link",
@@ -392,6 +394,7 @@
   "core.chat.quote.beforeUpdate": "Before update",
   "core.chat.response.Complete Response": "Complete Response",
   "core.chat.response.Extension model": "Question Optimization Model",
+  "core.chat.response.Fold response": "Fold",
   "core.chat.response.Read complete response": "View Details",
   "core.chat.response.Read complete response tips": "Click to View Detailed Process",
   "core.chat.response.Tool call input tokens": "Tool Call Input Tokens Consumption",

diff --git a/packages/web/i18n/zh-CN/common.json b/packages/web/i18n/zh-CN/common.json
@@ -372,6 +372,8 @@
   "core.chat.feedback.Feedback Close": "关闭反馈",
   "core.chat.feedback.No Content": "用户没有填写具体反馈内容",
   "core.chat.feedback.Read User dislike": "用户表示反对\n点击查看内容",
+  "core.chat.indicator.no_data": "暂时没有该数据",
+  "core.chat.table.per_page": "{{num}} 条/页",
   "core.chat.logs.api": "API 调用",
   "core.chat.logs.feishu": "飞书",
   "core.chat.logs.free_login": "免登录链接",
@@ -392,6 +394,7 @@
   "core.chat.quote.beforeUpdate": "更新前",
   "core.chat.response.Complete Response": "完整响应",
   "core.chat.response.Extension model": "问题优化模型",
+  "core.chat.response.Fold response": "收起",
   "core.chat.response.Read complete response": "查看详情",
   "core.chat.response.Read complete response tips": "点击查看详细流程",
   "core.chat.response.Tool call input tokens": "工具调用输入 Tokens",

diff --git a/packages/web/i18n/zh-Hant/common.json b/packages/web/i18n/zh-Hant/common.json
@@ -372,6 +372,8 @@
   "core.chat.feedback.Feedback Close": "關閉回饋",
   "core.chat.feedback.No Content": "使用者未提供具體回饋內容",
   "core.chat.feedback.Read User dislike": "使用者表示反對\n點選檢視內容",
+  "core.chat.indicator.no_data": "暫時沒有該數據",
+  "core.chat.table.per_page": "{{num}} 筆/頁",
   "core.chat.logs.api": "API 呼叫",
   "core.chat.logs.feishu": "飛書",
   "core.chat.logs.free_login": "免登入連結",
@@ -392,6 +394,7 @@
   "core.chat.quote.beforeUpdate": "更新前",
   "core.chat.response.Complete Response": "完整回應",
   "core.chat.response.Extension model": "問題最佳化模型",
+  "core.chat.response.Fold response": "收起",
   "core.chat.response.Read complete response": "檢視詳細資料",
   "core.chat.response.Read complete response tips": "點選檢視詳細流程",
   "core.chat.response.Tool call input tokens": "工具呼叫輸入 Token 消耗",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/app/package.json b/projects/app/package.json
@@ -29,6 +29,7 @@
     "axios": "^1.12.1",
     "date-fns": "2.30.0",
     "dayjs": "^1.11.7",
+    "dompurify": "^3.2.7",
     "echarts": "5.4.1",
     "echarts-gl": "2.0.9",
     "framer-motion": "9.1.7",
@@ -58,6 +59,7 @@
     "recharts": "^2.15.0",
     "rehype-external-links": "^3.0.0",
     "rehype-katex": "^7.0.0",
+    "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
@@ -68,6 +70,7 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^6.5.1",
+    "@types/dompurify": "^3.2.0",
     "@types/js-yaml": "^4.0.9",
     "@types/jsonwebtoken": "^9.0.3",
     "@types/lodash": "^4.14.191",

diff --git a/projects/app/src/components/Markdown/A.tsx b/projects/app/src/components/Markdown/A.tsx
@@ -23,7 +23,6 @@ import Markdown from '.';
 import { getSourceNameIcon } from '@fastgpt/global/core/dataset/utils';
 import { Types } from 'mongoose';
 import type { OutLinkChatAuthProps } from '@fastgpt/global/support/permission/chat';
-import { useCreation } from 'ahooks';
 
 export type AProps = {
   chatAuthData?: {

diff --git a/projects/app/src/components/Markdown/codeBlock/Divider.tsx b/projects/app/src/components/Markdown/codeBlock/Divider.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+
+const Divider: React.FC = () => {
+  return <Box width="100%" height="1px" bg="gray.200" my={4} mx="auto" />;
+};
+
+export default Divider;
diff --git a/projects/app/src/components/Markdown/codeBlock/IndicatorCard.tsx b/projects/app/src/components/Markdown/codeBlock/IndicatorCard.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { Box, Text, VStack, Flex } from '@chakra-ui/react';
+import { useSafeTranslation } from '@fastgpt/web/hooks/useSafeTranslation';
+
+type IndicatorCardProps = {
+  dataList: {
+    name: string;
+    value: string | number;
+  }[];
+};
+
+const IndicatorCard: React.FC<IndicatorCardProps> = ({ dataList }) => {
+  const { t } = useSafeTranslation();
+  if (!dataList || !Array.isArray(dataList) || dataList.length === 0) {
+    return <Box>No indicator data available</Box>;
+  }
+
+  return (
+    <VStack align="stretch">
+      {dataList.map((indicator, index) => (
+        <Flex align="stretch" w="250px" key={index} gap={1} mt={1}>
+          <Flex w="5px" bg="blue.500"></Flex>
+          <Flex
+            flex="1"
+            borderRadius="md"
+            bg="gray.100"
+            display="flex"
+            flexDirection="column"
+            overflow="hidden"
+          >
+            {/* indicator name */}
+            <Flex w="full">
+              <Text
+                color="gray.800"
+                fontSize="sm"
+                fontWeight="normal"
+                textAlign="right"
+                flex="1"
+                noOfLines={1}
+              >
+                {indicator.name}
+              </Text>
+            </Flex>
+
+            {/* indicator value and unit */}
+            <Flex w="full">
+              <Text
+                color="blue.500"
+                fontSize="lg"
+                fontWeight="bold"
+                textAlign="right"
+                flex="1"
+                noOfLines={1}
+              >
+                {indicator.value || t('common:core.chat.indicator.no_data')}
+              </Text>
+            </Flex>
+          </Flex>
+        </Flex>
+      ))}
+    </VStack>
+  );
+};
+
+export default IndicatorCard;
diff --git a/projects/app/src/components/Markdown/codeBlock/Link.tsx b/projects/app/src/components/Markdown/codeBlock/Link.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Box, Text, Link, Flex } from '@chakra-ui/react';
+
+const LinkBlock: React.FC<{ data: { text: string; url: string } }> = ({ data }) => {
+  const handleClick = () => {
+    window.open(data.url, '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <Box my={4}>
+      <Link
+        onClick={handleClick}
+        cursor="pointer"
+        textDecoration="none"
+        _hover={{ textDecoration: 'none' }}
+      >
+        <Text
+          fontWeight="medium"
+          color="blue.600"
+          _hover={{ color: 'blue.700' }}
+          noOfLines={1}
+          flex="1"
+        >
+          {data.text}
+        </Text>
+      </Link>
+    </Box>
+  );
+};
+
+export default LinkBlock;
diff --git a/projects/app/src/components/Markdown/codeBlock/Table.tsx b/projects/app/src/components/Markdown/codeBlock/Table.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useMemo } from 'react';
+import { Box, Flex, Text, Grid } from '@chakra-ui/react';
+import Icon from '@fastgpt/web/components/common/Icon';
+import MySelect from '@fastgpt/web/components/common/MySelect';
+import { useSafeTranslation } from '@fastgpt/web/hooks/useSafeTranslation';
+
+const TableBlock: React.FC<{ code: string }> = ({ code }) => {
+  const { t } = useSafeTranslation();
+  const tableData = JSON.parse(code);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
+
+  const headers = Object.keys(tableData[0]);
+
+  // calculate paginated data
+  const { paginatedData, totalPages } = useMemo(() => {
+    const total = Math.ceil(tableData.length / perPage);
+    const startIndex = (currentPage - 1) * perPage;
+    const endIndex = startIndex + perPage;
+    const paginated = tableData.slice(startIndex, endIndex);
+
+    return {
+      paginatedData: paginated,
+      totalPages: total
+    };
+  }, [tableData, currentPage, perPage]);
+
+  const handlePrevPage = () => {
+    setCurrentPage((prev) => Math.max(prev - 1, 1));
+  };
+
+  const handleNextPage = () => {
+    setCurrentPage((prev) => Math.min(prev + 1, totalPages));
+  };
+
+  const handlePerPageChange = (value: string) => {
+    setPerPage(Number(value));
+    setCurrentPage(1); // reset to first page
+  };
+
+  return (
+    <Box my={4}>
+      <Flex overflowX="auto">
+        <table style={{ width: '100%', borderCollapse: 'collapse', border: '1px solid #e2e8f0' }}>
+          <thead>
+            <tr style={{ backgroundColor: '#f7fafc' }}>
+              {headers.map((header, index) => (
+                <th
+                  key={index}
+                  style={{
+                    padding: '12px',
+                    border: '1px solid #e2e8f0',
+                    textAlign: 'left',
+                    fontWeight: 'bold',
+                    whiteSpace: 'nowrap'
+                  }}
+                >
+                  {header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {paginatedData.map((row: any, rowIndex: number) => (
+              <tr
+                key={rowIndex}
+                style={{ backgroundColor: rowIndex % 2 === 0 ? '#ffffff' : '#f9f9f9' }}
+              >
+                {headers.map((header, colIndex) => (
+                  <td
+                    key={colIndex}
+                    style={{
+                      padding: '12px',
+                      border: '1px solid #e2e8f0',
+                      whiteSpace: 'nowrap'
+                    }}
+                  >
+                    {row[header] || ''}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Flex>
+
+      <Grid width="full" gridTemplateColumns="1fr auto 1fr" alignItems="center" gap={4}>
+        <Flex gap={1} align="center" gridColumn="2">
+          <Icon
+            name="core/chat/chevronLeft"
+            w="16px"
+            height="16px"
+            cursor={currentPage === 1 ? 'not-allowed' : 'pointer'}
+            opacity={currentPage === 1 ? 0.5 : 1}
+            onClick={currentPage === 1 ? undefined : handlePrevPage}
+          />
+          <Text>
+            {currentPage} / {totalPages}
+          </Text>
+          <Icon
+            name="core/chat/chevronRight"
+            w="16px"
+            height="16px"
+            cursor={currentPage === totalPages ? 'not-allowed' : 'pointer'}
+            opacity={currentPage === totalPages ? 0.5 : 1}
+            onClick={currentPage === totalPages ? undefined : handleNextPage}
+          />
+        </Flex>
+
+        {totalPages > 1 && (
+          <Flex gridColumn="3">
+            <MySelect
+              value={perPage.toString()}
+              onChange={handlePerPageChange}
+              list={[
+                { label: t('common:core.chat.table.per_page', { num: 5 }), value: '5' },
+                {
+                  label: t('common:core.chat.table.per_page', { num: 10 }),
+                  value: '10'
+                },
+                {
+                  label: t('common:core.chat.table.per_page', { num: 20 }),
+                  value: '20'
+                },
+                {
+                  label: t('common:core.chat.table.per_page', { num: 50 }),
+                  value: '50'
+                },
+                {
+                  label: t('common:core.chat.table.per_page', { num: 100 }),
+                  value: '100'
+                }
+              ]}
+            />
+          </Flex>
+        )}
+      </Grid>
+    </Box>
+  );
+};
+
+export default TableBlock;