feat: Expose the agent's chat window to third parties #1842 (#1897)

### What problem does this PR solve? feat: Expose the agent's chat window to third parties #1842 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2026-01-02 10:42:36 +08:00 · 2024-08-09 18:59:16 +08:00
parent 37be0ff3d3
commit 827042f72b
14 changed files with 289 additions and 357 deletions
--- a/web/src/components/api-service/chat-overview-modal/index.less
+++ b/web/src/components/api-service/chat-overview-modal/index.less
@ -0,0 +1,21 @@
+.chartWrapper {
+  height: 40vh;
+  overflow: auto;
+}
+
+.chartItem {
+  height: 300px;
+  padding: 10px 0 50px;
+}
+
+.chartLabel {
+  display: inline-block;
+  padding-left: 60px;
+  padding-bottom: 20px;
+}
+.linkText {
+  border-radius: 6px;
+  padding: 6px 10px;
+  background-color: #eff8ff;
+  border: 1px;
+}
--- a/web/src/components/api-service/chat-overview-modal/index.tsx
+++ b/web/src/components/api-service/chat-overview-modal/index.tsx
@ -0,0 +1,148 @@
+import LineChart from '@/components/line-chart';
+import { useFetchNextStats } from '@/hooks/chat-hooks';
+import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
+import { IModalProps } from '@/interfaces/common';
+import { IStats } from '@/interfaces/database/chat';
+import { formatDate } from '@/utils/date';
+import { Button, Card, DatePicker, Flex, Modal, Space, Typography } from 'antd';
+import { RangePickerProps } from 'antd/es/date-picker';
+import dayjs from 'dayjs';
+import camelCase from 'lodash/camelCase';
+import ChatApiKeyModal from '../chat-api-key-modal';
+import EmbedModal from '../embed-modal';
+import {
+  usePreviewChat,
+  useSelectChartStatsList,
+  useShowEmbedModal,
+} from '../hooks';
+import styles from './index.less';
+
+const { Paragraph } = Typography;
+const { RangePicker } = DatePicker;
+
+const StatsLineChart = ({ statsType }: { statsType: keyof IStats }) => {
+  const { t } = useTranslate('chat');
+  const chartList = useSelectChartStatsList();
+  const list =
+    chartList[statsType]?.map((x) => ({
+      ...x,
+      xAxis: formatDate(x.xAxis),
+    })) ?? [];
+
+  return (
+    <div className={styles.chartItem}>
+      <b className={styles.chartLabel}>{t(camelCase(statsType))}</b>
+      <LineChart data={list}></LineChart>
+    </div>
+  );
+};
+
+const ChatOverviewModal = ({
+  visible,
+  hideModal,
+  id,
+  name = '',
+  idKey,
+}: IModalProps<any> & { id: string; name?: string; idKey: string }) => {
+  const { t } = useTranslate('chat');
+  const {
+    visible: apiKeyVisible,
+    hideModal: hideApiKeyModal,
+    showModal: showApiKeyModal,
+  } = useSetModalState();
+  const {
+    embedVisible,
+    hideEmbedModal,
+    showEmbedModal,
+    embedToken,
+    errorContextHolder,
+  } = useShowEmbedModal(id, idKey);
+
+  const { pickerValue, setPickerValue } = useFetchNextStats();
+
+  const disabledDate: RangePickerProps['disabledDate'] = (current) => {
+    return current && current > dayjs().endOf('day');
+  };
+
+  const { handlePreview, contextHolder } = usePreviewChat(id, idKey);
+
+  return (
+    <>
+      <Modal
+        title={t('overview')}
+        open={visible}
+        onCancel={hideModal}
+        cancelButtonProps={{ style: { display: 'none' } }}
+        onOk={hideModal}
+        width={'100vw'}
+        okText={t('close', { keyPrefix: 'common' })}
+      >
+        <Flex vertical gap={'middle'}>
+          <Card title={t('backendServiceApi')}>
+            <Flex gap={8} vertical>
+              {t('serviceApiEndpoint')}
+              <Paragraph copyable className={styles.linkText}>
+                {location.origin}
+                /v1/api/
+              </Paragraph>
+            </Flex>
+            <Space size={'middle'}>
+              <Button onClick={showApiKeyModal}>{t('apiKey')}</Button>
+              <a
+                href={
+                  'https://github.com/infiniflow/ragflow/blob/main/docs/references/api.md'
+                }
+                target="_blank"
+                rel="noreferrer"
+              >
+                <Button>{t('apiReference')}</Button>
+              </a>
+            </Space>
+          </Card>
+          <Card title={`${name} Web App`}>
+            <Flex gap={8} vertical>
+              <Space size={'middle'}>
+                <Button onClick={handlePreview}>{t('preview')}</Button>
+                <Button onClick={showEmbedModal}>{t('embedded')}</Button>
+              </Space>
+            </Flex>
+          </Card>
+
+          <Space>
+            <b>{t('dateRange')}</b>
+            <RangePicker
+              disabledDate={disabledDate}
+              value={pickerValue}
+              onChange={setPickerValue}
+              allowClear={false}
+            />
+          </Space>
+          <div className={styles.chartWrapper}>
+            <StatsLineChart statsType={'pv'}></StatsLineChart>
+            <StatsLineChart statsType={'round'}></StatsLineChart>
+            <StatsLineChart statsType={'speed'}></StatsLineChart>
+            <StatsLineChart statsType={'thumb_up'}></StatsLineChart>
+            <StatsLineChart statsType={'tokens'}></StatsLineChart>
+            <StatsLineChart statsType={'uv'}></StatsLineChart>
+          </div>
+        </Flex>
+        {apiKeyVisible && (
+          <ChatApiKeyModal
+            hideModal={hideApiKeyModal}
+            dialogId={id}
+            idKey={idKey}
+          ></ChatApiKeyModal>
+        )}
+        <EmbedModal
+          token={embedToken}
+          visible={embedVisible}
+          hideModal={hideEmbedModal}
+        ></EmbedModal>
+        {contextHolder}
+        {errorContextHolder}
+      </Modal>
+    </>
+  );
+};
+
+export default ChatOverviewModal;