ref: enanle user to inject custom prompt by the LUI component (#136)

* 开放自定义参数 * 聊天气泡雕花 ![image](https://github.com/ant-xuexiao/petercat/assets/10885578/ffb8d768-004e-49bb-a7d7-0d8e5760b68a)
petercat-ai · Jun 5, 2024 · 79c20d6 · 79c20d6
2 parents 95a3658 + d48a587
commit 79c20d6
Show file tree

Hide file tree

Showing 12 changed files with 324 additions and 188 deletions.
diff --git a/client/app/factory/edit/components/BotCreateFrom.tsx b/client/app/factory/edit/components/BotCreateFrom.tsx
@@ -38,7 +38,7 @@ const BotCreateFrom = (props: BotFormProps) => {
               <Tooltip content="随机头像">
                 <Button
                   isIconOnly
-                  className="rounded-full bg-gray-700 mr-2"
+                  className="rounded-full bg-gray-700 mr-2 w-[32px] h-[32px]"
                   aria-label="随机头像"
                 >
                   <BulbIcon />
@@ -48,7 +48,7 @@ const BotCreateFrom = (props: BotFormProps) => {
               <Tooltip content="GitHub 头像">
                 <Button
                   isIconOnly
-                  className="rounded-full bg-gray-700"
+                  className="rounded-full bg-gray-700 w-[32px] h-[32px]"
                   aria-label="GitHub 头像"
                 >
                   <GitHubIcon />

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -3849,11 +3849,6 @@
   dependencies:
     tslib "^2.4.0"
 
-"@tailwindcss/line-clamp@^0.4.4":
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz#767cf8e5d528a5d90c9740ca66eb079f5e87d423"
-  integrity sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==
-
 "@tanstack/[email protected]":
   version "5.36.1"
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.36.1.tgz#ae46f935c4752812a56c6815305061a3da82e7b8"

diff --git a/lui/src/Assistant/index.md b/lui/src/Assistant/index.md
@@ -10,6 +10,9 @@ import { Assistant } from 'petercat-lui';
 
 export default () => (
   <Assistant
+    showBubble={true}
+    helloMessage="hello world"
+    token="2997bf16-ee7a-4d0b-94f0-e5a7d9da4054"
     assistantMeta={{
       avatar:
         'https://mdn.alipayobjects.com/huamei_yhboz9/afts/img/A*li7ySppF7TYAAAAAAAAAAAAADlDCAQ/original',

diff --git a/lui/src/Assistant/index.tsx b/lui/src/Assistant/index.tsx
@@ -1,21 +1,21 @@
 import { CloseCircleFilled } from '@ant-design/icons';
-import { type MetaData } from '@ant-design/pro-chat';
 import { ActionIcon } from '@ant-design/pro-editor';
-import React, { useState } from 'react';
-import Chat from '../Chat';
+import React, { useEffect, useState } from 'react';
+import Chat, { ChatProps } from '../Chat';
+import BubbleIcon from '../icons/BubbleIcon';
 
-export interface AssistantProps {
-  assistantMeta?: MetaData;
-  host?: string;
+export interface AssistantProps extends ChatProps {
+  showBubble: boolean;
+  visible: boolean;
 }
 
-const drawerWidth = 400; // Tailwind doesn't support custom width directly, you might need to handle this separately
+const drawerWidth = 400;
 
 const Assistant = (props: AssistantProps) => {
-  const [chatVisible, setChatVisible] = useState(false);
+  const { showBubble = true, visible } = props;
+  const [chatVisible, setChatVisible] = useState(visible);
   const [position, setPosition] = useState({ bottom: 120 });
 
-  // Toggle the visibility of the drawer
   const toggleDrawer = () => {
     setChatVisible(!chatVisible);
   };
@@ -41,12 +41,22 @@ const Assistant = (props: AssistantProps) => {
 
     e.preventDefault(); // Prevent text selection
   };
+
+  useEffect(() => {
+    setChatVisible(visible);
+  }, [visible]);
+
   return (
     <div className="petercat-lui">
       {chatVisible ? (
         <div
-          className="fixed right-0 top-0 h-full bg-[#FCFCFC] flex flex-row z-[999] overflow-hidden text-left text-black rounded-tl-[20px] rounded-bl-[20px]"
-          style={{ width: drawerWidth, zIndex: 9999,borderBottomLeftRadius: "20px!important",boxShadow: "0px 8px 32px -12px rgba(0, 0, 0, 0.1)" }}
+          className="fixed right-0 top-0 h-full flex flex-row z-[999] overflow-hidden text-left text-black rounded-tl-[20px] rounded-bl-[20px] border-[0.5px] border-[#E4E4E7] shadow-[0px_8px_32px_-12px_rgba(0,0,0,0.1)]"
+          style={{
+            width: drawerWidth,
+            zIndex: 9999,
+            borderBottomLeftRadius: '20px!important',
+            boxShadow: '0px 8px 32px -12px rgba(0, 0, 0, 0.1)',
+          }}
         >
           <Chat {...props} drawerWidth={drawerWidth} />
           <div className="absolute top-0 right-0 m-1">
@@ -58,24 +68,28 @@ const Assistant = (props: AssistantProps) => {
           </div>
         </div>
       ) : (
-          <div
-          className="fixed bottom-[120px] right-0 w-14 h-8 flex items-center justify-center rounded-full border border-[#ececee] shadow-[0_3.2px_12px_#00000014,_0_5px_25px_#0000000a] bg-white cursor-pointer transition-all duration-300 ease-in-out hover:shadow-lg active:cursor-grabbing"
-          onMouseDown={startDrag}
-          onClick={toggleDrawer}
-          style={{
-            bottom: `${position.bottom}px`,
-            marginRight: '-18px',
-            zIndex: 9999,
-          }}
-        >
-          <img
-            src={
-              props.assistantMeta?.avatar ||
-              'https://mdn.alipayobjects.com/huamei_yhboz9/afts/img/A*li7ySppF7TYAAAAAAAAAAAAADlDCAQ/original'
-            }
-            className="absolute left-2 w-6 h-6 rounded-full top-1/2 transform -translate-y-1/2"
-          />
-        </div>
+        <>
+          {showBubble && (
+            <div
+              className="fixed bottom-[120px] right-0 flex items-center justify-center rounded-full shadow-[0_8px_8px_-5px_#00000014,_0_16px_24px_-5px_#00000029] bg-white cursor-pointer transition-all duration-300 ease-in-out hover:shadow-lg active:cursor-grabbing"
+              onMouseDown={startDrag}
+              onClick={toggleDrawer}
+              style={{
+                bottom: `${position.bottom}px`,
+                marginRight: '24px',
+                zIndex: 9999,
+              }}
+            >
+              <div
+                className="animate-wiggle  absolute top-[-9px] left-[-47px] px-2 py-1 w-[52px] h-[22px] bg-[#3F3F46] shadow-xl rounded-full rounded-br-none text-[10px] text-white
+               "
+              >
+                Ask me
+              </div>
+              <BubbleIcon />
+            </div>
+          )}
+        </>
       )}
     </div>
   );

diff --git a/lui/src/Chat/index.md b/lui/src/Chat/index.md
@@ -7,11 +7,13 @@ import { Chat } from 'petercat-lui';
 export default () => (
   <div style={{ height: '100vh' }}>
     <Chat
+      starters={['test1', 'test2', 'test3']}
+      token="2997bf16-ee7a-4d0b-94f0-e5a7d9da4054"
+      prompt="你是一只小鸭子，只会嘎嘎嘎"
       assistantMeta={{
         avatar:
           'https://mdn.alipayobjects.com/huamei_j8gzmo/afts/img/A*YAP3SI7MMHQAAAAAAAAAAAAADrPSAQ/original',
         title: 'PeterCat',
-
       }}
     />
   </div>