refactor(ui): card for publish bot & bot configer (#339)

update publish bot card icon;add copy token feature;repo_name will saved in db ![image](https://github.com/user-attachments/assets/051027aa-6100-4b5e-9171-b19e70778e8f) ![image](https://github.com/user-attachments/assets/e6bcf65d-ee06-469c-bc20-7b9208b0c751)
petercat-ai · Sep 4, 2024 · b9956e3 · b9956e3
2 parents bc3eb44 + 6297fc0
commit b9956e3
Show file tree

Hide file tree

Showing 12 changed files with 161 additions and 36 deletions.
diff --git a/client/app/factory/edit/[id]/page.tsx b/client/app/factory/edit/[id]/page.tsx
@@ -4,6 +4,7 @@ import { Tabs, Tab, Button, Input, Avatar } from '@nextui-org/react';
 import BotCreateFrom from '@/app/factory/edit/components/BotCreateFrom';
 import { toast, ToastContainer } from 'react-toastify';
 import BackIcon from '@/public/icons/BackIcon';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import {
   useBotConfigGenerator,
   useBotConfig,
@@ -80,6 +81,7 @@ export default function Edit({ params }: { params: { id: string } }) {
           draft.description = data.description;
           draft.starters = data.starters;
           draft.public = data.public;
+          draft.repoName = data.repoName;
           draft.helloMessage = data.hello_message;
         });
       }
@@ -109,6 +111,7 @@ export default function Edit({ params }: { params: { id: string } }) {
         draft.helloMessage = config.hello_message || '';
         draft.prompt = config.prompt || '';
         draft.public = config.public ?? false;
+        draft.repoName = config.repo_name ?? '';
       });
   }, [config]);
 
@@ -214,6 +217,24 @@ export default function Edit({ params }: { params: { id: string } }) {
       />
     </div>
   );
+  const manualConfigLabel = (
+    <div className="flex justify-between">
+      <span>Github 项目名</span>
+      {botProfile.id && (
+        <CopyToClipboard
+          text={botProfile.id}
+          onCopy={() => {
+            toast.success('Token 已复制到剪贴板');
+          }}
+        >
+          {/* @ts-ignore */}
+          <span className="text-xs text-gray-500 cursor-pointer">
+            复制 Token
+          </span>
+        </CopyToClipboard>
+      )}
+    </div>
+  );
 
   const manualConfigContent = (
     <div className="h-full px-10 py-10 overflow-x-hidden overflow-y-scroll">
@@ -222,7 +243,7 @@ export default function Edit({ params }: { params: { id: string } }) {
           type="text"
           variant="bordered"
           name="repo_name"
-          label="Github 项目名"
+          label={manualConfigLabel}
           disabled={isEdit}
           value={botProfile?.repoName}
           placeholder="请输入 GitHub 项目名称 (ORG_NAME/REPO_NAME)"
@@ -233,7 +254,9 @@ export default function Edit({ params }: { params: { id: string } }) {
               draft.repoName = repoName;
             });
           }}
+          isDisabled={isEdit}
           required
+          classNames={{ label: 'w-full' }}
           className="mt-1 mb-6 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
         />
         <div className="flex items-center gap-4">

diff --git a/client/app/factory/edit/components/KnowledgeBtn.tsx b/client/app/factory/edit/components/KnowledgeBtn.tsx
@@ -18,12 +18,15 @@ type IProps = {
 const KnowledgeBtn = (props: IProps) => {
   const { onClick, botId, mode } = props;
   const { setTaskProfile } = useBotTask();
-  const [isPolling, setIsPolling] = React.useState<boolean>(true);
+  const [shouldGetTask, setShouldGetTask] = React.useState<boolean>(!!botId);
   const [taskLoading, setTaskLoading] = React.useState<boolean>(true);
-  const { data: taskList } = useGetBotRagTask(botId, isPolling, true);
-  const taskCnt = taskList?.length ?? 0;
   const [allowShowChunkList, setAllowShowChunkList] =
     React.useState<boolean>(false);
+
+  const { data: taskList } = useGetBotRagTask(botId, shouldGetTask, true);
+  const taskCnt = taskList?.length ?? 0;
+
+  // compute task running status by taskList
   useEffect(() => {
     if (!taskList) return;
     let completeTaskCnt = 0;
@@ -44,12 +47,13 @@ const KnowledgeBtn = (props: IProps) => {
     setTaskProfile({ running: taskRunning });
   }, [taskList]);
 
+  // close the interval query
   useEffect(() => {
-    setIsPolling(true);
     return () => {
-      setIsPolling(false);
+      setShouldGetTask(false);
     };
   }, []);
+
   if (mode === 'pageHeader') {
     return (
       <>

diff --git a/client/app/market/page.tsx b/client/app/market/page.tsx
@@ -67,7 +67,7 @@ export default function Home() {
   return (
     <div>
       <div className="grid grid-flow-row-dense gap-8 justify-items-center px-[40px] grid-cols-2 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
-        <PublishBotEntity type="list" />
+        <PublishBotEntity area="list" />
         {!isEmpty(bots) &&
           map(bots, (bot: Bot) => (
             <BotCard key={bot.id} bot={bot} handleCardClick={handleCardClick} />

diff --git a/client/components/Navbar.tsx b/client/components/Navbar.tsx
@@ -113,7 +113,7 @@ export function Navbar() {
         />
       </div>
       <div className="w-[200px] ml-[48px] flex items-center">
-        {!pathname.includes('/factory/list') && <PublishBotEntity type="nav" />}
+        {!pathname.includes('/factory/list') && <PublishBotEntity area="nav" />}
         {pathname.includes('/factory/list') && (
           <Button
             onPress={() => router.push(`/factory/edit/new`)}

diff --git a/client/components/PublishBotCard.tsx b/client/components/PublishBotCard.tsx
@@ -0,0 +1,21 @@
+'use client';
+import React from 'react';
+import { CardBody } from '@nextui-org/react';
+import BaseBotCard from './BaseBotCard';
+import { MarketIcon } from '@/public/icons/MarketIcon';
+
+const PublishBotCard = (props: { onPress: Function }) => {
+  return (
+    <BaseBotCard
+      onPress={() => {
+        props.onPress();
+      }}
+    >
+      <CardBody className="overflow-visible p-0 bg-gradient-to-b from-[rgba(255,255,255,0.65)] to-white bg-[#F3F4F6] h-[400px] flex justify-center items-center rounded-[8px]">
+        <MarketIcon className="" />
+      </CardBody>
+    </BaseBotCard>
+  );
+};
+
+export default PublishBotCard;
diff --git a/client/components/PublishBotEntity.tsx b/client/components/PublishBotEntity.tsx
@@ -2,7 +2,6 @@
 import { Tables } from '@/types/database.types';
 import React, { useEffect, useMemo, useState } from 'react';
 import { filter, isEmpty, map } from 'lodash';
-import AddBotCard from '@/components/AddBotCard';
 import { useBotEdit } from '@/app/hooks/useBot';
 import { toast, ToastContainer } from 'react-toastify';
 import {
@@ -20,11 +19,12 @@ import { useBotList } from '@/app/hooks/useBot';
 import BotItem from './BotItem';
 
 import 'react-toastify/dist/ReactToastify.css';
+import PublishBotCard from './PublishBotCard';
 
 declare type Bot = Tables<'bots'>;
 
-const PublishBotEntity = (props: { type: 'nav' | 'list' }) => {
-  const { type } = props;
+const PublishBotEntity = (props: { area: 'nav' | 'list' }) => {
+  const { area } = props;
   const [selectedBot, setSelectedBot] = useState('');
   const [selectedBotName, setSelectedBotName] = useState('');
   const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure();
@@ -53,7 +53,7 @@ const PublishBotEntity = (props: { type: 'nav' | 'list' }) => {
   }, [editError]);
   return (
     <>
-      {type === 'nav' && (
+      {area === 'nav' && (
         <>
           <ToastContainer />
           <Button
@@ -66,7 +66,7 @@ const PublishBotEntity = (props: { type: 'nav' | 'list' }) => {
           </Button>
         </>
       )}
-      {type === 'list' && <AddBotCard onPress={onOpen} />}
+      {area === 'list' && <PublishBotCard onPress={onOpen} />}
       <Modal
         isOpen={isOpen}
         onOpenChange={onOpenChange}

diff --git a/client/package.json b/client/package.json
@@ -20,10 +20,12 @@
     "@fullpage/react-fullpage": "^0.1.42",
     "@next/bundle-analyzer": "^13.4.19",
     "@nextui-org/react": "^2.2.9",
+    "@petercatai/assistant": "^1.0.0",
     "@supabase/supabase-js": "^2.32.0",
     "@tanstack/react-query": "^5.17.19",
     "@types/node": "20.4.5",
     "@types/react": "18.2.17",
+    "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "18.2.7",
     "ai": "^2.1.28",
     "autoprefixer": "10.4.14",
@@ -40,9 +42,9 @@
     "lottie-react": "^2.4.0",
     "next": "14.0.1",
     "openai": "^4.24.7",
-    "@petercatai/assistant": "^1.0.0",
     "postcss": "^8.4.41",
     "react": "18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "18.2.0",
     "react-toastify": "^9.1.3",
     "tailwindcss": "^3.4.3",

diff --git a/client/public/icons/MarketIcon.tsx b/client/public/icons/MarketIcon.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+export const MarketIcon = ({
+  fill = 'currentColor',
+  filled = false,
+  size = 'normal',
+  height = '64px',
+  width = '64px',
+  label = '',
+  ...props
+}) => (
+  <svg
+    width="64"
+    height="64"
+    viewBox="0 0 64 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.21168 22.7873C12.9607 26.5363 19.0391 26.5363 22.7881 22.7873C23.2488 22.3266 23.6529 21.8307 24.0004 21.3083C25.7203 23.8947 28.661 25.5992 31.9999 25.5992C35.3392 25.5992 38.2803 23.8942 40.0001 21.3073C40.3478 21.8301 40.7521 22.3264 41.2131 22.7874C44.9622 26.5364 51.0405 26.5364 54.7896 22.7874C58.5386 19.0384 58.5386 12.96 54.7896 9.21095L53.853 8.27442C52.6528 7.07419 51.0249 6.3999 49.3276 6.3999H14.6736C12.9762 6.3999 11.3483 7.07418 10.1481 8.27442L9.21168 9.21084C5.46264 12.9599 5.46264 19.0383 9.21168 22.7873Z"
+      fill="#E4E4E7"
+    />
+    <path
+      d="M9.5999 28.903C14.1695 31.1701 19.6925 30.8605 24.0017 27.9744C26.2879 29.5041 29.039 30.3992 31.9999 30.3992C34.9611 30.3992 37.7125 29.504 39.9987 27.974C44.3076 30.8603 49.8303 31.1702 54.3999 28.9039V52.7999H55.1999C56.5254 52.7999 57.5999 53.8744 57.5999 55.1999C57.5999 56.5254 56.5254 57.5999 55.1999 57.5999H40.7999C39.4744 57.5999 38.3999 56.5254 38.3999 55.1999V43.9999C38.3999 42.6744 37.3254 41.5999 35.9999 41.5999H27.9999C26.6744 41.5999 25.5999 42.6744 25.5999 43.9999V55.1999C25.5999 56.5254 24.5254 57.5999 23.1999 57.5999H8.7999C7.47442 57.5999 6.3999 56.5254 6.3999 55.1999C6.3999 53.8744 7.47442 52.7999 8.7999 52.7999H9.5999V28.903Z"
+      fill="#E4E4E7"
+    />
+  </svg>
+);
diff --git a/client/types/database.types.ts b/client/types/database.types.ts
@@ -45,6 +45,7 @@ export type Database = {
           name: string
           prompt: string | null
           public: boolean | null
+          repo_name:string | null
           starters: string[] | null
           uid: string | null
           updated_at: string | null
@@ -59,6 +60,7 @@ export type Database = {
           name?: string
           prompt?: string | null
           public?: boolean | null
+          repo_name?:string | null
           starters?: string[] | null
           uid?: string | null
           updated_at?: string | null
@@ -73,6 +75,7 @@ export type Database = {
           name?: string
           prompt?: string | null
           public?: boolean | null
+          repo_name?:string | null
           starters?: string[] | null
           uid?: string | null
           updated_at?: string | null

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -4731,6 +4731,13 @@
   resolved "https://registry.npmjs.org/@types/qs/-/qs-6.9.15.tgz#adde8a060ec9c305a82de1babc1056e73bd64dce"
   integrity sha512-uXHQKES6DQKKCLh441Xv/dwxOq1TVS3JPUMlEqoEglvlhR6Mxnlew/Xq/LRVHpLyk7iK3zODe1qYHIMltO7XGg==
 
+"@types/react-copy-to-clipboard@^5.0.7":
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.7.tgz#0cb724d4228f1c2f8f5675671b3971c8801d5f45"
+  integrity sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/[email protected]":
   version "18.2.7"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz#67222a08c0a6ae0a0da33c3532348277c70abb63"
@@ -9093,7 +9100,7 @@ [email protected], re-resizable@^6.9.16:
 
 react-copy-to-clipboard@^5.1.0:
   version "5.1.0"
-  resolved "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz#09aae5ec4c62750ccb2e6421a58725eabc41255c"
+  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz#09aae5ec4c62750ccb2e6421a58725eabc41255c"
   integrity sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==
   dependencies:
     copy-to-clipboard "^3.3.1"
@@ -9688,7 +9695,16 @@ string-convert@^0.2.0:
   resolved "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
   integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9780,7 +9796,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10502,7 +10525,16 @@ word-wrap@^1.2.5:
   resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

diff --git a/server/bot/builder.py b/server/bot/builder.py
@@ -11,10 +11,10 @@
 
 
 async def bot_info_generator(
-        uid: str,
-        repo_name: str,
-        starters: Optional[List[str]] = None,
-        hello_message: Optional[str] = None
+    uid: str,
+    repo_name: str,
+    starters: Optional[List[str]] = None,
+    hello_message: Optional[str] = None,
 ):
     try:
         # Step1:Get the repository object
@@ -31,10 +31,22 @@ async def bot_info_generator(
             "prompt": prompt,
             "uid": uid,
             "label": "Assistant",
-            "starters": starters if starters else [f"介绍一下 {repo.name} 这个项目", f"查看 {repo_name} 的贡献指南",
-                                                   "我该怎样快速上手"],
+            "starters": (
+                starters
+                if starters
+                else [
+                    f"介绍一下 {repo.name} 这个项目",
+                    f"查看 {repo_name} 的贡献指南",
+                    "我该怎样快速上手",
+                ]
+            ),
             "public": False,
-            "hello_message": hello_message if hello_message else "我是你专属的答疑机器人，你可以问我关于当前项目的任何问题~"
+            "hello_message": (
+                hello_message
+                if hello_message
+                else "我是你专属的答疑机器人，你可以问我关于当前项目的任何问题~"
+            ),
+            "repo_name": repo_name,
         }
 
         return bot_data
@@ -60,10 +72,10 @@ def trigger_rag_task(repo_name: str, bot_id: str):
 
 
 async def bot_builder(
-        uid: str,
-        repo_name: str,
-        starters: Optional[List[str]] = None,
-        hello_message: Optional[str] = None
+    uid: str,
+    repo_name: str,
+    starters: Optional[List[str]] = None,
+    hello_message: Optional[str] = None,
 ):
     """
     create a bot based on the given github repository.