Feat: Add the user_id field to the agent log table and the embedded page. (#13596)

### What problem does this PR solve? Feat: Add the `user_id` field to the agent log table and the embedded page. ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2026-03-15 20:07:30 +08:00 · 2026-03-13 19:06:18 +08:00
parent cc7e94ffb6
commit cb49cd30c4
6 changed files with 63 additions and 23 deletions
--- a/web/.eslintrc.cjs
+++ b/web/.eslintrc.cjs
@ -14,9 +14,6 @@ module.exports = {
      jsx: true,
    },
  },
-  includes: [
-    './src',
-  ],
  settings: {
    react: {
      version: 'detect',
--- a/web/src/components/embed-dialog/index.tsx
+++ b/web/src/components/embed-dialog/index.tsx
@ -24,20 +24,23 @@ import {
  LanguageAbbreviationMap,
  ThemeEnum,
 } from '@/constants/common';
-import { useTranslate } from '@/hooks/common-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { Routes } from '@/routes';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { isEmpty, trim } from 'lodash';
 import { ExternalLink } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import {
  oneDark,
  oneLight,
 } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { z } from 'zod';
+import { RAGFlowFormItem } from '../ragflow-form';
 import { useIsDarkTheme } from '../theme-provider';
+import { Input } from '../ui/input';

 const FormSchema = z.object({
  visibleAvatar: z.boolean(),
@ -46,6 +49,7 @@ const FormSchema = z.object({
  embedType: z.enum(['fullscreen', 'widget']),
  enableStreaming: z.boolean(),
  theme: z.enum([ThemeEnum.Light, ThemeEnum.Dark]),
+  userId: z.string().optional(),
 });

 type IProps = IModalProps<any> & {
@ -63,7 +67,7 @@ function EmbedDialog({
  isAgent,
  visible,
 }: IProps) {
-  const { t } = useTranslate('chat');
+  const { t } = useTranslation();
  const isDarkTheme = useIsDarkTheme();

  const form = useForm<z.infer<typeof FormSchema>>({
@ -95,6 +99,7 @@ function EmbedDialog({
      embedType,
      enableStreaming,
      theme,
+      userId,
    } = values;
    const baseRoute =
      embedType === 'widget'
@ -124,6 +129,9 @@ function EmbedDialog({
    if (theme && embedType === 'fullscreen') {
      src.searchParams.append('theme', theme);
    }
+    if (!isEmpty(trim(userId))) {
+      src.searchParams.append('userId', userId!);
+    }

    return src.toString();
  }, [beta, from, token, values]);
@ -175,9 +183,7 @@ window.addEventListener('message',e=>{
    <Dialog open={visible} onOpenChange={hideModal}>
      <DialogContent>
        <DialogHeader>
-          <DialogTitle>
-            {t('embedIntoSite', { keyPrefix: 'common' })}
-          </DialogTitle>
+          <DialogTitle>{t('common.embedIntoSite')}</DialogTitle>
        </DialogHeader>

        <section className="w-full overflow-auto space-y-5 text-sm text-text-secondary">
@ -253,7 +259,7 @@ window.addEventListener('message',e=>{
                name="visibleAvatar"
                render={({ field }) => (
                  <FormItem>
-                    <FormLabel>{t('avatarHidden')}</FormLabel>
+                    <FormLabel>{t('chat.avatarHidden')}</FormLabel>
                    <FormControl>
                      <Switch
                        checked={field.value}
@ -303,7 +309,7 @@ window.addEventListener('message',e=>{
                name="locale"
                render={({ field }) => (
                  <FormItem>
-                    <FormLabel>{t('locale')}</FormLabel>
+                    <FormLabel>{t('chat.locale')}</FormLabel>
                    <FormControl>
                      <SelectWithSearch
                        {...field}
@ -314,10 +320,13 @@ window.addEventListener('message',e=>{
                  </FormItem>
                )}
              />
+              <RAGFlowFormItem name="userId" label={t('flow.userId')}>
+                <Input></Input>
+              </RAGFlowFormItem>
            </form>
          </Form>
          <div>
-            <span>{t('embedCode', { keyPrefix: 'search' })}</span>
+            <span>{t('search.embedCode')}</span>
            <div>
              <SyntaxHighlighter
                className="max-h-[350px] overflow-auto scrollbar-auto"
@ -334,7 +343,7 @@ window.addEventListener('message',e=>{
            variant="secondary"
          >
            <ExternalLink className="mr-2 h-4 w-4" />
-            {t('openInNewTab', { keyPrefix: 'common' })}
+            {t('common.openInNewTab')}
          </Button>
          <div className=" font-medium mt-4 mb-1">
            {t(isAgent ? 'flow' : 'chat', { keyPrefix: 'header' })}
@ -354,7 +363,7 @@ window.addEventListener('message',e=>{
            target="_blank"
            rel="noreferrer"
          >
-            {t('howUseId', { keyPrefix: isAgent ? 'flow' : 'chat' })}
+            {t(`${isAgent ? 'flow' : 'chat'}.howUseId`)}
          </a>
        </section>
      </DialogContent>
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@ -1844,7 +1844,7 @@ Example: Virtual Hosted Style`,
      dbType: 'Database type',
      database: 'Database',
      username: 'Username',
-      userId: 'User id',
+      userId: 'User ID',
      host: 'Host',
      port: 'Port',
      password: 'Password',
--- a/web/src/pages/agent/chat/use-send-agent-message.ts
+++ b/web/src/pages/agent/chat/use-send-agent-message.ts
@ -26,7 +26,7 @@ import {
  useRef,
  useState,
 } from 'react';
-import { useParams } from 'react-router';
+import { useParams, useSearchParams } from 'react-router';
 import { v4 as uuid } from 'uuid';
 import { BeginId } from '../constant';
 import { AgentChatLogContext } from '../context';
@ -272,6 +272,10 @@ export const useSendAgentMessage = ({
    removeFile,
  } = useSetUploadResponseData();

+  const [searchParams] = useSearchParams();
+
+  const userId = searchParams.get('userId');
+
  const { stopMessage } = useStopMessage();

  const stopConversation = useCallback(() => {
@ -315,6 +319,10 @@ export const useSendAgentMessage = ({
        if (releaseMode) {
          params.release = releaseMode;
        }
+
+        if (userId) {
+          params.user_id = userId;
+        }
      }

      try {
@ -341,12 +349,13 @@ export const useSendAgentMessage = ({
      beginParams,
      uploadResponseList,
      sessionId,
+      releaseMode,
+      userId,
      send,
      clearUploadResponseList,
      setValue,
      removeLatestMessage,
      refetch,
-      releaseMode,
    ],
  );

--- a/web/src/pages/agent/hooks/use-send-shared-message.ts
+++ b/web/src/pages/agent/hooks/use-send-shared-message.ts
@ -32,8 +32,7 @@ interface SharedChatSearchParams {
 export const useGetSharedChatSearchParams = () => {
  const [searchParams] = useSearchParams();
  const data = Object.fromEntries(
-    searchParams
-      .entries()
+    Array.from(searchParams.entries())
      .filter(([key]) => key.startsWith(DATA_PREFIX))
      .map(([key, value]) => [key.replace(DATA_PREFIX, ''), value]),
  );
@ -74,7 +73,7 @@ export const useSendNextSharedMessage = (
    showModal: showParameterDialog,
  } = useSetModalState();

-  const ret = useSendAgentMessage({
+  const { handlePressEnter, ...ret } = useSendAgentMessage({
    url,
    addEventList,
    beginParams: params,
@ -100,6 +99,10 @@ export const useSendNextSharedMessage = (
    [hideParameterDialog, isTaskMode, ret],
  );

+  const onPressEnter = useCallback(() => {
+    handlePressEnter();
+  }, [handlePressEnter]);
+
  const runTask = useCallback(() => {
    if (
      isTaskMode &&
@ -124,5 +127,6 @@ export const useSendNextSharedMessage = (
    hideParameterDialog,
    showParameterDialog,
    ok,
+    handlePressEnter: onPressEnter,
  };
 };
--- a/web/src/pages/agents/agent-log-page.tsx
+++ b/web/src/pages/agents/agent-log-page.tsx
@ -8,6 +8,7 @@ import {
  BreadcrumbPage,
  BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
+import { Button } from '@/components/ui/button';
 import { SearchInput } from '@/components/ui/input';
 import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import { Spin } from '@/components/ui/spin';
@ -20,6 +21,7 @@ import {
 import { IReferenceObject } from '@/interfaces/database/chat';
 import { useQueryClient } from '@tanstack/react-query';
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
 import { DateRange } from '../../components/originui/calendar/index';
 import {
@ -44,6 +46,7 @@ const getEndOfToday = (): Date => {
  return today;
 };
 const AgentLogPage: React.FC = () => {
+  const { t } = useTranslation();
  const { navigateToAgents, navigateToAgent } = useNavigatePage();
  const { flowDetail: agentDetail } = useFetchDataOnMount();
  const { id: canvasId } = useParams();
@ -58,17 +61,24 @@ const AgentLogPage: React.FC = () => {
    page_size: 10,
  };
  const [searchParams, setSearchParams] = useState(init);
+
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
+    {
+      title: 'User ID',
+      dataIndex: 'user_id',
+      key: 'user_id',
+      render: (text: string) => <span>{text}</span>,
+    },
    {
      title: 'Title',
      dataIndex: 'title',
      key: 'title',
-      render: (text, record: IAgentLogResponse) => (
+      render: (_text: string, record: IAgentLogResponse) => (
        <span>
          {record?.message?.length ? record?.message[0]?.content : ''}
        </span>
@ -78,7 +88,7 @@ const AgentLogPage: React.FC = () => {
      title: 'State',
      dataIndex: 'state',
      key: 'state',
-      render: (text, record: IAgentLogResponse) => (
+      render: (_text: string, record: IAgentLogResponse) => (
        <div
          className="size-2 rounded-full"
          style={{ backgroundColor: record.errors ? 'red' : 'green' }}
@ -102,6 +112,11 @@ const AgentLogPage: React.FC = () => {
      key: 'create_date',
      sortable: true,
    },
+    {
+      title: 'Version',
+      dataIndex: 'version',
+      key: 'version',
+    },
  ];

  const { data: logData, loading } = useFetchAgentLog(searchParams);
@ -231,6 +246,7 @@ const AgentLogPage: React.FC = () => {

          <div className="flex justify-end space-x-2 mb-4 text-foreground">
            <div className="flex items-center space-x-2">
+              <Button>{t('flow.export')}</Button>
              <span>ID/Title</span>
              <SearchInput
                value={keywords}
@ -319,8 +335,13 @@ const AgentLogPage: React.FC = () => {
                    {columns.map((column) => (
                      <TableCell key={column.dataIndex}>
                        {column.render
-                          ? column.render(item[column.dataIndex], item)
-                          : item[column.dataIndex]}
+                          ? column.render(
+                              item[column.dataIndex as keyof IAgentLogResponse],
+                              item,
+                            )
+                          : (item[
+                              column.dataIndex as keyof typeof item
+                            ] as string)}
                      </TableCell>
                    ))}
                  </TableRow>