fix: better chat

Author: astandrik

src/features/chat/components/ChatInput/ChatInput.scss

@@ -1,91 +1,50 @@
 .chat-input {
-    display: flex;
-    gap: 12px;
-    align-items: flex-end;
+    width: 100%;
 
-    &__field {
-        flex: 1;
+    &__container {
         position: relative;
+
+        width: 100%;
     }
 
-    &__textarea {
-        resize: none;
-        min-height: 40px;
-        max-height: 200px;
-        font-size: 14px;
-        line-height: 1.4;
-        
-        &:focus {
-            outline: none;
+    &__field {
+        width: 100%;
+
+        .g-text-area__control {
+            padding-right: 100px;
+
+            resize: none;
         }
     }
 
-    &__actions {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
+    &__button-container {
+        position: absolute;
+        right: 6px;
+        bottom: 4px;
     }
 
     &__send-button,
     &__stop-button {
-        min-width: 80px;
-        height: 40px;
         display: flex;
-        align-items: center;
         justify-content: center;
+        align-items: center;
         gap: 6px;
-        font-size: 14px;
-        font-weight: 500;
-    }
-
-    &__send-button {
-        &:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-    }
-
-    &__stop-button {
-        background: var(--g-color-base-danger);
-        border-color: var(--g-color-line-danger);
-        color: var(--g-color-text-danger);
-
-        &:hover:not(:disabled) {
-            background: var(--g-color-base-danger-hover);
-        }
-    }
-}
-
-// Auto-resize textarea behavior
-.chat-input__textarea {
-    transition: height 0.1s ease;
-    overflow-y: hidden;
-}
 
-// Focus states
-.chat-input:focus-within {
-    .chat-input__send-button:not(:disabled) {
-        background: var(--g-color-base-brand);
-        border-color: var(--g-color-line-brand);
+        min-width: 80px;
+        height: 36px;
     }
 }
 
-// Mobile responsive
 @media (max-width: 768px) {
     .chat-input {
-        flex-direction: column;
-        gap: 8px;
-
-        &__actions {
-            flex-direction: row;
-            justify-content: flex-end;
+        &__field .g-text-area__control {
+            padding-right: 90px;
         }
 
         &__send-button,
         &__stop-button {
-            min-width: 60px;
-            height: 36px;
-            font-size: 13px;
+            min-width: 70px;
+            height: 32px;
         }
     }
-}
+}

src/features/chat/components/ChatInput/ChatInput.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
 
-import {Button, Icon, TextArea} from '@gravity-ui/uikit';
+import {CirclePlay, CircleStop} from '@gravity-ui/icons';
+import {ActionTooltip, Button, Icon, TextArea} from '@gravity-ui/uikit';
 
 import './ChatInput.scss';
 
-// Icons - these would need to be imported from your icon library
-const SendIcon = () => <span>➤</span>;
-const StopIcon = () => <span>⏹</span>;
-
 interface ChatInputProps {
     onSendMessage: (message: string) => void;
     disabled?: boolean;
@@ -26,32 +23,22 @@ export const ChatInput = ({
     const [message, setMessage] = React.useState('');
     const textAreaRef = React.useRef<HTMLTextAreaElement>(null);
 
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
+    const handleSubmit = () => {
         if (message.trim() && !disabled) {
             onSendMessage(message.trim());
             setMessage('');
-            // Reset textarea height
-            if (textAreaRef.current) {
-                textAreaRef.current.style.height = 'auto';
-            }
         }
     };
 
     const handleKeyDown = (e: React.KeyboardEvent) => {
         if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
-            handleSubmit(e);
+            handleSubmit();
         }
     };
 
     const handleChange = (value: string) => {
         setMessage(value);
-        // Auto-resize textarea
-        if (textAreaRef.current) {
-            textAreaRef.current.style.height = 'auto';
-            textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
-        }
     };
 
     const handleStop = () => {
@@ -67,50 +54,51 @@ export const ChatInput = ({
         }
     }, []);
 
+    const actionButton = isStreaming ? (
+        <ActionTooltip title="Stop generation">
+            <Button
+                view="flat-danger"
+                size="m"
+                onClick={handleStop}
+                className="chat-input__stop-button"
+            >
+                <Icon data={CircleStop} size={16} />
+                Stop
+            </Button>
+        </ActionTooltip>
+    ) : (
+        <ActionTooltip title="Send message (Enter)">
+            <Button
+                view="action"
+                size="m"
+                disabled={disabled || !message.trim()}
+                onClick={handleSubmit}
+                className="chat-input__send-button"
+            >
+                <Icon data={CirclePlay} size={16} />
+                Send
+            </Button>
+        </ActionTooltip>
+    );
+
     return (
-        <form className="chat-input" onSubmit={handleSubmit}>
-            <div className="chat-input__field">
+        <div className="chat-input">
+            <div className="chat-input__container">
                 <TextArea
-                    ref={textAreaRef}
+                    controlRef={textAreaRef}
                     value={message}
                     onUpdate={handleChange}
                     onKeyDown={handleKeyDown}
                     placeholder={placeholder}
                     disabled={disabled}
-                    rows={1}
                     autoFocus
+                    size="xl"
                     minRows={1}
-                    maxRows={8}
-                    className="chat-input__textarea"
+                    maxRows={6}
+                    className="chat-input__field"
                 />
+                <div className="chat-input__button-container">{actionButton}</div>
             </div>
-
-            <div className="chat-input__actions">
-                {isStreaming ? (
-                    <Button
-                        view="action"
-                        size="m"
-                        onClick={handleStop}
-                        title="Stop generation"
-                        className="chat-input__stop-button"
-                    >
-                        <Icon data={StopIcon} />
-                        Stop
-                    </Button>
-                ) : (
-                    <Button
-                        view="action"
-                        size="m"
-                        type="submit"
-                        disabled={disabled || !message.trim()}
-                        title="Send message (Enter)"
-                        className="chat-input__send-button"
-                    >
-                        <Icon data={SendIcon} />
-                        Send
-                    </Button>
-                )}
-            </div>
-        </form>
+        </div>
     );
 };