fix: better ui

astandrik · astandrik · commit 1d329237f395 · 2025-06-25T15:33:43.000+03:00
diff --git a/src/features/chat/components/ChatMessage/ChatMessage.tsx b/src/features/chat/components/ChatMessage/ChatMessage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Button, Icon} from '@gravity-ui/uikit';
+import {ClipboardButton} from '@gravity-ui/uikit';
 
 import type {ChatMessage as ChatMessageType} from '../../types/chat';
 import {ToolCallBlock} from '../ToolCallBlock/ToolCallBlock';
@@ -12,17 +12,18 @@ import './ChatMessage.scss';
 const UserIcon = () => <span>👤</span>;
 const AssistantIcon = () => <span>🤖</span>;
 const ToolIcon = () => <span>🔧</span>;
-const CopyIcon = () => <span>📋</span>;
 
 interface ChatMessageProps {
     message: ChatMessageType;
+    isStreaming?: boolean;
+    isLastMessage?: boolean;
 }
 
-export const ChatMessage = ({message}: ChatMessageProps) => {
-    const handleCopyContent = () => {
-        navigator.clipboard.writeText(message.content);
-    };
-
+export const ChatMessage = ({
+    message,
+    isStreaming = false,
+    isLastMessage = false,
+}: ChatMessageProps) => {
     const formatTimestamp = (timestamp: number) => {
         return new Date(timestamp).toLocaleTimeString();
     };
@@ -256,18 +257,25 @@ export const ChatMessage = ({message}: ChatMessageProps) => {
     const getMessageIcon = () => {
         switch (message.role) {
             case 'user':
-                return <Icon data={UserIcon} />;
+                return <UserIcon />;
             case 'assistant':
-                return <Icon data={AssistantIcon} />;
+                return <AssistantIcon />;
             case 'tool':
-                return <Icon data={ToolIcon} />;
+                return <ToolIcon />;
             default:
                 return null;
         }
     };
 
     const getMessageClass = () => {
-        return `chat-message chat-message--${message.role}`;
+        let className = `chat-message chat-message--${message.role}`;
+
+        // Add complete class for assistant messages that are not currently streaming
+        if (message.role === 'assistant' && (!isStreaming || !isLastMessage)) {
+            className += ' chat-message--complete';
+        }
+
+        return className;
     };
 
     return (
@@ -287,9 +295,7 @@ export const ChatMessage = ({message}: ChatMessageProps) => {
                     </span>
                 </div>
                 <div className="chat-message__actions">
-                    <Button view="flat" size="xs" onClick={handleCopyContent} title="Copy message">
-                        <Icon data={CopyIcon} />
-                    </Button>
+                    <ClipboardButton text={message.content} size="xs" />
                 </div>
             </div>
 
diff --git a/src/features/chat/components/ChatPanel/ChatPanel.scss b/src/features/chat/components/ChatPanel/ChatPanel.scss
@@ -107,6 +107,39 @@
         font-size: 16px;
     }
 
+    &__loading-message {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+
+        padding: 12px 16px;
+    }
+
+    &__assistant-avatar {
+        flex-shrink: 0;
+
+        width: 32px;
+        height: 32px;
+
+        font-size: 16px;
+        line-height: 32px;
+        text-align: center;
+
+        border-radius: 50%;
+        background: var(--g-color-base-generic-light);
+    }
+
+    &__loading-content {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        padding: 8px 12px;
+
+        border-radius: 12px;
+        background: var(--g-color-base-generic-light);
+    }
+
     &__quota {
         flex-shrink: 0;
 
diff --git a/src/features/chat/components/ChatPanel/ChatPanel.tsx b/src/features/chat/components/ChatPanel/ChatPanel.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 
-import {Xmark} from '@gravity-ui/icons';
+import {TrashBin, Xmark} from '@gravity-ui/icons';
 import {Drawer, DrawerItem} from '@gravity-ui/navigation';
 import {ActionTooltip, Button, Icon, Text} from '@gravity-ui/uikit';
 import {useSelector} from 'react-redux';
 
+import {Loader} from '../../../../components/Loader/Loader';
 import {cn} from '../../../../utils/cn';
 import {useChat} from '../../hooks/useChat';
 import {formatContextForAI, useCurrentContext} from '../../services/contextService';
@@ -18,7 +19,7 @@ import './ChatPanel.scss';
 const b = cn('ydb-chat-drawer');
 
 export const ChatPanel = () => {
-    const {messages, isLoading, isStreaming, error, isOpen} = useSelector(
+    const {messages, isStreaming, error, isOpen} = useSelector(
         (state: {chat: ChatState}) => state.chat,
     );
     const messagesEndRef = React.useRef<HTMLDivElement>(null);
@@ -47,8 +48,8 @@ export const ChatPanel = () => {
 
     // Update quota after chat completion
     React.useEffect(() => {
-        // When streaming stops and loading is complete, refresh quota
-        if (!isStreaming && !isLoading && messages.length > 0) {
+        // When streaming stops, refresh quota
+        if (!isStreaming && messages.length > 0) {
             // Add a small delay to ensure the message is fully processed
             const timer = setTimeout(() => {
                 setQuotaRefreshTrigger((prev) => prev + 1);
@@ -57,7 +58,7 @@ export const ChatPanel = () => {
             return () => clearTimeout(timer);
         }
         return undefined;
-    }, [isStreaming, isLoading, messages.length]);
+    }, [isStreaming, messages.length]);
 
     const handleSendMessage = async (content: string) => {
         const contextString = formatContextForAI(context);
@@ -111,9 +112,9 @@ export const ChatPanel = () => {
                 <div className={b('header')}>
                     <div className={b('header-left')}>
                         <Text variant="subheader-2">AI Ассистент</Text>
-                        <QuotaDisplay compact refreshTrigger={quotaRefreshTrigger} />
                     </div>
                     <div className={b('controls')}>
+                        <QuotaDisplay compact refreshTrigger={quotaRefreshTrigger} />
                         <ActionTooltip title="Очистить историю (⌘K)">
                             <Button
                                 view="flat"
@@ -123,7 +124,7 @@ export const ChatPanel = () => {
                                     messages.filter((msg) => msg.role !== 'tool').length === 0
                                 }
                             >
-                                🗑
+                                <Icon data={TrashBin} size={16} />
                             </Button>
                         </ActionTooltip>
                         <ActionTooltip title="Закрыть">
@@ -200,9 +201,33 @@ export const ChatPanel = () => {
 
                     {messages
                         .filter((message) => message.role !== 'tool')
-                        .map((message) => (
-                            <ChatMessage key={message.id} message={message} />
-                        ))}
+                        .map((message, index, filteredMessages) => {
+                            const isLastMessage = index === filteredMessages.length - 1;
+                            return (
+                                <ChatMessage
+                                    key={message.id}
+                                    message={message}
+                                    isStreaming={isStreaming}
+                                    isLastMessage={isLastMessage}
+                                />
+                            );
+                        })}
+
+                    {isStreaming &&
+                        (() => {
+                            const nonToolMessages = messages.filter((msg) => msg.role !== 'tool');
+                            const lastMessage = nonToolMessages[nonToolMessages.length - 1];
+                            return lastMessage?.role === 'user';
+                        })() && (
+                            <div className={b('loading-message')}>
+                                <div className={b('loading-content')}>
+                                    <Loader size="s" delay={0} />
+                                    <Text color="secondary" variant="body-2">
+                                        AI обрабатывает запрос...
+                                    </Text>
+                                </div>
+                            </div>
+                        )}
 
                     {error && (
                         <div className={b('error')}>
@@ -218,7 +243,7 @@ export const ChatPanel = () => {
                 <div className={b('input')}>
                     <ChatInput
                         onSendMessage={handleSendMessage}
-                        disabled={isLoading}
+                        disabled={isStreaming}
                         isStreaming={isStreaming}
                         onStopGeneration={stopGeneration}
                     />
diff --git a/src/features/chat/components/QuotaDisplay/QuotaDisplay.tsx b/src/features/chat/components/QuotaDisplay/QuotaDisplay.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {CircleDollar, Clock} from '@gravity-ui/icons';
-import {Icon, Progress, Text} from '@gravity-ui/uikit';
+import {Icon, Label, Progress, Text} from '@gravity-ui/uikit';
 
 import {cn} from '../../../../utils/cn';
 import type {QuotaInfo} from '../../types/chat';
@@ -83,17 +83,38 @@ export const QuotaDisplay = ({className, refreshTrigger, compact = false}: Quota
 
     // Compact mode - single line display
     if (compact) {
-        const highestUsage = Math.max(quota.daily.percentage, quota.monthly.percentage);
-        const isHighUsage = highestUsage > 80;
+        const getDailyTheme = () => {
+            if (quota.daily.percentage > 90) {
+                return 'danger';
+            }
+            if (quota.daily.percentage > 80) {
+                return 'warning';
+            }
+            return 'normal';
+        };
+
+        const getMonthlyTheme = () => {
+            if (quota.monthly.percentage > 90) {
+                return 'danger';
+            }
+            if (quota.monthly.percentage > 80) {
+                return 'warning';
+            }
+            return 'normal';
+        };
 
         return (
             <div className={b({compact}, className)}>
                 <div className={b('compact-content')}>
-                    <Icon data={CircleDollar} size={12} />
-                    <Text variant="caption-2" color={isHighUsage ? 'danger' : 'secondary'}>
-                        {formatCost(quota.daily.used)}/{formatLimit(quota.daily.limit)} •{' '}
-                        {formatCost(quota.monthly.used)}/{formatLimit(quota.monthly.limit)}
+                    <Text variant="body-2" color="secondary">
+                        Квота:
                     </Text>
+                    <Label theme={getDailyTheme()} size="xs">
+                        День: {formatCost(quota.daily.used)}/{formatLimit(quota.daily.limit)}
+                    </Label>
+                    <Label theme={getMonthlyTheme()} size="xs">
+                        Месяц: {formatCost(quota.monthly.used)}/{formatLimit(quota.monthly.limit)}
+                    </Label>
                 </div>
             </div>
         );
@@ -120,9 +141,18 @@ export const QuotaDisplay = ({className, refreshTrigger, compact = false}: Quota
                     </div>
 
                     <div className={b('period-info')}>
-                        <Text variant="caption-2" color="secondary">
+                        <Label
+                            theme={
+                                quota.daily.percentage > 90
+                                    ? 'danger'
+                                    : quota.daily.percentage > 80
+                                      ? 'warning'
+                                      : 'normal'
+                            }
+                            size="xs"
+                        >
                             {formatCost(quota.daily.used)} / {formatLimit(quota.daily.limit)}
-                        </Text>
+                        </Label>
 
                         {quota.daily.limit !== Infinity && (
                             <Progress
@@ -145,9 +175,18 @@ export const QuotaDisplay = ({className, refreshTrigger, compact = false}: Quota
                     </div>
 
                     <div className={b('period-info')}>
-                        <Text variant="caption-2" color="secondary">
+                        <Label
+                            theme={
+                                quota.monthly.percentage > 90
+                                    ? 'danger'
+                                    : quota.monthly.percentage > 80
+                                      ? 'warning'
+                                      : 'normal'
+                            }
+                            size="xs"
+                        >
                             {formatCost(quota.monthly.used)} / {formatLimit(quota.monthly.limit)}
-                        </Text>
+                        </Label>
 
                         {quota.monthly.limit !== Infinity && (
                             <Progress
diff --git a/src/features/chat/components/UsageDisplay/UsageDisplay.tsx b/src/features/chat/components/UsageDisplay/UsageDisplay.tsx
@@ -1,5 +1,5 @@
 import {CircleDollar} from '@gravity-ui/icons';
-import {Icon, Text} from '@gravity-ui/uikit';
+import {Icon, Label} from '@gravity-ui/uikit';
 
 import {cn} from '../../../../utils/cn';
 import type {UsageBreakdown} from '../../types/chat';
@@ -32,9 +32,9 @@ export const UsageDisplay = ({usage, className}: UsageDisplayProps) => {
         <div className={b(null, className)}>
             <div className={b('content')}>
                 <Icon data={CircleDollar} size={12} />
-                <Text variant="caption-2" color="secondary">
+                <Label theme="normal" size="xs">
                     {formatTokens(usage.totalTokens)} tokens • {formatCost(usage.estimatedCost)}
-                </Text>
+                </Label>
             </div>
         </div>
     );
diff --git a/src/features/chat/hooks/useChat.ts b/src/features/chat/hooks/useChat.ts
@@ -7,16 +7,14 @@ import type {ChatDelta, ChatMessage} from '../types/chat';
 
 export function useChat() {
     const dispatch = useDispatch();
-    const {messages, isLoading, isStreaming, error, isOpen} = useSelector(
-        (state: any) => state.chat,
-    );
+    const {messages, isStreaming, error, isOpen} = useSelector((state: any) => state.chat);
     const abortControllerRef = React.useRef<AbortController | null>(null);
 
     const generateMessageId = () => `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
 
     const sendMessage = React.useCallback(
         async (content: string, context?: string) => {
-            if (!content.trim() || isLoading) {
+            if (!content.trim() || isStreaming) {
                 return;
             }
 
@@ -58,7 +56,7 @@ export function useChat() {
                 }
             }
         },
-        [dispatch, messages, isLoading],
+        [dispatch, messages, isStreaming],
     );
 
     const stopGeneration = React.useCallback(() => {
@@ -109,7 +107,6 @@ export function useChat() {
 
     return {
         messages,
-        isLoading,
         isStreaming,
         error,
         isOpen,
diff --git a/src/features/chat/store/chatSlice.ts b/src/features/chat/store/chatSlice.ts
diff --git a/src/features/chat/types/chat.ts b/src/features/chat/types/chat.ts
