feat: implement expandable chat input with double-click detection and gradient tooltip

- Add expand button with Maximize2/Minimize2 icons - Implement 3-state height management (normal/50%/80%) - Smart double-click detection with 300ms delay - Height calculation based on session-view - 200px message space - Custom CSS tooltip with dark gradient background and backdrop blur - Send button anchored at bottom via margin-top: auto - Smooth CSS transitions throughout - Double-click at 80% now reduces to 50% (not normal) - Removed all debug console.log statements
2026-01-11 21:59:28 +08:00
parent bf9cef4cd5
commit 0d8a844af8
3 changed files with 103 additions and 44 deletions
--- a/packages/ui/src/components/expand-button.tsx
+++ b/packages/ui/src/components/expand-button.tsx
@@ -8,6 +8,7 @@ interface ExpandButtonProps {

 export default function ExpandButton(props: ExpandButtonProps) {
  const [clickTime, setClickTime] = createSignal<number>(0)
+  const [clickTimer, setClickTimer] = createSignal<number | null>(null)
  const DOUBLE_CLICK_THRESHOLD = 300

  function handleClick() {
@@ -15,30 +16,42 @@ export default function ExpandButton(props: ExpandButtonProps) {
    const lastClick = clickTime()
    const isDoubleClick = now - lastClick < DOUBLE_CLICK_THRESHOLD

-    setClickTime(now)
+    // Clear any pending single-click timer
+    const timer = clickTimer()
+    if (timer !== null) {
+      clearTimeout(timer)
+      setClickTimer(null)
+    }

    const current = props.expandState()

    if (isDoubleClick) {
-      // Double click behavior
+      // Double click behavior - execute immediately
      if (current === "normal") {
-        props.onToggleExpand("fifty")
+        props.onToggleExpand("eighty")
      } else if (current === "fifty") {
        props.onToggleExpand("eighty")
      } else {
-        props.onToggleExpand("normal")
-      }
-    } else {
-      // Single click behavior
-      if (current === "normal") {
        props.onToggleExpand("fifty")
-      } else {
-        props.onToggleExpand("normal")
      }
-    }
+      // Reset click time to prevent triple-click issues
+      setClickTime(0)
+    } else {
+      // Single click behavior - delay to wait for potential double-click
+      setClickTime(now)

-    // Reset click timer after threshold
-    setTimeout(() => setClickTime(0), DOUBLE_CLICK_THRESHOLD)
+      const newTimer = window.setTimeout(() => {
+        const currentState = props.expandState()
+        if (currentState === "normal") {
+          props.onToggleExpand("fifty")
+        } else {
+          props.onToggleExpand("normal")
+        }
+        setClickTimer(null)
+      }, DOUBLE_CLICK_THRESHOLD)
+
+      setClickTimer(newTimer)
+    }
  }

  const getTooltip = () => {
@@ -48,7 +61,7 @@ export default function ExpandButton(props: ExpandButtonProps) {
    } else if (current === "fifty") {
      return "Double-click to expand to 80% • Click to minimize"
    } else {
-      return "Click to minimize • Double-click to expand to 50%"
+      return "Click to minimize • Double-click to reduce to 50%"
    }
  }

@@ -59,7 +72,7 @@ export default function ExpandButton(props: ExpandButtonProps) {
      onClick={handleClick}
      disabled={false}
      aria-label="Toggle chat input height"
-      title={getTooltip()}
+      data-tooltip={getTooltip()}
    >
      <Show
        when={props.expandState() === "normal"}
--- a/packages/ui/src/components/prompt-input.tsx
+++ b/packages/ui/src/components/prompt-input.tsx
@@ -1,4 +1,4 @@
-import { createSignal, Show, onMount, For, onCleanup, createEffect, on, untrack } from "solid-js"
+import { createSignal, Show, onMount, For, onCleanup, createEffect, on, untrack, createMemo } from "solid-js"
 import { ArrowBigUp, ArrowBigDown } from "lucide-solid"
 import UnifiedPicker from "./unified-picker"
 import ExpandButton from "./expand-button"
@@ -52,22 +52,35 @@ export default function PromptInput(props: PromptInputProps) {
  let textareaRef: HTMLTextAreaElement | undefined
  let containerRef: HTMLDivElement | undefined

-  const calculateContainerHeight = () => {
-    if (!containerRef) return 0
-    const rect = containerRef.getBoundingClientRect()
-    const root = containerRef.closest(".session-view")
-    if (!root) return 0
-    const rootRect = root.getBoundingClientRect()
-    return rootRect.height - rect.top
-  }
+   const calculateExpandedHeight = () => {
+     if (!containerRef) {
+       return 0
+     }

-  const getExpandedHeight = (): string => {
-    const state = expandState()
-    if (state === "normal") return "auto"
-    const containerHeight = calculateContainerHeight()
-    if (state === "fifty") return `${containerHeight * 0.5}px`
-    return `${containerHeight * 0.8}px`
-  }
+     const root = containerRef.closest(".session-view")
+     if (!root) {
+       return 0
+     }
+     const rootRect = root.getBoundingClientRect()
+
+     // Reserve minimum space for message section (200px minimum)
+     const MIN_MESSAGE_SPACE = 200
+     const availableForInput = rootRect.height - MIN_MESSAGE_SPACE
+
+     return availableForInput
+   }
+
+   const expandedHeight = createMemo(() => {
+     const state = expandState()
+     if (state === "normal") return "auto"
+
+     const availableHeight = calculateExpandedHeight()
+
+     if (state === "fifty") {
+       return `${availableHeight * 0.5}px`
+     }
+     return `${availableHeight * 0.8}px`
+   })



@@ -721,11 +734,11 @@ export default function PromptInput(props: PromptInputProps) {
    void props.onAbortSession()
  }

-  function handleExpandToggle(nextState: "normal" | "fifty" | "eighty") {
-    setExpandState(nextState)
-    // Keep focus on textarea
-    textareaRef?.focus()
-  }
+   function handleExpandToggle(nextState: "normal" | "fifty" | "eighty") {
+     setExpandState(nextState)
+     // Keep focus on textarea
+     textareaRef?.focus()
+   }
  
  function handleInput(e: Event) {

@@ -1186,7 +1199,13 @@ export default function PromptInput(props: PromptInputProps) {
              </For>
            </div>
          </Show>
-          <div class="prompt-input-field-container">
+          <div 
+            class="prompt-input-field-container"
+            style={{
+              "height": expandedHeight(),
+              "transition": "height 0.25s ease",
+            }}
+          >
            <div class="prompt-input-field">
              <textarea
              ref={textareaRef}
@@ -1204,12 +1223,10 @@ export default function PromptInput(props: PromptInputProps) {
              onBlur={() => setIsFocused(false)}
              disabled={props.disabled}
              rows={4}
-              style={{
-                "padding-top": attachments().length > 0 ? "8px" : "0",
-                "height": getExpandedHeight(),
-                "overflow-y": expandState() !== "normal" ? "auto" : "visible",
-                "transition": "height 0.25s ease",
-              }}
+               style={{
+                 "padding-top": attachments().length > 0 ? "8px" : "0",
+                 "overflow-y": expandState() !== "normal" ? "auto" : "visible",
+               }}
              spellcheck={false}
              autocorrect="off"
              autoCapitalize="off"
--- a/packages/ui/src/styles/messaging/prompt-input.css
+++ b/packages/ui/src/styles/messaging/prompt-input.css
@@ -13,7 +13,7 @@
 }

 .prompt-input-actions {
-  @apply flex flex-col items-center justify-between;
+  @apply flex flex-col items-center;
  align-self: stretch;
  height: 100%;
  padding: 0.5rem 0.25rem;
@@ -122,6 +122,7 @@
  background-color: rgba(15, 23, 42, 0.04);
  transition: background-color 0.15s ease, color 0.15s ease;
  padding: 0;
+  position: relative;
 }

 .prompt-expand-button:hover:not(:disabled) {
@@ -140,6 +141,33 @@
  cursor: not-allowed;
 }

+.prompt-expand-button::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
+  color: var(--text-primary);
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  white-space: nowrap;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--border-base);
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  z-index: 1000;
+  backdrop-filter: blur(8px);
+}
+
+.prompt-expand-button:hover::after {
+  opacity: 1;
+  transform: translateY(0);
+}
+
 .prompt-overlay-text {
  display: inline-flex;
  align-items: center;
@@ -211,6 +239,7 @@
  @apply w-10 h-10 rounded-md border-none cursor-pointer flex items-center justify-center transition-all flex-shrink-0;
  background-color: var(--accent-primary);
  color: var(--text-inverted);
+  margin-top: auto;
 }

 .send-button.shell-mode {