feat: event log of bots (#1441)

* feat: basic arch of event log

* feat: complete event log framework

* fix: bad struct in bot log api

* feat: add event logging to all platform adapters

Co-Authored-By: wangcham233@gmail.com <651122857@qq.com>

* feat: add event logging to client classes

Co-Authored-By: wangcham233@gmail.com <651122857@qq.com>

* refactor: bot log getting api

* perf: logger for aiocqhttp and gewechat

* fix: add ignored logger in dingtalk

* fix: seq id bug in log getting

* feat: add logger in dingtalk,QQ official,Slack, wxoa

* feat: add logger for wecom

* feat: add logger for wecomcs

* perf(event logger): image processing

* 完成机器人日志的前端部分 (#1479)

* feat: webui  bot log framework done

* feat: bot log complete

* perf(bot-log): style

* chore: fix incompleted i18n

* feat: support message session copy

* fix: filter and badge text

* perf: styles

* feat: add bot toggle switch in bot card

* fix: linter errors

---------

Co-authored-by: Junyan Qin <rockchinq@gmail.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: wangcham233@gmail.com <651122857@qq.com>
Co-authored-by: HYana <65863826+KaedeSAMA@users.noreply.github.com>

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

@@ -1,7 +1,34 @@
 import { BotCardVO } from '@/app/home/bots/components/bot-card/BotCardVO';
 import styles from './botCard.module.css';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { Switch } from '@/components/ui/switch';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+
+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, {
+      name: botCardVO.name,
+      description: botCardVO.description,
+      adapter: botCardVO.adapter,
+      adapter_config: botCardVO.adapterConfig,
+      enable: enable,
+    });
+  }
 
-export default function BotCard({ botCardVO }: { botCardVO: BotCardVO }) {
   return (
     <div className={`${styles.cardContainer}`}>
       <div className={`${styles.iconBasicInfoContainer}`}>
@@ -47,6 +74,44 @@ export default function BotCard({ botCardVO }: { botCardVO: BotCardVO }) {
             </span>
           </div>
         </div>
+
+        <div className={`${styles.botOperationContainer}`}>
+          <Switch
+            checked={botCardVO.enable}
+            onCheckedChange={(e) => {
+              setBotEnable(e)
+                .then(() => {
+                  setBotEnableCallback(botCardVO.id, e);
+                })
+                .catch((err) => {
+                  console.error(err);
+                  toast.error(t('bots.setBotEnableError'));
+                });
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          />
+          <div
+            className={`${styles.botLogsIcon}`}
+            onClick={(e) => {
+              onClickLogIcon();
+              e.stopPropagation();
+            }}
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-[24px] h-[24px] z-10"
+            >
+              <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"
+                fill="#9A9A9A"
+              />
+            </svg>
+          </div>
+        </div>
       </div>
     </div>
   );

web/src/app/home/bots/components/bot-card/BotCardVO.ts

@@ -3,8 +3,11 @@ export interface IBotCardVO {
   iconURL: string;
   name: string;
   description: string;
+  adapter: string;
   adapterLabel: string;
+  adapterConfig: object;
   usePipelineName: string;
+  enable: boolean;
 }
 
 export class BotCardVO implements IBotCardVO {
@@ -12,15 +15,21 @@ export class BotCardVO implements IBotCardVO {
   iconURL: string;
   name: string;
   description: string;
+  adapter: string;
   adapterLabel: string;
+  adapterConfig: object;
   usePipelineName: string;
+  enable: boolean;
 
   constructor(props: IBotCardVO) {
     this.id = props.id;
     this.iconURL = props.iconURL;
     this.name = props.name;
     this.description = props.description;
+    this.adapter = props.adapter;
+    this.adapterConfig = props.adapterConfig;
     this.adapterLabel = props.adapterLabel;
     this.usePipelineName = props.usePipelineName;
+    this.enable = props.enable;
   }
 }

web/src/app/home/bots/components/bot-card/botCard.module.css

@@ -19,7 +19,6 @@
   flex-direction: row;
   gap: 0.8rem;
   user-select: none;
-  /* background-color: aqua; */
 }
 
 .iconImage {
@@ -30,10 +29,10 @@
 }
 
 .basicInfoContainer {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
-  min-width: 0;
   width: 100%;
 }
 
@@ -104,4 +103,14 @@
   font-size: 1.4rem;
   font-weight: bold;
   max-width: 100%;
+}
+
+.botOperationContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+  height: 100%;
+  width: 3rem;
+  gap: 0.4rem;
 }