Perf/combine entity dialogs (#1555)

* feat: combine bot settings and bot log dialogs

* perf: dialog style when creating bot

* perf: bot creation dialog

* feat: combine pipeline dialogs

* perf: ui

* perf: move buttons

* perf: ui layout in pipeline detail dialog

* perf: remove debug button from pipeline card

* perf: open pipeline dialog after creating

* perf: placeholder in send input

* perf: no close dialog when save done

* fix: linter errors

web/src/app/home/bots/components/bot-card/BotCard.tsx

@@ -4,21 +4,15 @@ import { httpClient } from '@/app/infra/http/HttpClient';
 import { Switch } from '@/components/ui/switch';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
 
 export default function BotCard({
   botCardVO,
-  clickLogIconCallback,
   setBotEnableCallback,
 }: {
   botCardVO: BotCardVO;
-  clickLogIconCallback: (id: string) => void;
   setBotEnableCallback: (id: string, enable: boolean) => void;
 }) {
   const { t } = useTranslation();
-  function onClickLogIcon() {
-    clickLogIconCallback(botCardVO.id);
-  }
 
   function setBotEnable(enable: boolean) {
     return httpClient.updateBot(botCardVO.id, {
@@ -93,25 +87,6 @@ export default function BotCard({
               e.stopPropagation();
             }}
           />
-          <Button
-            variant="outline"
-            className="w-auto h-[40px]"
-            onClick={(e) => {
-              onClickLogIcon();
-              e.stopPropagation();
-            }}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              width="48"
-              height="48"
-              fill="currentColor"
-            >
-              <path d="M21 8V20.9932C21 21.5501 20.5552 22 20.0066 22H3.9934C3.44495 22 3 21.556 3 21.0082V2.9918C3 2.45531 3.4487 2 4.00221 2H14.9968L21 8ZM19 9H14V4H5V20H19V9ZM8 7H11V9H8V7ZM8 11H16V13H8V11ZM8 15H16V17H8V15Z"></path>
-            </svg>
-            {t('bots.log')}
-          </Button>
         </div>
       </div>
     </div>

web/src/app/home/bots/components/bot-form/BotForm.tsx

@@ -67,12 +67,14 @@ export default function BotForm({
   onFormCancel,
   onBotDeleted,
   onNewBotCreated,
+  hideButtons = false,
 }: {
   initBotId?: string;
   onFormSubmit: (value: z.infer<ReturnType<typeof getFormSchema>>) => void;
   onFormCancel: () => void;
   onBotDeleted: () => void;
   onNewBotCreated: (botId: string) => void;
+  hideButtons?: boolean;
 }) {
   const { t } = useTranslation();
   const formSchema = getFormSchema(t);
@@ -282,7 +284,7 @@ export default function BotForm({
         })
         .finally(() => {
           setIsLoading(false);
-          form.reset();
+          // form.reset();
           // dynamicForm.resetFields();
         });
     } else {
@@ -314,8 +316,6 @@ export default function BotForm({
           // dynamicForm.resetFields();
         });
     }
-    setShowDynamicForm(false);
-    console.log('set loading', false);
   }
 
   function deleteBot() {
@@ -365,6 +365,7 @@ export default function BotForm({
 
       <Form {...form}>
         <form
+          id="bot-form"
           onSubmit={form.handleSubmit(onDynamicFormSubmit)}
           className="space-y-8"
         >
@@ -527,42 +528,44 @@ export default function BotForm({
             )}
           </div>
 
-          <div className="sticky bottom-0 left-0 right-0 bg-background border-t p-4 mt-4">
-            <div className="flex justify-end gap-2">
-              {!initBotId && (
-                <Button
-                  type="submit"
-                  onClick={form.handleSubmit(onDynamicFormSubmit)}
-                >
-                  {t('common.submit')}
-                </Button>
-              )}
-              {initBotId && (
-                <>
+          {!hideButtons && (
+            <div className="sticky bottom-0 left-0 right-0 bg-background border-t p-4 mt-4">
+              <div className="flex justify-end gap-2">
+                {!initBotId && (
                   <Button
-                    type="button"
-                    variant="destructive"
-                    onClick={() => setShowDeleteConfirmModal(true)}
-                  >
-                    {t('common.delete')}
-                  </Button>
-                  <Button
-                    type="button"
+                    type="submit"
                     onClick={form.handleSubmit(onDynamicFormSubmit)}
                   >
-                    {t('common.save')}
+                    {t('common.submit')}
                   </Button>
-                </>
-              )}
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => onFormCancel()}
-              >
-                {t('common.cancel')}
-              </Button>
+                )}
+                {initBotId && (
+                  <>
+                    <Button
+                      type="button"
+                      variant="destructive"
+                      onClick={() => setShowDeleteConfirmModal(true)}
+                    >
+                      {t('common.delete')}
+                    </Button>
+                    <Button
+                      type="button"
+                      onClick={form.handleSubmit(onDynamicFormSubmit)}
+                    >
+                      {t('common.save')}
+                    </Button>
+                  </>
+                )}
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => onFormCancel()}
+                >
+                  {t('common.cancel')}
+                </Button>
+              </div>
             </div>
-          </div>
+          )}
         </form>
       </Form>
     </div>

web/src/app/home/bots/components/bot-log/BotLogManager.ts

@@ -0,0 +1,63 @@
+import { httpClient } from '@/app/infra/http/HttpClient';
+import {
+  BotLog,
+  GetBotLogsResponse,
+} from '@/app/infra/http/requestParam/bots/GetBotLogsResponse';
+
+export class BotLogManager {
+  private botId: string;
+  private callbacks: ((_: BotLog[]) => void)[] = [];
+  private intervalIds: number[] = [];
+
+  constructor(botId: string) {
+    this.botId = botId;
+  }
+
+  startListenServerPush() {
+    const timerNumber = setInterval(() => {
+      this.getLogList(-1, 50).then((response) => {
+        this.callbacks.forEach((callback) =>
+          callback(this.parseResponse(response)),
+        );
+      });
+    }, 3000);
+    this.intervalIds.push(Number(timerNumber));
+  }
+
+  stopServerPush() {
+    this.intervalIds.forEach((id) => clearInterval(id));
+    this.intervalIds = [];
+  }
+
+  subscribeLogPush(callback: (_: BotLog[]) => void) {
+    if (!this.callbacks.includes(callback)) {
+      this.callbacks.push(callback);
+    }
+  }
+
+  dispose() {
+    this.callbacks = [];
+  }
+
+  /**
+   * 获取日志页的基本信息
+   */
+  private getLogList(next: number, count: number = 20) {
+    return httpClient.getBotLogs(this.botId, {
+      from_index: next,
+      max_count: count,
+    });
+  }
+
+  async loadFirstPage() {
+    return this.parseResponse(await this.getLogList(-1, 10));
+  }
+
+  async loadMore(position: number, total: number) {
+    return this.parseResponse(await this.getLogList(position, total));
+  }
+
+  private parseResponse(httpResponse: GetBotLogsResponse): BotLog[] {
+    return httpResponse.logs;
+  }
+}

web/src/app/home/bots/components/bot-log/view/BotLogCard.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { BotLog } from '@/app/infra/http/requestParam/bots/GetBotLogsResponse';
+import styles from './botLog.module.css';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { PhotoProvider } from 'react-photo-view';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+
+export function BotLogCard({ botLog }: { botLog: BotLog }) {
+  const { t } = useTranslation();
+  const baseURL = httpClient.getBaseUrl();
+
+  function formatTime(timestamp: number) {
+    const now = new Date();
+    const date = new Date(timestamp * 1000);
+
+    // 获取各个时间部分
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1; // 月份从0开始，需要+1
+    const day = date.getDate();
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+
+    // 判断时间范围
+    const isToday = now.toDateString() === date.toDateString();
+    const isYesterday =
+      new Date(now.setDate(now.getDate() - 1)).toDateString() ===
+      date.toDateString();
+    const isThisYear = now.getFullYear() === year;
+
+    if (isToday) {
+      return `${hours}:${minutes}`; // 今天的消息：小时:分钟
+    } else if (isYesterday) {
+      return `${t('bots.yesterday')} ${hours}:${minutes}`; // 昨天的消息：昨天 小时:分钟
+    } else if (isThisYear) {
+      return t('bots.dateFormat', { month, day }); // 本年消息：x月x日
+    } else {
+      return t('bots.earlier'); // 更早的消息：更久之前
+    }
+  }
+
+  function getSubChatId(str: string) {
+    const strArr = str.split('');
+    return strArr;
+  }
+  return (
+    <div className={`${styles.botLogCardContainer}`}>
+      {/* 头部标签，时间 */}
+      <div className={`${styles.cardTitleContainer}`}>
+        <div className={`flex flex-row gap-4`}>
+          <div className={`${styles.tag}`}>{botLog.level}</div>
+          {botLog.message_session_id && (
+            <div
+              className={`${styles.tag} ${styles.chatTag}`}
+              onClick={() => {
+                navigator.clipboard
+                  .writeText(botLog.message_session_id)
+                  .then(() => {
+                    toast.success(t('common.copySuccess'));
+                  });
+              }}
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 1024 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                p-id="1664"
+                width="20"
+                height="20"
+                fill="currentColor"
+              >
+                <path
+                  d="M96.1 575.7a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z"
+                  p-id="1665"
+                  fill="currentColor"
+                ></path>
+                <path
+                  d="M742.1 450.7l-269.5-2.1c-14.3-0.1-26 13.8-26 31s11.7 31.3 26 31.4l269.5 2.1c14.3 0.1 26-13.8 26-31s-11.7-31.3-26-31.4zM742.1 577.7l-269.5-2.1c-14.3-0.1-26 13.8-26 31s11.7 31.3 26 31.4l269.5 2.1c14.3 0.2 26-13.8 26-31s-11.7-31.3-26-31.4z"
+                  p-id="1666"
+                  fill="currentColor"
+                ></path>
+                <path
+                  d="M736.1 63.9H417c-70.4 0-128 57.6-128 128h-64.9c-70.4 0-128 57.6-128 128v128c-0.1 17.7 14.4 32 32.2 32 17.8 0 32.2-14.4 32.2-32.1V320c0-35.2 28.8-64 64-64H289v447.8c0 70.4 57.6 128 128 128h255.1c-0.1 35.2-28.8 63.8-64 63.8H224.5c-35.2 0-64-28.8-64-64V703.5c0-17.7-14.4-32.1-32.2-32.1-17.8 0-32.3 14.4-32.3 32.1v128.3c0 70.4 57.6 128 128 128h384.1c70.4 0 128-57.6 128-128h65c70.4 0 128-57.6 128-128V255.9l-193-192z m0.1 63.4l127.7 128.3H800c-35.2 0-64-28.8-64-64v-64.3h0.2z m64 641H416.1c-35.2 0-64-28.8-64-64v-513c0-35.2 28.8-64 64-64H671V191c0 70.4 57.6 128 128 128h65.2v385.3c0 35.2-28.8 64-64 64z"
+                  p-id="1667"
+                  fill="currentColor"
+                ></path>
+              </svg>
+              {/* 会话ID */}
+
+              <span className={`${styles.chatId}`}>
+                {getSubChatId(botLog.message_session_id)}
+              </span>
+            </div>
+          )}
+        </div>
+        <div>{formatTime(botLog.timestamp)}</div>
+      </div>
+      <div className={`${styles.cardTitleContainer} ${styles.cardText}`}>
+        {botLog.text}
+      </div>
+      <PhotoProvider className={``}>
+        <div className={`w-50 mt-2`}>
+          {botLog.images.map((item) => (
+            <img
+              key={item}
+              src={`${baseURL}/api/v1/files/image/${item}`}
+              alt=""
+            />
+          ))}
+        </div>
+      </PhotoProvider>
+    </div>
+  );
+}

web/src/app/home/bots/components/bot-log/view/BotLogListComponent.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { BotLogManager } from '@/app/home/bots/components/bot-log/BotLogManager';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { BotLog } from '@/app/infra/http/requestParam/bots/GetBotLogsResponse';
+import { BotLogCard } from '@/app/home/bots/components/bot-log/view/BotLogCard';
+import styles from './botLog.module.css';
+import { Switch } from '@/components/ui/switch';
+import { debounce } from 'lodash';
+import { useTranslation } from 'react-i18next';
+
+export function BotLogListComponent({ botId }: { botId: string }) {
+  const { t } = useTranslation();
+  const manager = useRef(new BotLogManager(botId)).current;
+  const [botLogList, setBotLogList] = useState<BotLog[]>([]);
+  const [autoFlush, setAutoFlush] = useState(true);
+  const listContainerRef = useRef<HTMLDivElement>(null);
+  const botLogListRef = useRef<BotLog[]>(botLogList);
+
+  useEffect(() => {
+    initComponent();
+    return () => {
+      onDestroy();
+    };
+  }, []);
+
+  useEffect(() => {
+    botLogListRef.current = botLogList;
+  }, [botLogList]);
+
+  // 观测自动刷新状态
+  useEffect(() => {
+    if (autoFlush) {
+      manager.startListenServerPush();
+    } else {
+      manager.stopServerPush();
+    }
+    return () => {
+      manager.stopServerPush();
+    };
+  }, [autoFlush]);
+
+  function initComponent() {
+    // 订阅日志推送
+    manager.subscribeLogPush(handleBotLogPush);
+    // 加载第一页日志
+    manager.loadFirstPage().then((response) => {
+      setBotLogList(response.reverse());
+    });
+    // 监听滚动
+    listenScroll();
+  }
+
+  function onDestroy() {
+    manager.dispose();
+    removeScrollListener();
+  }
+
+  function listenScroll() {
+    if (!listContainerRef.current) {
+      return;
+    }
+    const list = listContainerRef.current;
+    list.addEventListener('scroll', handleScroll);
+  }
+
+  function removeScrollListener() {
+    if (!listContainerRef.current) {
+      return;
+    }
+    const list = listContainerRef.current;
+    list.removeEventListener('scroll', handleScroll);
+  }
+
+  function loadMore() {
+    // 加载更多日志
+    const list = botLogListRef.current;
+    const lastSeq = list[list.length - 1].seq_id;
+    if (lastSeq === 0) {
+      return;
+    }
+    manager.loadMore(lastSeq - 1, 10).then((response) => {
+      setBotLogList([...list, ...response.reverse()]);
+    });
+  }
+
+  function handleBotLogPush(response: BotLog[]) {
+    setBotLogList(response.reverse());
+  }
+
+  const handleScroll = useCallback(
+    debounce(() => {
+      if (!listContainerRef.current) return;
+
+      const { scrollTop, scrollHeight, clientHeight } =
+        listContainerRef.current;
+      const isBottom = scrollTop + clientHeight >= scrollHeight - 5;
+      const isTop = scrollTop === 0;
+
+      if (isBottom) {
+        setAutoFlush(false);
+        loadMore();
+      }
+      if (isTop) {
+        setAutoFlush(true);
+      }
+      if (!isTop && !isBottom) {
+        setAutoFlush(false);
+      }
+    }, 300), // 防抖延迟 300ms
+    [botLogList], // 依赖项为空
+  );
+
+  return (
+    <div className={`${styles.botLogListContainer}`} ref={listContainerRef}>
+      <div className={`${styles.listHeader}`}>
+        <div className={'mr-2'}>{t('bots.enableAutoRefresh')}</div>
+        <Switch checked={autoFlush} onCheckedChange={(e) => setAutoFlush(e)} />
+      </div>
+
+      {botLogList.map((botLog) => {
+        return <BotLogCard botLog={botLog} key={botLog.seq_id} />;
+      })}
+    </div>
+  );
+}

web/src/app/home/bots/components/bot-log/view/botLog.module.css

@@ -0,0 +1,68 @@
+.botLogListContainer {
+  width: 100%;
+  min-height: 10rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  overflow-y: scroll;
+}
+
+.botLogCardContainer {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+  border: 1px solid #cbd5e1;
+  padding: 1.2rem;
+  margin-bottom: 1rem;
+  cursor: pointer;
+}
+
+.listHeader {
+  width: 100%;
+  height: 2.5rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.tag {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.2rem;
+  height: 1.5rem;
+  padding: 0.5rem;
+  border-radius: 0.4rem;
+  background-color: #a5d8ff;
+  color: #ffffff;
+  max-width: 16rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chatTag {
+  color: #626262;
+  background-color: #d1d1d1;
+}
+
+.chatId {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cardTitleContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cardText {
+  margin-top: 0.4rem;
+  color: #64748b;
+}