wip

src/renderer/src/components/Avatar/EmojiAvatarWithPicker.tsx

@@ -1,4 +1,4 @@
-import { Button, Popover, PopoverContent, PopoverTrigger } from '@heroui/react'
+import { Button, Popover } from 'antd'
 import React from 'react'
 
 import EmojiPicker from '../EmojiPicker'
@@ -10,13 +10,10 @@ type Props = {
 
 export const EmojiAvatarWithPicker: React.FC<Props> = ({ emoji, onPick }) => {
   return (
-    <Popover>
+    <Popover content={<EmojiPicker onEmojiClick={onPick} />} trigger="click">
-      <PopoverTrigger>
+      <Button type="text" style={{ width: 32, height: 32, fontSize: 18 }}>
-        <Button size="sm" startContent={<span className="text-lg">{emoji}</span>} isIconOnly />
+        {emoji}
-      </PopoverTrigger>
+      </Button>
-      <PopoverContent>
-        <EmojiPicker onEmojiClick={onPick}></EmojiPicker>
-      </PopoverContent>
     </Popover>
   )
 }

src/renderer/src/components/ConfirmDialog.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@heroui/react'
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons'
-import { CheckIcon, XIcon } from 'lucide-react'
+import { Button } from 'antd'
 import type { FC } from 'react'
 import { createPortal } from 'react-dom'
 
@@ -28,12 +28,22 @@ const ConfirmDialog: FC<Props> = ({ x, y, message, onConfirm, onCancel }) => {
         <div className="flex min-w-[160px] items-center rounded-lg border border-[var(--color-border)] bg-[var(--color-background)] p-3 shadow-[0_4px_12px_rgba(0,0,0,0.15)]">
           <div className="mr-2 text-sm leading-[1.4]">{message}</div>
           <div className="flex justify-center gap-2">
-            <Button onPress={onCancel} radius="full" className="h-6 w-6 min-w-0 p-1" color="danger">
+            <Button
-              <XIcon className="text-danger-foreground" size={16} />
+              onClick={onCancel}
-            </Button>
+              shape="circle"
-            <Button onPress={onConfirm} radius="full" className="h-6 w-6 min-w-0 p-1" color="success">
+              size="small"
-              <CheckIcon className="text-success-foreground" size={16} />
+              danger
-            </Button>
+              icon={<CloseOutlined />}
+              style={{ width: 24, height: 24, minWidth: 24 }}
+            />
+            <Button
+              onClick={onConfirm}
+              shape="circle"
+              size="small"
+              type="primary"
+              icon={<CheckOutlined />}
+              style={{ width: 24, height: 24, minWidth: 24, backgroundColor: '#52c41a' }}
+            />
           </div>
         </div>
       </div>

src/renderer/src/pages/home/Tabs/AssistantsTab.tsx

@@ -1,4 +1,3 @@
-import { Alert, Spinner } from '@heroui/react'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { useAgents } from '@renderer/hooks/agents/useAgents'
 import { useApiServer } from '@renderer/hooks/useApiServer'
@@ -11,6 +10,7 @@ import { useAppDispatch } from '@renderer/store'
 import { addIknowAction } from '@renderer/store/runtime'
 import type { Assistant, AssistantsSortType, Topic } from '@renderer/types'
 import { getErrorMessage } from '@renderer/utils'
+import { Alert } from 'antd'
 import type { FC } from 'react'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -128,26 +128,24 @@ const AssistantsTab: FC<AssistantsTabProps> = (props) => {
     <Container className="assistants-tab" ref={containerRef}>
       {!apiServerConfig.enabled && !apiServerRunning && !iknow[ALERT_KEY] && (
         <Alert
-          color="warning"
+          type="warning"
-          title={t('agent.warning.enable_server')}
+          message={t('agent.warning.enable_server')}
-          isClosable
+          closable
-          onClose={() => {
+          onClose={() => dispatch(addIknowAction(ALERT_KEY))}
-            dispatch(addIknowAction(ALERT_KEY))
+          style={{ marginBottom: 10 }}
-          }}
+          showIcon
-          className="mb-2"
         />
       )}
-
-      {(agentsLoading || apiServerLoading) && <Spinner />}
       {apiServerConfig.enabled && !apiServerLoading && !apiServerRunning && (
-        <Alert color="danger" title={t('agent.server.error.not_running')} isClosable className="mb-2" />
+        <Alert type="error" message={t('agent.server.error.not_running')} closable className="mb-2" showIcon />
       )}
       {apiServerRunning && agentsError && (
         <Alert
-          color="danger"
+          type="error"
-          title={t('agent.list.error.failed')}
+          message={t('agent.list.error.failed')}
           description={getErrorMessage(agentsError)}
           className="mb-2"
+          showIcon
         />
       )}
 

src/renderer/src/pages/home/Tabs/components/Sessions.tsx

@@ -1,4 +1,3 @@
-import { Alert, Spinner } from '@heroui/react'
 import { DynamicVirtualList } from '@renderer/components/VirtualList'
 import { useCreateDefaultSession } from '@renderer/hooks/agents/useCreateDefaultSession'
 import { useSessions } from '@renderer/hooks/agents/useSessions'
@@ -11,6 +10,7 @@ import {
   setSessionWaitingAction
 } from '@renderer/store/runtime'
 import { buildAgentSessionTopicId } from '@renderer/utils/agentSession'
+import { Alert, Spin } from 'antd'
 import { motion } from 'framer-motion'
 import { memo, useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -87,12 +87,14 @@ const Sessions: React.FC<SessionsProps> = ({ agentId }) => {
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
         className="flex h-full items-center justify-center">
-        <Spinner size="lg" />
+        <Spin />
       </motion.div>
     )
   }
 
-  if (error) return <Alert color="danger" content={t('agent.session.get.error.failed')} />
+  if (error) {
+    return <Alert type="error" message={t('agent.session.get.error.failed')} showIcon style={{ margin: 10 }} />
+  }
 
   return (
     <div className="sessions-tab flex h-full w-full flex-col p-2">

src/renderer/src/pages/home/Tabs/index.tsx

@@ -1,4 +1,3 @@
-import { Skeleton } from '@heroui/react'
 import AddAssistantPopup from '@renderer/components/Popups/AddAssistantPopup'
 import { useActiveSession } from '@renderer/hooks/agents/useActiveSession'
 import { useUpdateSession } from '@renderer/hooks/agents/useUpdateSession'
@@ -12,7 +11,7 @@ import { setActiveAgentId, setActiveTopicOrSessionAction } from '@renderer/store
 import type { Assistant, Topic } from '@renderer/types'
 import type { Tab } from '@renderer/types/chat'
 import { classNames, getErrorMessage, uuid } from '@renderer/utils'
-import { Alert } from 'antd'
+import { Alert, Skeleton } from 'antd'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -167,11 +166,11 @@ const HomeTabs: FC<Props> = ({
         )}
         {tab === 'settings' && isTopicView && <Settings assistant={activeAssistant} />}
         {tab === 'settings' && isSessionView && !sessionError && (
-          <Skeleton isLoaded={!isSessionLoading} className="h-full">
+          <Skeleton loading={isSessionLoading} active style={{ height: '100%', padding: '16px' }}>
             <SessionSettingsTab session={session} update={updateSession} />
           </Skeleton>
         )}
-        {tab === 'settings' && (
+        {tab === 'settings' && isSessionView && sessionError && (
           <div className="w-[var(--assistants-width)] p-2 px-3 pt-4">
             <Alert
               type="error"