feat: enable to create the bot by conversation (#167)

* lottie 3倍速播放 * release [email protected] ![image](https://github.com/ant-xuexiao/petercat/assets/10885578/ccdb5c7b-372d-46b5-bb60-8b573d891b62)
petercat-ai · Jun 30, 2024 · 3b10acf · 3b10acf
2 parents 0807966 + b0e6741
commit 3b10acf
Show file tree

Hide file tree

Showing 11 changed files with 268 additions and 294 deletions.
diff --git a/client/app/factory/edit/[id]/page.tsx b/client/app/factory/edit/[id]/page.tsx
@@ -1,11 +1,11 @@
 'use client';
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 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 {
-  useBotConfgGenerator,
+  useBotConfigGenerator,
   useBotConfig,
   useBotCreate,
   useBotEdit,
@@ -46,11 +46,33 @@ export default function Edit({ params }: { params: { id: string } }) {
 
   const {
     data: generatorResponseData,
-    getBotInfoByReponame,
-    isLoading: getBotInfoByReponameLoading,
-    isSuccess: getBotInfoByReponameSuccess,
-    error: getBotInfoByReponameError,
-  } = useBotConfgGenerator();
+    getBotInfoByRepoName,
+    isLoading: getBotInfoByRepoNameLoading,
+    isSuccess: getBotInfoByRepoNameSuccess,
+    error: getBotInfoByRepoNameError,
+  } = useBotConfigGenerator();
+
+  const updateConfigFromChatResult = useCallback((response: string) => {
+    try {
+      const data = JSON.parse(response)?.data?.[0];
+      console.log('data', data);
+      if (!isEmpty(data)) {
+        setBotProfile((draft) => {
+          draft.id = data.id;
+          draft.name = data.name;
+          draft.avatar = data.avatar;
+          draft.gitAvatar = data.avatar;
+          draft.prompt = data.prompt;
+          draft.description = data.description;
+          draft.starters = data.starters;
+          draft.public = data.public;
+          draft.helloMessage = data.hello_message;
+        });
+      }
+    } catch (e) {
+      console.error(JSON.stringify(e));
+    }
+  }, []);
 
   const isEdit = useMemo(
     () => (!!params?.id && params?.id !== 'new') || !!botProfile?.id,
@@ -125,13 +147,13 @@ export default function Edit({ params }: { params: { id: string } }) {
     if (editError) {
       toast.error(`生成成功${editError.message}`);
     }
-  }, [getBotInfoByReponameSuccess]);
+  }, [getBotInfoByRepoNameSuccess]);
 
   useEffect(() => {
     if (editSuccess) {
       toast.success('生成失败');
     }
-  }, [getBotInfoByReponameError]);
+  }, [getBotInfoByRepoNameError]);
 
   useEffect(() => {
     const botInfo = createResponseData?.[0];
@@ -151,7 +173,7 @@ export default function Edit({ params }: { params: { id: string } }) {
     }
   }, [createResponseData]);
 
-  if (isLoading || getBotInfoByReponameLoading) {
+  if (isLoading || getBotInfoByRepoNameLoading) {
     return <FullPageSkeleton />;
   }
 
@@ -170,6 +192,10 @@ export default function Edit({ params }: { params: { id: string } }) {
         apiUrl="/api/chat/stream_builder"
         apiDomain={API_HOST}
         helloMessage="👋🏻 你好，我是 Peter Cat， 初次见面，先自我介绍一下：我是一个开源项目的机器人。你可以通过和我对话配置一个答疑机器人。"
+        getToolsResult={(result) => {
+          const data = result?.data;
+          updateConfigFromChatResult(data);
+        }}
       />
     </div>
   );
@@ -215,7 +241,7 @@ export default function Edit({ params }: { params: { id: string } }) {
             startContent={<AIBtnIcon />}
             isLoading={createBotLoading}
             onClick={() => {
-              getBotInfoByReponame(botProfile?.repoName!);
+              getBotInfoByRepoName(botProfile?.repoName!);
             }}
           >
             重新生成配置
@@ -293,9 +319,23 @@ export default function Edit({ params }: { params: { id: string } }) {
               </div>
             </div>
             <div className="h-full grow overflow-y-auto overflow-x-hidden flex h-full flex-col">
-              {activeTab === 'chatConfig'
-                ? chatConfigContent
-                : manualConfigContent}
+              <div
+                style={{
+                  visibility: activeTab === 'chatConfig' ? 'visible' : 'hidden',
+                }}
+              >
+                {chatConfigContent}
+              </div>
+              <div
+                style={{
+                  position: 'absolute',
+                  width: '50%',
+                  height: 'calc(100vh - 73px)',
+                  visibility: activeTab !== 'chatConfig' ? 'visible' : 'hidden',
+                }}
+              >
+                {manualConfigContent}
+              </div>
             </div>
           </div>
         </div>

diff --git a/client/app/hooks/useBot.ts b/client/app/hooks/useBot.ts
@@ -3,7 +3,7 @@ import {
   deleteBot,
   getBotConfig,
   getBotDetail,
-  getBotInfoByReponame,
+  getBotInfoByRepoName,
   getBotList,
   updateBot,
 } from '@/app/services/BotsController';
@@ -89,13 +89,13 @@ export function useBotCreate() {
   };
 }
 
-export function useBotConfgGenerator() {
+export function useBotConfigGenerator() {
   const mutation = useMutation({
-    mutationFn: getBotInfoByReponame,
+    mutationFn: getBotInfoByRepoName,
   });
   return {
     data: mutation.data?.data?.data,
-    getBotInfoByReponame: mutation.mutate,
+    getBotInfoByRepoName: mutation.mutate,
     isLoading: mutation.isPending,
     error: mutation.error,
     isSuccess: mutation.isSuccess,

diff --git a/client/app/services/BotsController.ts b/client/app/services/BotsController.ts
@@ -54,12 +54,12 @@ export async function updateBot(profile: BotProfile) {
   const parmas = {
     ...omit(profile, ['gitAvatar', 'repoName', 'helloMessage']),
     hello_message: profile.helloMessage,
-  }
+  };
   return axios.put(`${apiDomain}/api/bot/update/${profile.id}`, parmas);
 }
 
 // Get Bot Info by Repo Name
-export async function getBotInfoByReponame(
+export async function getBotInfoByRepoName(
   repo_name: string,
   starters?: string[],
   hello_message?: string,
@@ -70,4 +70,3 @@ export async function getBotInfoByReponame(
     hello_message,
   });
 }
-
diff --git a/client/components/FullPageSkeleton.tsx b/client/components/FullPageSkeleton.tsx
@@ -5,8 +5,9 @@ const FullPageSkeleton = () => {
   return (
     <div className="fixed top-0 left-0 right-0 bottom-0 z-50 flex justify-center items-center bg-white bg-opacity-75">
       <Lottie
-        animationData={peterCatWalkAnimation}
         loop={true}
+        autoplay={true}
+        animationData={peterCatWalkAnimation}
         style={{ width: '50%', height: '50%' }}
       />
     </div>

diff --git a/client/package.json b/client/package.json
@@ -39,7 +39,7 @@
     "lottie-react": "^2.4.0",
     "next": "14.0.1",
     "openai": "^4.24.7",
-    "petercat-lui": "^0.0.19",
+    "petercat-lui": "^0.0.20",
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/client/public/loading.json b/client/public/loading.json
@@ -2644,7 +2644,7 @@
     }
   ],
   "v": "5.7.8",
-  "fr": 60,
+  "fr": 180,
   "op": 204,
   "ip": 0,
   "assets": []

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -11252,10 +11252,10 @@ pbkdf2@^3.0.3, pbkdf2@^3.1.2:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-petercat-lui@^0.0.19:
-  version "0.0.19"
-  resolved "https://registry.npmjs.org/petercat-lui/-/petercat-lui-0.0.19.tgz#2f9e97de66aa7a8e0e86324169d89e3008d5adfb"
-  integrity sha512-8luZDTLKUs/BUeZGCRQ9MfKAxod1GOEsOI6T+Ta4R8b2t/hYLsjeAmQLGrmfIneq8TAZHfraQfsZQmqABGu01g==
+petercat-lui@^0.0.20:
+  version "0.0.20"
+  resolved "https://registry.npmjs.org/petercat-lui/-/petercat-lui-0.0.20.tgz#aff16b3b83480456322adbf78e0e055ae23c82bf"
+  integrity sha512-3w3+aTlVMxx3r3cPRRRzGwK6RZjXDtnoSMfurMorDw+JisrZY+qn2Cmkl3vD/gvxXzZUxULQf0u302KTDAMr5A==
   dependencies:
     "@ant-design/icons" "^5.3.5"
     "@ant-design/pro-chat" "^1.9.0"

diff --git a/lui/package.json b/lui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "petercat-lui",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "A react library developed with dumi",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/lui/src/Chat/index.md b/lui/src/Chat/index.md
@@ -1,15 +1,23 @@
 
 ```jsx
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Chat } from 'petercat-lui';
 
+export default () => {
+  const [res, setRes] = useState({});
 
-export default () => (
-  <div style={{ height: '100vh' }}>
-    <Chat
-      apiUrl="/api/chat/stream_builder"
-      hideLogo="true"
-    />
-  </div>
-);
+  useEffect(() => {
+    console.log('res', res);
+  }, [res]);
+
+  return (
+    <div style={{ height: '100vh' }}>
+      <Chat
+        apiUrl="/api/chat/stream_builder"
+        hideLogo="true"
+        getToolsResult={setRes}
+      />
+    </div>
+  );
+};
 ```
diff --git a/lui/src/Chat/index.tsx b/lui/src/Chat/index.tsx
@@ -43,6 +43,7 @@ export interface ChatProps extends BotInfo {
   token?: string;
   style?: React.CSSProperties;
   hideLogo?: boolean;
+  getToolsResult?: (response: any) => void;
 }
 
 const Chat: FC<ChatProps> = memo(
@@ -57,6 +58,7 @@ const Chat: FC<ChatProps> = memo(
     token,
     style,
     hideLogo = false,
+    getToolsResult,
   }) => {
     const proChatRef = useRef<ProChatInstance>();
     const [chats, setChats] = useState<ChatMessage<Record<string, any>>[]>();
@@ -191,13 +193,13 @@ const Chat: FC<ChatProps> = memo(
                 if (![Role.knowledge, Role.tool].includes(type)) {
                   return defaultMessageContent;
                 }
-
+                getToolsResult?.(extra);
                 const { status, source } = extra;
 
                 return (
                   <div
                     className="leftMessageContent"
-                    style={{ minWidth: messageMinWidth }}
+                    style={{ maxWidth: messageMinWidth }}
                   >
                     <div className="mb-1">
                       <ThoughtChain