fix focus state UI

Author: sawka

frontend/app/aipanel/aipanel.tsx

@@ -33,7 +33,7 @@ const AIPanelComponent = memo(({ className, onClose }: AIPanelProps) => {
     const inputRef = useRef<AIPanelInputRef>(null);
     const isLayoutMode = jotai.useAtomValue(atoms.controlShiftDelayAtom);
     const showOverlayBlockNums = jotai.useAtomValue(getSettingsKeyAtom("app:showoverlayblocknums")) ?? true;
-    const isInputFocused = jotai.useAtomValue(atoms.waveAIFocusedAtom);
+    const isFocused = jotai.useAtomValue(atoms.waveAIFocusedAtom);
     const telemetryEnabled = jotai.useAtomValue(getSettingsKeyAtom("telemetry:enabled")) ?? false;
 
     const { messages, sendMessage, status, setMessages, error } = useChat({
@@ -163,7 +163,7 @@ const AIPanelComponent = memo(({ className, onClose }: AIPanelProps) => {
     const handleDragOver = (e: React.DragEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        
+
         const hasFiles = hasFilesDragged(e.dataTransfer);
         if (hasFiles && !isDragOver) {
             setIsDragOver(true);
@@ -175,7 +175,7 @@ const AIPanelComponent = memo(({ className, onClose }: AIPanelProps) => {
     const handleDragEnter = (e: React.DragEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        
+
         if (hasFilesDragged(e.dataTransfer)) {
             setIsDragOver(true);
         }
@@ -235,15 +235,15 @@ const AIPanelComponent = memo(({ className, onClose }: AIPanelProps) => {
     return (
         <div
             className={cn(
-                "bg-gray-900 flex flex-col relative h-[calc(100%-3px)] mt-1",
+                "bg-gray-900 flex flex-col relative h-[calc(100%-4px)] mt-1",
                 className,
                 isDragOver && "bg-gray-800 border-accent",
-                isInputFocused ? "border-t border-accent" : "border-t border-gray-600"
+                isFocused ? "border-2 border-accent" : "border-2 border-transparent"
             )}
             style={{
-                borderRight: isInputFocused ? "1px solid var(--accent-color)" : "1px solid rgb(75, 85, 99)",
-                borderTopRightRadius: "var(--block-border-radius)",
-                borderBottomRightRadius: "var(--block-border-radius)",
+                borderTopRightRadius: 10,
+                borderBottomRightRadius: 10,
+                borderBottomLeftRadius: 10,
             }}
             onDragOver={handleDragOver}
             onDragEnter={handleDragEnter}

frontend/app/aipanel/aipanelinput.tsx

@@ -21,6 +21,7 @@ export interface AIPanelInputRef {
 
 export const AIPanelInput = memo(
     forwardRef<AIPanelInputRef, AIPanelInputProps>(({ input, setInput, onSubmit, status }, ref) => {
+        const isFocused = useAtomValue(atoms.waveAIFocusedAtom);
         const textareaRef = useRef<HTMLTextAreaElement>(null);
         const isPanelOpen = useAtomValue(workspaceLayoutModel.panelVisibleAtom);
 
@@ -68,7 +69,7 @@ export const AIPanelInput = memo(
         }, [isPanelOpen, resizeTextarea]);
 
         return (
-            <div className="border-t border-gray-600">
+            <div className={cn("border-t", isFocused ? "border-accent/50" : "border-gray-600")}>
                 <form onSubmit={onSubmit}>
                     <div className="relative">
                         <textarea
@@ -79,7 +80,10 @@ export const AIPanelInput = memo(
                             onFocus={handleFocus}
                             onBlur={handleBlur}
                             placeholder="Ask Wave AI anything..."
-                            className="w-full bg-gray-800 text-white px-2 py-2 pr-6 focus:outline-none resize-none overflow-hidden"
+                            className={cn(
+                                "w-full  text-white px-2 py-2 pr-6 focus:outline-none resize-none overflow-hidden",
+                                isFocused ? "bg-accent-900/50" : "bg-gray-800"
+                            )}
                             style={{ fontSize: "13px" }}
                             rows={2}
                         />