better ux for thinkingmode control (more responsive, less likely to overlap message) #2565
Conversation
WalkthroughThis pull request introduces container query support and responsive design adjustments to the AI panel components. Changes include adding the Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (5)
frontend/app/aipanel/aimessage.tsx(1 hunks)frontend/app/aipanel/aipanel.tsx(1 hunks)frontend/app/aipanel/aipanelheader.tsx(1 hunks)frontend/app/aipanel/thinkingmode.tsx(2 hunks)frontend/tailwindsetup.css(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-10-21T05:09:26.916Z
Learnt from: sawka
Repo: wavetermdev/waveterm PR: 2465
File: frontend/app/onboarding/onboarding-upgrade.tsx:13-21
Timestamp: 2025-10-21T05:09:26.916Z
Learning: In the waveterm codebase, clientData is loaded and awaited in wave.ts before React runs, ensuring it is always available when components mount. This means atoms.client will have data on first render.
Applied to files:
frontend/app/aipanel/thinkingmode.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Build for TestDriver.ai
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Analyze (go)
🔇 Additional comments (6)
frontend/tailwindsetup.css (1)
68-68: LGTM! New container width token added.The new
--container-w450: 450pxtoken is properly placed and follows the existing pattern. This enables the@w450container query breakpoint used in the ThinkingMode component and user messages.frontend/app/aipanel/aipanel.tsx (1)
467-467: LGTM! Container query support enabled.Adding the
@containerdirective to the AIPanel establishes the container query context, allowing child components (like ThinkingMode and AIMessage) to use container-based responsive breakpoints such as@w450.frontend/app/aipanel/aipanelheader.tsx (1)
19-19: LGTM! Redundant container directive removed.Correctly removes the
@containerdirective from the header since the parent AIPanel component (in aipanel.tsx) now establishes the container query context. This avoids unnecessary nested container contexts while preserving the responsive@xs:variants.frontend/app/aipanel/thinkingmode.tsx (3)
5-5: Good addition of thecnutility.The
cnutility import enables dynamic class composition for the conditional styling based on theisOpenstate.
68-71: Dynamic class composition improves visual feedback.The button now dynamically adjusts its background color based on the
isOpenstate, providing better visual feedback to users when the dropdown is active.
75-77: Smart responsive visibility controls — verified and confirmed.The conditional visibility logic is correctly implemented. Tailwind v4 generates named container-query variants from the --container-* theme variables defined in the @theme section, and the codebase properly defines this setup in
git/frontend/tailwindsetup.csswith--container-w450: 450pxin the@themeblock. The@w450:inlinebreakpoint is therefore correctly recognized and applied. The implementation addresses the PR objectives as described, and the code will function as intended.
| "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)]" |
There was a problem hiding this comment.
🧩 Analysis chain
Responsive width constraints updated for better UX.
The user message max-width changes provide more consistent spacing to prevent overlap with other UI elements. The base width is adjusted to calc(100%-50px), and at container widths ≥450px, it further constrains to calc(100%-105px) to accommodate the expanded ThinkingMode button.
Verify that the @w450 container query breakpoint is properly configured in your Tailwind setup:
🏁 Script executed:
#!/bin/bash
# Check Tailwind configuration for container query setup
rg -n "container.*query|@container" tailwind.config.* 2>/dev/null || echo "No tailwind.config found, checking for Tailwind v4 setup..."
rg -n "containerQueries|container-queries" package.jsonLength of output: 59
I need to search more broadly for the Tailwind configuration in this codebase. Let me gather additional information:
🏁 Script executed:
#!/bin/bash
# Find tailwind config file with various extensions
fd -e js -e ts -e cjs -e mjs "tailwind\.config" . 2>/dev/null | head -20Length of output: 0
🏁 Script executed:
#!/bin/bash
# Check package.json for Tailwind and container-queries
cat package.json | grep -A 5 -B 5 "tailwind\|container-queries" 2>/dev/nullLength of output: 1216
🏁 Script executed:
#!/bin/bash
# Search for @w450 usage in the codebase
rg -n "@w450" . 2>/dev/nullLength of output: 309
🏁 Script executed:
#!/bin/bash
# Look for container query configuration patterns
rg -n "containers|@container" frontend/ --type=tsx --type=ts -C 3 2>/dev/null | head -50Length of output: 0
🏁 Script executed:
#!/bin/bash
# Check the actual file being reviewed
cat frontend/app/aipanel/aimessage.tsx | sed -n '220,235p'Length of output: 806
🏁 Script executed:
#!/bin/bash
# Search for tailwind config in package.json or other non-standard locations
cat package.json | grep -i "tailwind" | head -20Length of output: 150
🏁 Script executed:
#!/bin/bash
# Find all tailwind.config references and CSS files
fd "\.config\." . --type f 2>/dev/null | grep -i tailwind
fd "tailwind\.css\|globals\.css" . --type f 2>/dev/nullLength of output: 0
🏁 Script executed:
#!/bin/bash
# Search for where @w450 might be defined (CSS, schema, type defs)
rg -n "w450|containerQueries|container.*query" . --type=json --type=js --type=ts 2>/dev/null | grep -v node_modules | head -30Length of output: 309
🏁 Script executed:
#!/bin/bash
# Look for CSS files with custom breakpoint or container definitions
find . -name "*.css" -type f 2>/dev/null | grep -v node_modules | head -10
cat $(find . -name "*.css" -type f 2>/dev/null | grep -v node_modules | head -1)Length of output: 678
🏁 Script executed:
#!/bin/bash
# Check if there's inline tailwind config in vite.config or similar
fd "vite\.config|next\.config" . -e ts -e js 2>/dev/null | head -5Length of output: 59
🏁 Script executed:
#!/bin/bash
# Check the tailwindsetup.css file for custom breakpoints
cat frontend/tailwindsetup.cssLength of output: 3062
🏁 Script executed:
#!/bin/bash
# Check vite config for Tailwind theme configuration
cat tsunami/frontend/vite.config.tsLength of output: 886
🏁 Script executed:
#!/bin/bash
# Also check electron vite config
cat electron.vite.config.tsLength of output: 6061
🌐 Web query:
Tailwind v4 container query syntax @theme custom breakpoints
💡 Result:
Short summary + examples:
-
Turn an element into a container with @container, then use container-query variants that start with @ (e.g. @sm, @md, @max-md). You can also use @Min-[] / @max-[] arbitrary values and named containers like @container/foo with variants @sm/foo. [1][2]
-
Customize container breakpoints in your CSS with @theme using --container-* variables (and media breakpoints with --breakpoint-*). Example: define new container sizes or override defaults. [1][2]
Examples
- Basic container query
- Max / range / arbitrary
- Named container
- Define custom container breakpoints via @theme
Then use @8XL or @tablet as container variants. [1][2]
Notes
- Tailwind v4 includes built-in container query support (no plugin needed). [3]
- Use rem for consistency with default breakpoints to avoid ordering surprises, or use arbitrary @min/ @max values for one-offs. [1][2]
Sources
[1] Tailwind CSS docs — Responsive design / Container queries.
[2] StackOverflow discussion: using @container and customizing --container-* in Tailwind v4.
[3] Tailwind v4 beta notes (container query support in core).
🌐 Web query:
Tailwind v4.1 @container @w450 syntax how does it work
💡 Result:
Short answer: Tailwind v4.1 uses @container to turn an element into a CSS Container and then container-query variants to apply utilities based on the parent container’s size. You can use the built‑in named container breakpoints (e.g. @sm, @md, @lg) and also arbitrary container-query ranges with bracket syntax (e.g. @Min-[450px], @max-[28rem]) to target specific container widths.
How it works (example):
- Make parent a container:
...
- Use container-query variants on children:
@container-aware text
- Use an arbitrary width test:
becomes larger when parent ≥ 450px
Notes:
- @Min-* / @max-* variants map to container query min-width / max-width; you can stack them to make ranges (@Min-[320px]:@max-[600px]:...).
- The arbitrary-bracket form follows Tailwind’s arbitrary-value syntax (square brackets) and works the same for container queries as for breakpoint/utility values.
Sources: Tailwind v4 container-query docs and release notes (container queries, @min/@max variants) and examples of arbitrary container-query usage. [1][2][3]
References
[1] Tailwind v4 container-query support & examples (official v4 docs/release notes).
[2] Tailwind docs: container / sizing utilities (shows @container usage and @max/@min variants).
[3] Examples / community threads showing arbitrary @Min-[...] usage for container queries.
@w450 container query variants will not work—@container directive is missing from component hierarchy.
While the @w450 breakpoint is properly defined in frontend/tailwindsetup.css as --container-w450: 450px; and Tailwind v4.1.17 is correctly configured, container query variants like @w450:max-w-[calc(100%-105px)] (line 226) and @w450:inline (line 75) require a parent element marked with @container. A search of the codebase found no @container directive anywhere, meaning these responsive constraints will be silently ignored and never activate.
Add @container to an appropriate parent element in the component hierarchy, or remove the @w450: variants if container queries are not intended.
🤖 Prompt for AI Agents
In frontend/app/aipanel/aimessage.tsx around line 226, the Tailwind container
query variants like "@w450:max-w-[calc(100%-105px)]" (and "@w450:inline" at line
75) won't work because no ancestor element is marked with @container; add an
appropriate @container directive to a parent wrapper (for example the component
root or a nearby container that wraps the message elements) so the @w450
container queries can match, or if container queries are not desired remove the
@w450: variants; ensure the chosen parent is high enough in the component
hierarchy to cover these elements and that the container's inline size (or block
size if used) will trigger the defined --container-w450 breakpoint.
No description provided.