style(web): format code

2025-04-04 12:00:38 +08:00
parent 424424c160
commit 6b79b89dc0
74 changed files with 6413 additions and 3548 deletions
--- a/web/src/pages/Playground/Playground.js
+++ b/web/src/pages/Playground/Playground.js
@@ -1,8 +1,23 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { UserContext } from '../../context/User/index.js';
-import { API, getUserIdFromLocalStorage, showError } from '../../helpers/index.js';
-import { Card, Chat, Input, Layout, Select, Slider, TextArea, Typography, Button, Highlight } from '@douyinfe/semi-ui';
+import {
+  API,
+  getUserIdFromLocalStorage,
+  showError,
+} from '../../helpers/index.js';
+import {
+  Card,
+  Chat,
+  Input,
+  Layout,
+  Select,
+  Slider,
+  TextArea,
+  Typography,
+  Button,
+  Highlight,
+} from '@douyinfe/semi-ui';
 import { SSE } from 'sse';
 import { IconSetting } from '@douyinfe/semi-icons';
 import { StyleContext } from '../../context/Style/index.js';
@@ -12,26 +27,28 @@ import { renderGroupOption, truncateText } from '../../helpers/render.js';
 const roleInfo = {
  user: {
    name: 'User',
-    avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'
+    avatar:
+      'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
  },
  assistant: {
    name: 'Assistant',
-    avatar: 'logo.png'
+    avatar: 'logo.png',
  },
  system: {
    name: 'System',
-    avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'
-  }
-}
+    avatar:
+      'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png',
+  },
+};

 let id = 4;
 function getId() {
-  return `${id++}`
+  return `${id++}`;
 }

 const Playground = () => {
  const { t } = useTranslation();
-  
+
  const defaultMessage = [
    {
      role: 'user',
@@ -44,7 +61,7 @@ const Playground = () => {
      id: '3',
      createAt: 1715676751919,
      content: t('你好，请问有什么可以帮助您的吗？'),
-    }
+    },
  ];

  const [inputs, setInputs] = useState({
@@ -56,7 +73,9 @@ const Playground = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const [userState, userDispatch] = useContext(UserContext);
  const [status, setStatus] = useState({});
-  const [systemPrompt, setSystemPrompt] = useState('You are a helpful assistant. You can help me by answering my questions. You can also ask me questions.');
+  const [systemPrompt, setSystemPrompt] = useState(
+    'You are a helpful assistant. You can help me by answering my questions. You can also ask me questions.',
+  );
  const [message, setMessage] = useState(defaultMessage);
  const [models, setModels] = useState([]);
  const [groups, setGroups] = useState([]);
@@ -99,26 +118,35 @@ const Playground = () => {
    const { success, message, data } = res.data;
    if (success) {
      let localGroupOptions = Object.entries(data).map(([group, info]) => ({
-        label: truncateText(info.desc, "50%"),
+        label: truncateText(info.desc, '50%'),
        value: group,
        ratio: info.ratio,
-        fullLabel: info.desc // 保存完整文本用于tooltip
+        fullLabel: info.desc, // 保存完整文本用于tooltip
      }));

      if (localGroupOptions.length === 0) {
-        localGroupOptions = [{
-          label: t('用户分组'),
-          value: '',
-          ratio: 1
-        }];
+        localGroupOptions = [
+          {
+            label: t('用户分组'),
+            value: '',
+            ratio: 1,
+          },
+        ];
      } else {
        const localUser = JSON.parse(localStorage.getItem('user'));
-        const userGroup = (userState.user && userState.user.group) || (localUser && localUser.group);
-        
+        const userGroup =
+          (userState.user && userState.user.group) ||
+          (localUser && localUser.group);
+
        if (userGroup) {
-          const userGroupIndex = localGroupOptions.findIndex(g => g.value === userGroup);
+          const userGroupIndex = localGroupOptions.findIndex(
+            (g) => g.value === userGroup,
+          );
          if (userGroupIndex > -1) {
-            const userGroupOption = localGroupOptions.splice(userGroupIndex, 1)[0];
+            const userGroupOption = localGroupOptions.splice(
+              userGroupIndex,
+              1,
+            )[0];
            localGroupOptions.unshift(userGroupOption);
          }
        }
@@ -135,7 +163,7 @@ const Playground = () => {
    border: '1px solid var(--semi-color-border)',
    borderRadius: '16px',
    margin: '0px 8px',
-  }
+  };

  const getSystemMessage = () => {
    if (systemPrompt !== '') {
@@ -144,22 +172,22 @@ const Playground = () => {
        id: '1',
        createAt: 1715676751919,
        content: systemPrompt,
-      }
+      };
    }
-  }
+  };

  let handleSSE = (payload) => {
    let source = new SSE('/pg/chat/completions', {
      headers: {
-        "Content-Type": "application/json",
-        "New-Api-User": getUserIdFromLocalStorage(),
+        'Content-Type': 'application/json',
+        'New-Api-User': getUserIdFromLocalStorage(),
      },
-      method: "POST",
+      method: 'POST',
      payload: JSON.stringify(payload),
    });
-    source.addEventListener("message", (e) => {
+    source.addEventListener('message', (e) => {
      // 只有收到 [DONE] 时才结束
-      if (e.data === "[DONE]") {
+      if (e.data === '[DONE]') {
        source.close();
        completeMessage();
        return;
@@ -172,12 +200,12 @@ const Playground = () => {
      }
    });

-    source.addEventListener("error", (e) => {
-      generateMockResponse(e.data)
-      completeMessage('error')
+    source.addEventListener('error', (e) => {
+      generateMockResponse(e.data);
+      completeMessage('error');
    });

-    source.addEventListener("readystatechange", (e) => {
+    source.addEventListener('readystatechange', (e) => {
      if (e.readyState >= 2) {
        if (source.status === undefined) {
          source.close();
@@ -186,55 +214,58 @@ const Playground = () => {
      }
    });
    source.stream();
-  }
+  };

-  const onMessageSend = useCallback((content, attachment) => {
-    console.log("attachment: ", attachment);
-    setMessage((prevMessage) => {
-      const newMessage = [
-        ...prevMessage,
-        {
-          role: 'user',
-          content: content,
-          createAt: Date.now(),
-          id: getId()
-        }
-      ];
+  const onMessageSend = useCallback(
+    (content, attachment) => {
+      console.log('attachment: ', attachment);
+      setMessage((prevMessage) => {
+        const newMessage = [
+          ...prevMessage,
+          {
+            role: 'user',
+            content: content,
+            createAt: Date.now(),
+            id: getId(),
+          },
+        ];

-      // 将 getPayload 移到这里
-      const getPayload = () => {
-        let systemMessage = getSystemMessage();
-        let messages = newMessage.map((item) => {
-          return {
-            role: item.role,
-            content: item.content,
+        // 将 getPayload 移到这里
+        const getPayload = () => {
+          let systemMessage = getSystemMessage();
+          let messages = newMessage.map((item) => {
+            return {
+              role: item.role,
+              content: item.content,
+            };
+          });
+          if (systemMessage) {
+            messages.unshift(systemMessage);
          }
-        });
-        if (systemMessage) {
-          messages.unshift(systemMessage);
-        }
-        return {
-          messages: messages,
-          stream: true,
-          model: inputs.model,
-          group: inputs.group,
-          max_tokens: parseInt(inputs.max_tokens),
-          temperature: inputs.temperature,
+          return {
+            messages: messages,
+            stream: true,
+            model: inputs.model,
+            group: inputs.group,
+            max_tokens: parseInt(inputs.max_tokens),
+            temperature: inputs.temperature,
+          };
        };
-      };

-      // 使用更新后的消息状态调用 handleSSE
-      handleSSE(getPayload());
-      newMessage.push({
-        role: 'assistant',
-        content: '',
-        createAt: Date.now(),
-        id: getId(),
-        status: 'loading'
+        // 使用更新后的消息状态调用 handleSSE
+        handleSSE(getPayload());
+        newMessage.push({
+          role: 'assistant',
+          content: '',
+          createAt: Date.now(),
+          id: getId(),
+          status: 'loading',
+        });
+        return newMessage;
      });
-      return newMessage;
-    });
-  }, [getSystemMessage]);
+    },
+    [getSystemMessage],
+  );

  const completeMessage = useCallback((status = 'complete') => {
    // console.log("Complete Message: ", status)
@@ -244,27 +275,27 @@ const Playground = () => {
      if (lastMessage.status === 'complete' || lastMessage.status === 'error') {
        return prevMessage;
      }
-      return [
-        ...prevMessage.slice(0, -1),
-        { ...lastMessage, status: status }
-      ];
+      return [...prevMessage.slice(0, -1), { ...lastMessage, status: status }];
    });
-  }, [])
+  }, []);

  const generateMockResponse = useCallback((content) => {
    // console.log("Generate Mock Response: ", content);
    setMessage((message) => {
      const lastMessage = message[message.length - 1];
-      let newMessage = {...lastMessage};
-      if (lastMessage.status === 'loading' || lastMessage.status === 'incomplete') {
+      let newMessage = { ...lastMessage };
+      if (
+        lastMessage.status === 'loading' ||
+        lastMessage.status === 'incomplete'
+      ) {
        newMessage = {
          ...newMessage,
          content: (lastMessage.content || '') + content,
-          status: 'incomplete'
-        }
+          status: 'incomplete',
+        };
      }
-      return [ ...message.slice(0, -1), newMessage ]
-    })
+      return [...message.slice(0, -1), newMessage];
+    });
  }, []);

  const SettingsToggle = () => {
@@ -285,34 +316,47 @@ const Playground = () => {
          boxShadow: '2px 0 8px rgba(0, 0, 0, 0.15)',
        }}
        onClick={() => setShowSettings(!showSettings)}
-        theme="solid"
-        type="primary"
+        theme='solid'
+        type='primary'
      />
    );
  };

  function CustomInputRender(props) {
    const { detailProps } = props;
-    const { clearContextNode, uploadNode, inputNode, sendNode, onClick } = detailProps;
+    const { clearContextNode, uploadNode, inputNode, sendNode, onClick } =
+      detailProps;

-    return <div style={{margin: '8px 16px', display: 'flex', flexDirection:'row',
-      alignItems: 'flex-end', borderRadius: 16,padding: 10, border: '1px solid var(--semi-color-border)'}}
-                onClick={onClick}
-    >
-      {/*{uploadNode}*/}
-      {inputNode}
-      {sendNode}
-    </div>
+    return (
+      <div
+        style={{
+          margin: '8px 16px',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'flex-end',
+          borderRadius: 16,
+          padding: 10,
+          border: '1px solid var(--semi-color-border)',
+        }}
+        onClick={onClick}
+      >
+        {/*{uploadNode}*/}
+        {inputNode}
+        {sendNode}
+      </div>
+    );
  }

  const renderInputArea = useCallback((props) => {
-    return (<CustomInputRender {...props} />)
+    return <CustomInputRender {...props} />;
  }, []);

  return (
-    <Layout style={{height: '100%'}}>
+    <Layout style={{ height: '100%' }}>
      {(showSettings || !styleState.isMobile) && (
-        <Layout.Sider style={{ display: styleState.isMobile ? 'block' : 'initial' }}>
+        <Layout.Sider
+          style={{ display: styleState.isMobile ? 'block' : 'initial' }}
+        >
          <Card style={commonOuterStyle}>
            <div style={{ marginTop: 10 }}>
              <Typography.Text strong>{t('分组')}：</Typography.Text>
@@ -390,18 +434,17 @@ const Playground = () => {
                setSystemPrompt(value);
              }}
            />
-
          </Card>
        </Layout.Sider>
      )}
      <Layout.Content>
-        <div style={{height: '100%', position: 'relative'}}>
+        <div style={{ height: '100%', position: 'relative' }}>
          <SettingsToggle />
          <Chat
            chatBoxRenderConfig={{
              renderChatBoxAction: () => {
-                return <div></div>
-              }
+                return <div></div>;
+              },
            }}
            renderInputArea={renderInputArea}
            roleConfig={roleInfo}