mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-07-03 20:41:07 +02:00
feat: animate web search button toggle
This commit is contained in:
parent
50b5d20694
commit
918cb5bb75
1 changed files with 21 additions and 18 deletions
|
|
@ -576,25 +576,28 @@ function ChatInputInner({
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
{searchAvailable && (
|
{searchAvailable && (
|
||||||
searchEnabled ? (
|
<button
|
||||||
<button
|
type="button"
|
||||||
type="button"
|
onClick={() => setSearchEnabled((v) => !v)}
|
||||||
onClick={() => setSearchEnabled(false)}
|
aria-label="Search"
|
||||||
className="flex h-7 shrink-0 items-center gap-1.5 rounded-full border border-blue-200 bg-blue-50 px-2.5 text-blue-600 transition-colors hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-400 dark:hover:bg-blue-900"
|
aria-pressed={searchEnabled}
|
||||||
|
className={cn(
|
||||||
|
'flex h-7 shrink-0 items-center rounded-full border px-1.5 transition-colors duration-150 ease-out',
|
||||||
|
searchEnabled
|
||||||
|
? 'border-blue-200 bg-blue-50 text-blue-600 hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-400 dark:hover:bg-blue-900'
|
||||||
|
: 'border-transparent text-muted-foreground hover:bg-muted hover:text-foreground'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Globe className="h-4 w-4 shrink-0" />
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
'overflow-hidden whitespace-nowrap text-xs font-medium transition-all duration-150 ease-out',
|
||||||
|
searchEnabled ? 'ml-1.5 max-w-[60px] opacity-100' : 'max-w-0 opacity-0'
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<Globe className="h-3.5 w-3.5" />
|
Search
|
||||||
<span className="text-xs font-medium">Search</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setSearchEnabled(true)}
|
|
||||||
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
|
||||||
aria-label="Search"
|
|
||||||
>
|
|
||||||
<Globe className="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
)}
|
)}
|
||||||
<div className="flex-1" />
|
<div className="flex-1" />
|
||||||
{lockedModel ? (
|
{lockedModel ? (
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue