chore: update & fix

packages/plugins/@nocobase/plugin-ai/src/client/ai-employees/ProfileCard.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { Avatar, Divider } from 'antd';
+import { Avatar, Divider, Typography } from 'antd';
 import { useToken } from '@nocobase/client';
 import { AIEmployee } from './types';
 import { avatars } from './avatars';
@@ -48,11 +48,20 @@ export const ProfileCard: React.FC<{
               style={{
                 fontSize: token.fontSizeLG,
                 fontWeight: token.fontWeightStrong,
-                margin: '8px 0',
+                marginTop: '8px',
               }}
             >
               {aiEmployee.nickname}
             </div>
+            <div
+              style={{
+                fontSize: token.fontSize,
+                color: token.colorTextSecondary,
+                marginBottom: '8px',
+              }}
+            >
+              {aiEmployee.position}
+            </div>
           </div>
           <Divider
             orientation="left"
@@ -63,7 +72,7 @@ export const ProfileCard: React.FC<{
           >
             {t('Bio')}
           </Divider>
-          <p>{aiEmployee.bio}</p>
+          <Typography.Paragraph>{aiEmployee.bio}</Typography.Paragraph>
           {taskDesc && (
             <>
               <Divider
@@ -75,7 +84,7 @@ export const ProfileCard: React.FC<{
               >
                 {t('Task description')}
               </Divider>
-              <p>{taskDesc}</p>
+              <Typography.Paragraph>{taskDesc}</Typography.Paragraph>
             </>
           )}
         </>

packages/plugins/@nocobase/plugin-ai/src/client/ai-employees/chatbox/ChatBox.tsx

@@ -51,7 +51,12 @@ export const ChatBox: React.FC = () => {
             }
       }
     >
-      <Card style={{ height: '100%' }} styles={{ body: { height: '100%', paddingTop: 0 } }}>
+      <Card
+        style={{ height: '100%' }}
+        styles={{
+          body: { height: '100%', paddingTop: 0, boxShadow: token.boxShadow },
+        }}
+      >
         <Layout style={{ height: '100%' }}>
           <Sider
             width={!expanded ? '30%' : '15%'}

packages/plugins/@nocobase/plugin-ai/src/client/ai-employees/chatbox/Sender.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React, { memo } from 'react';
+import React, { memo, useEffect, useRef, useState } from 'react';
 import { Sender as AntSender } from '@ant-design/x';
 import { useChatBoxContext } from './ChatBoxContext';
 import { SenderPrefix } from './SenderPrefix';
@@ -17,7 +17,7 @@ import { SenderFooter } from './SenderFooter';
 import { useChatConversations } from './ChatConversationsProvider';
 import { useChatMessages } from './ChatMessagesProvider';
 
-export const Sender: React.FC = memo(() => {
+export const Sender: React.FC = () => {
   const t = useT();
   const { currentConversation } = useChatConversations();
   const { responseLoading, cancelRequest } = useChatMessages();
@@ -28,12 +28,22 @@ export const Sender: React.FC = memo(() => {
   const currentEmployee = useChatBoxContext('currentEmployee');
   const showInfoForm = useChatBoxContext('showInfoForm');
   const senderRef = useChatBoxContext('senderRef');
+  const [value, setValue] = useState(senderValue);
+
+  useEffect(() => {
+    setSenderValue(value);
+  }, [value]);
+
+  useEffect(() => {
+    setValue(senderValue);
+  }, [senderValue]);
+
   return (
     <AntSender
-      value={senderValue}
+      value={value}
       ref={senderRef}
       onChange={(value) => {
-        setSenderValue(value);
+        setValue(value);
       }}
       onSubmit={(content) =>
         send({
@@ -57,4 +67,4 @@ export const Sender: React.FC = memo(() => {
       actions={false}
     />
   );
-});
+};

packages/plugins/@nocobase/plugin-ai/src/client/ai-employees/initializer/AIEmployeeButton.tsx

@@ -77,6 +77,7 @@ export const AIEmployeeButton: React.FC<{
     <SortableItem
       style={{
         position: 'relative',
+        display: 'flex',
       }}
       onClick={async () => {
         let msg;
@@ -99,11 +100,11 @@ export const AIEmployeeButton: React.FC<{
         <Button
           shape="circle"
           style={{
-            width: '40px',
+            width: '36px',
-            height: '40px',
+            height: '36px',
           }}
         >
-          <Avatar src={avatars(aiEmployee.avatar)} size={40} />
+          <Avatar src={avatars(aiEmployee.avatar)} size={36} />
         </Button>
       </Popover>
       {render()}

packages/plugins/@nocobase/plugin-ai/src/client/ai-employees/manager/Employees.tsx

@@ -8,7 +8,7 @@
  */
 
 import React, { createContext, useContext, useMemo } from 'react';
-import { Card, Row, Col, Avatar, Input, Space, Button, Tabs, App, Spin, Empty, Typography } from 'antd';
+import { Card, Row, Col, Avatar, Input, Space, Button, Tabs, App, Spin, Empty, Typography, Tag } from 'antd';
 import {
   CollectionRecordProvider,
   SchemaComponent,
@@ -29,6 +29,7 @@ import { avatars } from '../avatars';
 import { ModelSettings } from './ModelSettings';
 import { ProfileSettings } from './ProfileSettings';
 import { ChatSettings } from './ChatSettings';
+import { AIEmployee } from '../types';
 
 const EmployeeContext = createContext(null);
 
@@ -230,14 +231,7 @@ export const Employees: React.FC = () => {
   const { message, modal } = App.useApp();
   const { token } = useToken();
   const api = useAPIClient();
-  const { data, loading, refresh } = useRequest<
+  const { data, loading, refresh } = useRequest<AIEmployee[]>(() =>
-    {
-      username: string;
-      nickname: string;
-      bio: string;
-      avatar: string;
-    }[]
-  >(() =>
     api
       .resource('aiEmployees')
       .list()
@@ -391,9 +385,19 @@ export const Employees: React.FC = () => {
                   ]}
                 >
                   <Meta
-                    avatar={employee.avatar ? <Avatar src={avatars(employee.avatar)} /> : null}
+                    avatar={employee.avatar ? <Avatar size={40} src={avatars(employee.avatar)} /> : null}
                     title={employee.nickname}
                     description={
+                      <>
+                        {employee.position && (
+                          <Tag
+                            style={{
+                              marginBottom: token.marginXS,
+                            }}
+                          >
+                            {employee.position}
+                          </Tag>
+                        )}
                         <Typography.Paragraph
                           style={{ height: token.fontSize * token.lineHeight * 3 }}
                           ellipsis={{ rows: 3 }}
@@ -401,6 +405,7 @@ export const Employees: React.FC = () => {
                         >
                           {employee.bio}
                         </Typography.Paragraph>
+                      </>
                     }
                   />
                 </Card>

packages/plugins/@nocobase/plugin-ai/src/client/ai-employees/manager/ProfileSettings.tsx

@@ -10,8 +10,10 @@
 import { SchemaComponent } from '@nocobase/client';
 import React from 'react';
 import { AvatarSelect } from './AvatarSelect';
+import { useT } from '../../locale';
 
 export const ProfileSettings: React.FC = () => {
+  const t = useT();
   return (
     <SchemaComponent
       components={{ AvatarSelect }}
@@ -32,6 +34,16 @@ export const ProfileSettings: React.FC = () => {
             'x-component': 'Input',
             required: true,
           },
+          position: {
+            type: 'string',
+            title: 'Position',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            description: t('A short label indicating the AI employee’s responsibility.'),
+            'x-component-props': {
+              placeholder: t('e.g. Translator, etc.'),
+            },
+          },
           avatar: {
             type: 'string',
             title: 'Avatar',

packages/plugins/@nocobase/plugin-ai/src/client/ai-employees/selector/withAISelectable.tsx

@@ -30,7 +30,7 @@ const useStyles = createStyles(({ token, css }) => {
         background: rgba(0, 210, 255, 0.2);
         opacity: 0;
         transition: opacity 0.3s ease;
-        z-index: 1;
+        z-index: 100;
       }
 
       &:hover::after {

packages/plugins/@nocobase/plugin-ai/src/client/ai-employees/settings/AIEmployeeButton.tsx

@@ -17,10 +17,11 @@ import {
   useCollectionFilterOptions,
   useCollectionRecordData,
   useSchemaSettings,
+  useToken,
 } from '@nocobase/client';
 import { useT } from '../../locale';
 import { avatars } from '../avatars';
-import { Card, Avatar, Tooltip, Modal } from 'antd';
+import { Card, Avatar, Tooltip, Modal, Tag, Typography } from 'antd';
 const { Meta } = Card;
 import { Schema } from '@formily/react';
 import { createForm } from '@formily/core';
@@ -61,6 +62,7 @@ const SettingsForm: React.FC<{
 }> = memo(({ form, aiEmployee }) => {
   const { dn } = useSchemaSettings();
   const t = useT();
+  const { token } = useToken();
   return (
     <SchemaComponent
       components={{ InfoForm }}
@@ -88,7 +90,20 @@ const SettingsForm: React.FC<{
                     <Meta
                       avatar={aiEmployee.avatar ? <Avatar src={avatars(aiEmployee.avatar)} size={48} /> : null}
                       title={aiEmployee.nickname}
-                      description={aiEmployee.bio}
+                      description={
+                        <>
+                          {aiEmployee.position && (
+                            <Tag
+                              style={{
+                                marginBottom: token.marginXS,
+                              }}
+                            >
+                              {aiEmployee.position}
+                            </Tag>
+                          )}
+                          {aiEmployee.bio}
+                        </>
+                      }
                     />
                   </Card>
                 ),
@@ -199,10 +214,10 @@ export const aiEmployeeButtonSettings = new SchemaSettings({
             <Modal
               styles={{
                 mask: {
-                  zIndex: selectable ? -1 : 1000,
+                  zIndex: selectable ? -1 : 311,
                 },
                 wrapper: {
-                  zIndex: selectable ? -1 : 1000,
+                  zIndex: selectable ? -1 : 311,
                 },
               }}
               title={t('Edit')}

packages/plugins/@nocobase/plugin-ai/src/client/ai-employees/types.ts

@@ -16,6 +16,7 @@ export type Selector = {
 export type AIEmployee = {
   username: string;
   nickname?: string;
+  position?: string;
   avatar?: string;
   bio?: string;
   greeting?: string;

packages/plugins/@nocobase/plugin-ai/src/collections/ai-employees.ts

@@ -20,6 +20,11 @@ export default {
       type: 'string',
       interface: 'input',
     },
+    {
+      name: 'position',
+      type: 'string',
+      interface: 'input',
+    },
     {
       name: 'avatar',
       type: 'string',