refactor: refactor OSS-GPT

package.json

@@ -22,7 +22,6 @@
     "@ant-design/icons": "^5.4.0",
     "@ant-design/pro-chat": "^1.9.0",
     "@ant-design/pro-editor": "^1.3.0",
-    "@hot-loader/react-dom": "^17.0.2",
     "@types/chrome": "^0.0.203",
     "@types/dompurify": "^3.0.5",
     "@types/react-copy-to-clipboard": "^5.0.7",
@@ -50,7 +49,6 @@
     "openai": "^4.60.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-chat-widget": "^3.1.4",
     "react-hot-loader": "^4.13.0",
     "react-i18next": "^14.1.2",
     "react-modal": "3.15.1",
@@ -68,8 +66,8 @@
     "@types/jest": "^27.4.0",
     "@types/jquery": "^3.5.13",
     "@types/lodash-es": "^4.17.8",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^18.2.8",
+    "@types/react-dom": "^18.0.5",
     "@types/react-modal": "^3.13.1",
     "babel-loader": "^8.2.3",
     "chrome-webstore-upload": "^1.0.0",
@@ -95,13 +93,13 @@
     "terser-webpack-plugin": "^5.3.1",
     "ts-loader": "^9.2.6",
     "type-fest": "^3.3.0",
-    "typescript": "^4.8.3",
+    "typescript": "^5",
     "webpack": "^5.94.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.3.1"
   },
   "resolutions": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0"
+    "@types/react": "^18.2.8",
+    "@types/react-dom": "^18.0.5"
   }
 }

src/helpers/LLM-info.ts

@@ -0,0 +1,15 @@
+export const saveLLMInfo = (baseUrl: string, apiKey: string, modelName: string) => {
+  localStorage.setItem('baseUrl', baseUrl);
+  localStorage.setItem('apiKey', apiKey);
+  localStorage.setItem('modelName', modelName);
+};
+export const getLLMInfo = () => {
+  const baseUrl = localStorage.getItem('baseUrl') || '';
+  const apiKey = localStorage.getItem('apiKey') || '';
+  const modelName = localStorage.getItem('modelName') || '';
+  return {
+    baseUrl,
+    apiKey,
+    modelName,
+  };
+};

src/helpers/eventEmitter.ts

@@ -0,0 +1,3 @@
+import { EventEmitter } from 'events';
+const eventEmitter = new EventEmitter();
+export default eventEmitter;

src/helpers/get-repo-info.ts

@@ -31,3 +31,6 @@ export async function isPublicRepo() {
 export async function isPublicRepoWithMeta() {
   return (await isPublicRepo()) && (await metaStore.has(getRepoName()));
 }
+export function getUsername() {
+  return pageDetect.utils.getUsername();
+}

src/locales/en/translation.json

@@ -96,5 +96,16 @@
   "github_token_error_empty": "Token cannot be empty",
   "github_token_success_save": "Token saved successfully",
   "github_token_success_valid": "Token is valid. Username: {{username}}",
-  "github_token_error_invalid": "Invalid token or request failed"
+  "github_token_error_invalid": "Invalid token or request failed",
+  "oss_gpt_starters_introduce": "Introduce yourself",
+  "oss_gpt_hello_message": "Hello 👋 , I am an intelligent Q&A robot from X-lab, you can ask me questions. For example:",
+  "oss_gpt_llm_info_error": "The configuration information is incorrect. Please confirm again and enter the correct configuration information.",
+  "oss_gpt_model_name": "Model Name",
+  "oss_gpt_model_name_rule_message": "Please enter Model Name!",
+  "oss_gpt_base_url": "Base Url",
+  "oss_gpt_base_url_rule_message": "Please enter Base Url!",
+  "oss_gpt_api_key": "API Key",
+  "oss_gpt_api_key_rule_message": "Please enter API key!",
+  "oss_gpt_llm_info_btn": "confirm",
+  "oss_gpt_llm_switch": "Switch Model"
 }

src/locales/zh_CN/translation.json

@@ -95,5 +95,16 @@
   "github_token_error_empty": "令牌不能为空",
   "github_token_success_save": "令牌保存成功",
   "github_token_success_valid": "令牌有效。用户名：{{username}}",
-  "github_token_error_invalid": "令牌无效或请求失败"
+  "github_token_error_invalid": "令牌无效或请求失败",
+  "oss_gpt_starters_introduce": "介绍一下自己",
+  "oss_gpt_hello_message": "你好 👋 ，我是来自X-lab的智能问答机器人，你可以向我进行提问。举例如下：",
+  "oss_gpt_llm_info_error": "配置信息有误，请再次确认，输入正确的配置信息。",
+  "oss_gpt_model_name": "模型名称",
+  "oss_gpt_model_name_rule_message": "请输入调用的模型名称！",
+  "oss_gpt_base_url": "接口路径",
+  "oss_gpt_base_url_rule_message": "请输入接口路径！",
+  "oss_gpt_api_key": "密钥配置",
+  "oss_gpt_api_key_rule_message": "请输入密钥配置！",
+  "oss_gpt_llm_info_btn": "确认",
+  "oss_gpt_llm_switch": "模型切换"
 }

src/manifest.json

@@ -15,7 +15,7 @@
       "matches": ["*://github.com/*"],
       "js": ["contentScript.bundle.js"],
       "css": ["contentScript.css"],
-      "run_at": "document_start"
+      "run_at": "document_idle"
     }
   ],
   "web_accessible_resources": [

src/pages/ContentScripts/features/oss-gpt/ChatItemRender.tsx

@@ -0,0 +1,43 @@
+import React, { type FC } from 'react';
+import './index.css';
+
+interface IProps {
+  direction: 'start' | 'end';
+  avatar?: any;
+  title: React.ReactNode;
+  content: React.ReactNode;
+  starter?: React.ReactNode;
+}
+
+const ChatItemRender: FC<IProps> = ({ direction, avatar, title, content, starter = <></> }) => {
+  return (
+    <>
+      <div
+        className={`flex ${
+          direction === 'start'
+            ? 'flex-row ant-pro-chat-list-item-left'
+            : 'flex-row-reverse ant-pro-chat-list-item-right'
+        } ant-pro-chat-list-item ant-pro-chat-list-item-message-content gap-[12px] p-[16px] chat_item_container`}
+      >
+        {direction === 'start' && (
+          <div
+            className="ant-avatar ant-avatar-circle ant-avatar-image w-[40px] h-[40px] rounded-full overflow-hidden flex-shrink-0"
+            style={{
+              backgroundColor: `${avatar?.props?.avatar?.backgroundColor}`,
+              backgroundImage: `url(${avatar?.props?.avatar?.avatar})`,
+              backgroundSize: 'contain',
+              backgroundRepeat: 'no-repeat',
+            }}
+          />
+        )}
+        <div className="ant-pro-chat-list-item-message-container">
+          {title}
+          {content}
+        </div>
+      </div>
+      {starter}
+    </>
+  );
+};
+
+export default ChatItemRender;

src/pages/ContentScripts/features/oss-gpt/LoadingEnd.tsx

@@ -0,0 +1,36 @@
+import Lottie from 'lottie-react';
+import React, { useState } from 'react';
+
+const LoadingAnimationEnd = require('./loading/bubble-end.json');
+
+interface LoadingEndProps {
+  children?: React.ReactNode;
+  onComplete?: () => void;
+}
+
+const LoadingEnd: React.FC<LoadingEndProps> = (props) => {
+  const { children, onComplete } = props;
+
+  const [complete, setComplete] = useState(false);
+
+  const handleComplete = () => {
+    setComplete(true);
+  };
+
+  if (complete) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div className="loading">
+      <Lottie
+        animationData={LoadingAnimationEnd}
+        autoplay={true}
+        loop={false}
+        onComplete={handleComplete} // Call handleComplete upon completion of animation
+      />
+    </div>
+  );
+};
+
+export default LoadingEnd;

src/pages/ContentScripts/features/oss-gpt/LoadingStart.tsx

@@ -0,0 +1,20 @@
+import Lottie from 'lottie-react';
+import React from 'react';
+const LoadingAnimationStart = require('./loading/bubble-start.json');
+
+interface LoadingStartProps {
+  loop?: boolean;
+  onComplete?: () => void;
+}
+
+const LoadingStart: React.FC<LoadingStartProps> = (props) => {
+  const { onComplete, loop = true } = props;
+
+  return (
+    <div className="loading">
+      <Lottie animationData={LoadingAnimationStart} loop={loop} autoplay={true} onComplete={onComplete} />
+    </div>
+  );
+};
+
+export default LoadingStart;