better ux for thinkingmode control (more responsive, less likely to overlap message) (#2565)

Author: sawka

frontend/app/aipanel/aimessage.tsx

@@ -223,7 +223,7 @@ export const AIMessage = memo(({ message, isStreaming }: AIMessageProps) => {
                 className={cn(
                     "px-2 rounded-lg [&>*:first-child]:!mt-0",
                     message.role === "user"
-                        ? "py-2 bg-accent-800 text-white max-w-[calc(90%-10px)]"
+                        ? "py-2 bg-accent-800 text-white max-w-[calc(100%-50px)] @w450:max-w-[calc(100%-105px)]"
                         : "min-w-[min(100%,500px)]"
                 )}
             >

frontend/app/aipanel/aipanel.tsx

@@ -464,7 +464,7 @@ const AIPanelComponentInner = memo(() => {
             ref={containerRef}
             data-waveai-panel="true"
             className={cn(
-                "bg-gray-900 flex flex-col relative",
+                "@container bg-gray-900 flex flex-col relative",
                 model.inBuilder ? "mt-0 h-full" : "mt-1 h-[calc(100%-4px)]",
                 (isDragOver || isReactDndDragOver) && "bg-gray-800 border-accent",
                 isFocused ? "border-2 border-accent" : "border-2 border-transparent"

frontend/app/aipanel/aipanelheader.tsx

@@ -16,7 +16,7 @@ export const AIPanelHeader = memo(() => {
     };
 
     return (
-        <div className="@container py-2 pl-3 pr-1 @xs:p-2 @xs:pl-4 border-b border-gray-600 flex items-center justify-between min-w-0">
+        <div className="py-2 pl-3 pr-1 @xs:p-2 @xs:pl-4 border-b border-gray-600 flex items-center justify-between min-w-0">
             <h2 className="text-white text-sm @xs:text-lg font-semibold flex items-center gap-2 flex-shrink-0 whitespace-nowrap">
                 <i className="fa fa-sparkles text-accent"></i>
                 Wave AI

frontend/app/aipanel/thinkingmode.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { atoms } from "@/app/store/global";
+import { cn } from "@/util/util";
 import { useAtomValue } from "jotai";
 import { memo, useRef, useState } from "react";
 import { WaveAIModel } from "./waveai-model";
@@ -64,11 +65,16 @@ export const ThinkingLevelDropdown = memo(() => {
         <div className="relative" ref={dropdownRef}>
             <button
                 onClick={() => setIsOpen(!isOpen)}
-                className="flex items-center gap-1.5 px-2 py-1 text-xs text-gray-300 hover:text-white bg-gray-800/50 hover:bg-gray-700/50 rounded transition-colors cursor-pointer border border-gray-600/50"
+                className={cn(
+                    "group flex items-center gap-1.5 px-2 py-1 text-xs text-gray-300 hover:text-white rounded transition-colors cursor-pointer border border-gray-600/50",
+                    isOpen ? "bg-gray-700" : "bg-gray-800/50 hover:bg-gray-700"
+                )}
                 title={`Thinking: ${currentMetadata.name}`}
             >
                 <i className={`fa ${currentMetadata.icon} text-[10px]`}></i>
-                <span className="text-[11px]">{currentMetadata.name}</span>
+                <span className={`text-[11px] ${isOpen ? "inline" : "hidden group-hover:inline @w450:inline"}`}>
+                    {currentMetadata.name}
+                </span>
                 <i className="fa fa-chevron-down text-[8px]"></i>
             </button>
 

frontend/tailwindsetup.css

@@ -65,6 +65,7 @@
     --ansi-brightcyan: #b7b8cb;
     --ansi-brightwhite: #f0f0f0;
 
+    --container-w450: 450px;
     --container-xs: 300px;
     --container-xxs: 200px;
     --container-tiny: 120px;