AI Chat

"use client"

import {
  ArrowUpIcon,
  CopyIcon,
  GlobeIcon,
  ImageIcon,
  MicIcon,
  PaperclipIcon,
  PlusIcon,
  RefreshCwIcon,
  SquareIcon,
  ThumbsDownIcon,
  ThumbsUpIcon,
} from "lucide-react"
import type React from "react"
import { useState } from "react"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group"
import { Message, MessageContent, MessageFooter } from "@/components/ui/message"
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/ui/message-scroller"
import { Textarea } from "@/components/ui/textarea"
import { cn } from "@/lib/utils"

type Turn = {
  id: string
  role: "user" | "assistant"
  text: string
  streaming?: boolean
}

const thread: Turn[] = [
  {
    id: "1",
    role: "user",
    text: "Is it true that a day on Venus is longer than its year?",
  },
  {
    id: "2",
    role: "assistant",
    text: "Yes. Venus takes 243 Earth days to rotate once, but only 225 days to orbit the Sun, so its day is longer than its year.\n\nIt also spins in the opposite direction to most planets, which means the Sun rises in the west there.",
  },
  { id: "3", role: "user", text: "How hot does it get on the surface?" },
  {
    id: "4",
    role: "assistant",
    text: "The surface sits around 465°C, hot enough to melt lead. The atmosphere traps so much heat that Venus stays hotter than Mercury, even though Mercury is much closer to the Sun.",
  },
]

const replies = [
  "Good question. Venus has no moons and no rings, which makes it unusual among the inner planets. Most explanations point to its slow, retrograde spin: any moon it once had would have drifted inward and been pulled apart by tidal forces.\n\nMercury is the only other moonless planet in the solar system.",
  "The clouds are mostly sulfuric acid droplets, sitting about 50 to 70 km above the surface. They reflect roughly 75% of incoming sunlight, which is why Venus is the brightest object in our sky after the Moon.\n\nBelow the clouds the air is almost entirely carbon dioxide, with pressure about 92 times that of Earth at sea level.",
  "Several landers have made it down. The Soviet Venera 7 was the first to transmit from the surface in 1970, and Venera 13 survived for 127 minutes in 1982, long enough to send back the first color photos.\n\nNothing has lasted more than a couple of hours; the heat and pressure destroy electronics quickly.",
]

const thinkDelay = 600
const wordDelay = 35

const easeOut = "ease-[cubic-bezier(0.23,1,0.32,1)]"
const press = `${easeOut} transition-[scale,background-color] duration-150 active:scale-[0.96]`
const enter = `${easeOut} motion-reduce:slide-in-from-bottom-0 fade-in slide-in-from-bottom-1 animate-in duration-200`
const swap = `${easeOut} fade-in zoom-in-95 animate-in duration-150`

export default function Chat01() {
  const [turns, setTurns] = useState(thread)
  const [draft, setDraft] = useState("")
  const [listening, setListening] = useState(false)
  const [replyIndex, setReplyIndex] = useState(0)
  const [edit, setEdit] = useState<{ id: string; text: string } | null>(null)
  const streaming = turns.some((t) => t.streaming)

  const stream = (replyId: string) => {
    const words = replies[replyIndex % replies.length].split(" ")
    setReplyIndex(replyIndex + 1)
    setTurns((prev) =>
      prev.map((t) =>
        t.id === replyId ? { ...t, text: "", streaming: true } : t
      )
    )
    let shown = 0
    setTimeout(() => {
      const timer = setInterval(() => {
        shown += 1
        const done = shown >= words.length
        setTurns((prev) =>
          prev.map((t) =>
            t.id === replyId
              ? {
                  ...t,
                  text: words.slice(0, shown).join(" "),
                  streaming: !done,
                }
              : t
          )
        )
        if (done) {
          clearInterval(timer)
        }
      }, wordDelay)
    }, thinkDelay)
  }

  const send = (e: React.FormEvent) => {
    e.preventDefault()
    const text = draft.trim()
    if (!text || streaming) {
      return
    }
    const replyId = crypto.randomUUID()
    setTurns([
      ...turns,
      { id: crypto.randomUUID(), role: "user", text },
      { id: replyId, role: "assistant", text: "" },
    ])
    setDraft("")
    stream(replyId)
  }

  const resend = () => {
    const text = edit?.text.trim()
    if (!(edit && text) || streaming) {
      return
    }
    const at = turns.findIndex((t) => t.id === edit.id)
    const replyId = crypto.randomUUID()
    setTurns([
      ...turns.slice(0, at),
      { id: edit.id, role: "user", text },
      { id: replyId, role: "assistant", text: "" },
    ])
    setEdit(null)
    stream(replyId)
  }

  const editLast = (e: React.KeyboardEvent) => {
    const last = turns.findLast((t) => t.role === "user")
    if (e.key === "ArrowUp" && !draft && last) {
      e.preventDefault()
      setEdit({ id: last.id, text: last.text })
    }
  }

  const body = (turn: Turn) => {
    const mine = turn.role === "user"
    if (edit?.id === turn.id) {
      return (
        <>
          <Textarea
            aria-label="Edit message"
            autoFocus
            className={cn(
              enter,
              "min-h-0 w-md max-w-full resize-none rounded-[22px] border-0 bg-muted px-4 py-3 font-medium text-[15px]/6 focus-visible:ring-0 md:text-[15px]/6"
            )}
            onChange={(e) => setEdit({ ...edit, text: e.target.value })}
            onKeyDown={(e) => {
              if (e.key === "Escape") {
                setEdit(null)
              }
              if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault()
                resend()
              }
            }}
            value={edit.text}
          />
          <div className={cn(enter, "flex items-center gap-1.5 self-end")}>
            <Button
              aria-label="Copy"
              className={cn(press, "rounded-full")}
              onClick={() => navigator.clipboard.writeText(turn.text)}
              size="icon-sm"
              variant="ghost"
            >
              <CopyIcon strokeWidth={1.6} />
            </Button>
            <Button
              className={cn(press, "rounded-full")}
              onClick={() => setEdit(null)}
              size="sm"
              variant="secondary"
            >
              Cancel
            </Button>
            <Button
              className={cn(press, "rounded-full")}
              disabled={!edit.text.trim() || streaming}
              onClick={resend}
              size="sm"
            >
              Send
            </Button>
          </div>
        </>
      )
    }
    if (turn.streaming && !turn.text) {
      return (
        <span className="shimmer text-[15px]/6 text-muted-foreground">
          Thinking…
        </span>
      )
    }
    return turn.text.split("\n\n").map((paragraph) => (
      <Bubble
        align={mine ? "end" : "start"}
        className={
          mine
            ? "-mx-2.5 -my-1 box-content max-w-md cursor-pointer rounded-xl px-2.5 py-1 text-right font-medium transition-colors duration-150 ease-out hover:bg-muted"
            : undefined
        }
        key={paragraph}
        onDoubleClick={
          mine ? () => setEdit({ id: turn.id, text: turn.text }) : undefined
        }
        title={mine ? "Double-click to edit" : undefined}
        variant="ghost"
      >
        <BubbleContent className="text-[15px]/6">{paragraph}</BubbleContent>
      </Bubble>
    ))
  }

  return (
    <div className="flex h-dvh w-full flex-col bg-background">
      <MessageScrollerProvider autoScroll>
        <MessageScroller>
          <MessageScrollerViewport>
            <MessageScrollerContent className="mx-auto w-full max-w-2xl gap-3.5 px-1.5 pt-12 pb-4">
              {turns.map((turn) => {
                const mine = turn.role === "user"
                return (
                  <MessageScrollerItem
                    className={cn(
                      "px-2.5",
                      mine && "pt-5.5 pb-1 first:pt-1",
                      !thread.some((t) => t.id === turn.id) && enter
                    )}
                    key={turn.id}
                    messageId={turn.id}
                  >
                    <Message align={mine ? "end" : "start"}>
                      <MessageContent className="gap-2">
                        {body(turn)}
                        {!(mine || turn.streaming) && (
                          <MessageFooter className={cn(enter, "gap-0.5")}>
                            <Button
                              aria-label="Copy"
                              className={press}
                              onClick={() =>
                                navigator.clipboard.writeText(turn.text)
                              }
                              size="icon-sm"
                              variant="ghost"
                            >
                              <CopyIcon strokeWidth={1.6} />
                            </Button>
                            <Button
                              aria-label="Good response"
                              className={press}
                              size="icon-sm"
                              variant="ghost"
                            >
                              <ThumbsUpIcon strokeWidth={1.6} />
                            </Button>
                            <Button
                              aria-label="Bad response"
                              className={press}
                              size="icon-sm"
                              variant="ghost"
                            >
                              <ThumbsDownIcon strokeWidth={1.6} />
                            </Button>
                            <Button
                              aria-label="Regenerate"
                              className={press}
                              onClick={() => stream(turn.id)}
                              size="icon-sm"
                              variant="ghost"
                            >
                              <RefreshCwIcon strokeWidth={1.6} />
                            </Button>
                          </MessageFooter>
                        )}
                      </MessageContent>
                    </Message>
                  </MessageScrollerItem>
                )
              })}
            </MessageScrollerContent>
          </MessageScrollerViewport>
          <MessageScrollerButton className={easeOut} />
        </MessageScroller>
      </MessageScrollerProvider>

      <form
        className="mx-auto flex w-full max-w-2xl flex-col items-center gap-2.5 px-4 pt-3 pb-4"
        onSubmit={send}
      >
        <InputGroup className="h-13 rounded-full border-0 bg-muted px-2.5 has-[[data-slot=input-group-control]:focus-visible]:ring-0">
          <InputGroupAddon>
            <DropdownMenu>
              <DropdownMenuTrigger
                render={
                  <InputGroupButton
                    aria-label="Add attachment"
                    className={cn(press, "rounded-full hover:bg-foreground/10")}
                    size="icon-sm"
                  />
                }
              >
                <PlusIcon strokeWidth={1.8} />
              </DropdownMenuTrigger>
              <DropdownMenuContent
                align="start"
                className="w-60 rounded-[20px] p-2 shadow-[0_0_0_1px_oklch(0_0_0/0.06),0_8px_24px_-6px_oklch(0_0_0/0.14)]"
                sideOffset={10}
              >
                <DropdownMenuGroup className="flex flex-col gap-0.5">
                  <DropdownMenuItem className="gap-3 rounded-xl px-3 py-2.5 text-[15px] [&>svg]:text-muted-foreground">
                    <PaperclipIcon className="size-4.5" strokeWidth={1.6} />
                    Add files
                  </DropdownMenuItem>
                  <DropdownMenuItem className="gap-3 rounded-xl px-3 py-2.5 text-[15px] [&>svg]:text-muted-foreground">
                    <ImageIcon className="size-4.5" strokeWidth={1.6} />
                    Add photos
                  </DropdownMenuItem>
                  <DropdownMenuItem className="gap-3 rounded-xl px-3 py-2.5 text-[15px] [&>svg]:text-muted-foreground">
                    <GlobeIcon className="size-4.5" strokeWidth={1.6} />
                    Search the web
                  </DropdownMenuItem>
                </DropdownMenuGroup>
              </DropdownMenuContent>
            </DropdownMenu>
          </InputGroupAddon>
          <InputGroupInput
            className="text-[15px] md:text-[15px]"
            onChange={(e) => setDraft(e.target.value)}
            onKeyDown={editLast}
            placeholder={listening ? "Listening…" : "Ask anything"}
            value={draft}
          />
          <InputGroupAddon align="inline-end">
            {draft.trim() ? (
              <InputGroupButton
                aria-label="Send"
                className={cn(swap, press, "rounded-full")}
                disabled={streaming}
                size="icon-sm"
                type="submit"
                variant="default"
              >
                <ArrowUpIcon strokeWidth={2} />
              </InputGroupButton>
            ) : (
              <InputGroupButton
                aria-label={listening ? "Stop listening" : "Voice input"}
                aria-pressed={listening}
                className={cn(
                  swap,
                  press,
                  "rounded-full",
                  listening
                    ? "bg-destructive/15 text-destructive hover:bg-destructive/25"
                    : "hover:bg-foreground/10"
                )}
                onClick={() => setListening(!listening)}
                size="icon-sm"
              >
                {listening ? (
                  <SquareIcon
                    fill="currentColor"
                    className="animate-pulse motion-reduce:animate-none"
                  />
                ) : (
                  <MicIcon strokeWidth={1.8} />
                )}
              </InputGroupButton>
            )}
          </InputGroupAddon>
        </InputGroup>
        <p className="text-muted-foreground text-xs">
          AI can make mistakes. Check important info.
        </p>
      </form>
    </div>
  )
}

"use client"

import {
  ArrowUpIcon,
  ChevronDownIcon,
  CopyIcon,
  EllipsisIcon,
  GlobeIcon,
  ImageIcon,
  MicIcon,
  PaperclipIcon,
  PencilIcon,
  PlusIcon,
  RefreshCwIcon,
  SquareIcon,
  ThumbsDownIcon,
  ThumbsUpIcon,
  Volume2Icon,
} from "lucide-react"
import type React from "react"
import { useState } from "react"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupTextarea,
} from "@/components/ui/input-group"
import { Message, MessageContent, MessageFooter } from "@/components/ui/message"
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/ui/message-scroller"
import { Textarea } from "@/components/ui/textarea"
import { cn } from "@/lib/utils"

type Turn = {
  id: string
  role: "user" | "assistant"
  text: string
  streaming?: boolean
}

const thread: Turn[] = [
  {
    id: "1",
    role: "user",
    text: "Is it true that a day on Venus is longer than its year?",
  },
  {
    id: "2",
    role: "assistant",
    text: "Yes. Venus takes 243 Earth days to rotate once, but only 225 days to orbit the Sun, so its day is longer than its year.\n\nIt also spins in the opposite direction to most planets, which means the Sun rises in the west there.",
  },
  { id: "3", role: "user", text: "How hot does it get on the surface?" },
  {
    id: "4",
    role: "assistant",
    text: "The surface sits around 465°C, hot enough to melt lead. The atmosphere traps so much heat that Venus stays hotter than Mercury, even though Mercury is much closer to the Sun.",
  },
  {
    id: "5",
    role: "user",
    text: "How long would a person survive there without a suit?",
  },
  {
    id: "6",
    role: "assistant",
    text: "A few seconds at most. The pressure down there is 92 times Earth's, similar to being 900 meters underwater, and the heat alone would be fatal almost immediately.\n\nFor reference, the Soviet Venera landers were built for those conditions and still failed within about two hours.",
  },
]

const replies = [
  "Good question. Venus has no moons and no rings, which makes it unusual among the inner planets. Most explanations point to its slow, retrograde spin: any moon it once had would have drifted inward and been pulled apart by tidal forces.\n\nMercury is the only other moonless planet in the solar system.",
  "The clouds are mostly sulfuric acid droplets, sitting about 50 to 70 km above the surface. They reflect roughly 75% of incoming sunlight, which is why Venus is the brightest object in our sky after the Moon.\n\nBelow the clouds the air is almost entirely carbon dioxide, with pressure about 92 times that of Earth at sea level.",
  "Several landers have made it down. The Soviet Venera 7 was the first to transmit from the surface in 1970, and Venera 13 survived for 127 minutes in 1982, long enough to send back the first color photos.\n\nNothing has lasted more than a couple of hours; the heat and pressure destroy electronics quickly.",
]

const levels = [
  { name: "Instant", hint: "5.5" },
  { name: "Medium" },
  { name: "High" },
  { name: "Extra High" },
  { name: "Pro" },
]

const models = [
  "GPT-6",
  "GPT-5.6 Sol",
  "GPT-6 Astra",
  "GPT-5.6 Terra",
  "GPT-5.6 Luna",
]

const thinkDelay = 600
const wordDelay = 35

const easeOut = "ease-[cubic-bezier(0.23,1,0.32,1)]"
const press = `${easeOut} transition-[scale,background-color] duration-150 active:scale-[0.96] motion-reduce:active:scale-100`
const enter = `${easeOut} motion-reduce:slide-in-from-bottom-0 fade-in slide-in-from-bottom-1 animate-in duration-200`
const swap = `${easeOut} fade-in zoom-in-95 motion-reduce:zoom-in-100 animate-in duration-150`
const item = "rounded-lg px-2.5 py-1.75 text-[13px]"

export default function Chat02() {
  const [turns, setTurns] = useState(thread)
  const [draft, setDraft] = useState("")
  const [tall, setTall] = useState(false)
  const [listening, setListening] = useState(false)
  const [level, setLevel] = useState("Extra High")
  const [model, setModel] = useState("GPT-5.6 Sol")
  const [replyIndex, setReplyIndex] = useState(0)
  const [edit, setEdit] = useState<{ id: string; text: string } | null>(null)
  const streaming = turns.some((t) => t.streaming)

  const stream = (replyId: string) => {
    const words = replies[replyIndex % replies.length].split(" ")
    setReplyIndex(replyIndex + 1)
    setTurns((prev) =>
      prev.map((t) =>
        t.id === replyId ? { ...t, text: "", streaming: true } : t
      )
    )
    let shown = 0
    setTimeout(() => {
      const timer = setInterval(() => {
        shown += 1
        const done = shown >= words.length
        setTurns((prev) =>
          prev.map((t) =>
            t.id === replyId
              ? {
                  ...t,
                  text: words.slice(0, shown).join(" "),
                  streaming: !done,
                }
              : t
          )
        )
        if (done) {
          clearInterval(timer)
        }
      }, wordDelay)
    }, thinkDelay)
  }

  const send = (e: React.FormEvent) => {
    e.preventDefault()
    const text = draft.trim()
    if (!text || streaming) {
      return
    }
    const replyId = crypto.randomUUID()
    setTurns([
      ...turns,
      { id: crypto.randomUUID(), role: "user", text },
      { id: replyId, role: "assistant", text: "" },
    ])
    setDraft("")
    setTall(false)
    stream(replyId)
  }

  const resend = () => {
    const text = edit?.text.trim()
    if (!(edit && text) || streaming) {
      return
    }
    const at = turns.findIndex((t) => t.id === edit.id)
    const reply = turns[at + 1]
    setTurns(turns.map((t) => (t.id === edit.id ? { ...t, text } : t)))
    setEdit(null)
    if (reply?.role === "assistant") {
      stream(reply.id)
    }
  }

  const body = (turn: Turn, align: "start" | "end") => {
    if (edit?.id === turn.id) {
      return (
        <>
          <Textarea
            aria-label="Edit message"
            autoFocus
            className={cn(
              enter,
              "min-h-0 w-md max-w-full resize-none rounded-[18px] border-0 bg-muted px-3.5 py-2.5 text-[15px]/6 focus-visible:ring-0 md:text-[15px]/6"
            )}
            onChange={(e) => setEdit({ ...edit, text: e.target.value })}
            onKeyDown={(e) => {
              if (e.key === "Escape") {
                setEdit(null)
              }
              if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault()
                resend()
              }
            }}
            value={edit.text}
          />
          <div className={cn(enter, "flex items-center gap-1.5 self-end")}>
            <Button
              className={cn(press, "rounded-full")}
              onClick={() => setEdit(null)}
              size="sm"
              variant="secondary"
            >
              Cancel
            </Button>
            <Button
              className={cn(press, "rounded-full")}
              disabled={!edit.text.trim() || streaming}
              onClick={resend}
              size="sm"
            >
              Send
            </Button>
          </div>
        </>
      )
    }
    if (turn.streaming && !turn.text) {
      return (
        <span className="shimmer text-[15px]/6 text-muted-foreground">
          Thinking…
        </span>
      )
    }
    return turn.text.split("\n\n").map((paragraph) => (
      <Bubble
        align={align}
        className="max-w-md data-[variant=ghost]:max-w-full"
        key={paragraph}
        variant={turn.role === "user" ? "muted" : "ghost"}
      >
        <BubbleContent className="rounded-[18px] px-3.5 py-1.75 text-[15px]/5.5 group-data-[variant=ghost]/bubble:text-[15px]/6">
          {paragraph}
        </BubbleContent>
      </Bubble>
    ))
  }

  const action = (
    label: string,
    icon: React.ReactNode,
    onClick?: () => void
  ) => (
    <Button
      aria-label={label}
      className={cn(press, "rounded-lg")}
      onClick={onClick}
      size="icon-sm"
      variant="ghost"
    >
      {icon}
    </Button>
  )

  return (
    <div className="flex h-dvh w-full flex-col bg-background">
      <MessageScrollerProvider autoScroll>
        <MessageScroller>
          <MessageScrollerViewport>
            <MessageScrollerContent className="mx-auto w-full max-w-2xl gap-4.5 px-4 pt-10 pb-4">
              {turns.map((turn) => {
                const mine = turn.role === "user"
                const align = mine ? "end" : "start"
                return (
                  <MessageScrollerItem
                    className={cn(
                      mine && "pt-4.5 first:pt-0",
                      !thread.some((t) => t.id === turn.id) && enter
                    )}
                    key={turn.id}
                    messageId={turn.id}
                  >
                    <Message align={align}>
                      <MessageContent className="gap-2.5">
                        {body(turn, align)}
                        {turn.text && edit?.id !== turn.id && (
                          <MessageFooter className="-mx-2 gap-0.5">
                            {action(
                              "Copy",
                              <CopyIcon strokeWidth={1.6} />,
                              () => navigator.clipboard.writeText(turn.text)
                            )}
                            {mine
                              ? action(
                                  "Edit",
                                  <PencilIcon strokeWidth={1.6} />,
                                  () =>
                                    setEdit({ id: turn.id, text: turn.text })
                                )
                              : action(
                                  "Regenerate",
                                  <RefreshCwIcon strokeWidth={1.6} />,
                                  () => stream(turn.id)
                                )}
                            {!mine && (
                              <DropdownMenu>
                                <DropdownMenuTrigger
                                  render={action(
                                    "More",
                                    <EllipsisIcon strokeWidth={1.6} />
                                  )}
                                />
                                <DropdownMenuContent
                                  align="start"
                                  className="w-44 rounded-[14px] p-1.5"
                                >
                                  <DropdownMenuGroup className="flex flex-col gap-0.5">
                                    <DropdownMenuItem
                                      className={cn(item, "gap-2.5")}
                                    >
                                      <ThumbsUpIcon strokeWidth={1.6} />
                                      Good response
                                    </DropdownMenuItem>
                                    <DropdownMenuItem
                                      className={cn(item, "gap-2.5")}
                                    >
                                      <ThumbsDownIcon strokeWidth={1.6} />
                                      Bad response
                                    </DropdownMenuItem>
                                    <DropdownMenuItem
                                      className={cn(item, "gap-2.5")}
                                    >
                                      <Volume2Icon strokeWidth={1.6} />
                                      Read aloud
                                    </DropdownMenuItem>
                                  </DropdownMenuGroup>
                                </DropdownMenuContent>
                              </DropdownMenu>
                            )}
                          </MessageFooter>
                        )}
                      </MessageContent>
                    </Message>
                  </MessageScrollerItem>
                )
              })}
            </MessageScrollerContent>
          </MessageScrollerViewport>
          <MessageScrollerButton
            className={cn(
              easeOut,
              "bottom-2 h-7 gap-1.5 rounded-full border-0 px-3.5 font-medium text-muted-foreground text-xs shadow-[0_0_0_1px_oklch(0_0_0/0.06),0_2px_8px_oklch(0_0_0/0.08)] transition-[translate,scale,opacity,background-color] hover:text-foreground active:not-aria-[haspopup]:translate-y-0 data-[active=true]:active:scale-[0.96] dark:shadow-[0_0_0_1px_oklch(1_0_0/0.1),0_2px_8px_oklch(0_0_0/0.3)]"
            )}
            size="sm"
          >
            <ChevronDownIcon className="size-3.5" strokeWidth={1.75} />
            Jump to latest
          </MessageScrollerButton>
        </MessageScroller>
      </MessageScrollerProvider>

      <form
        className="mx-auto flex w-full max-w-2xl flex-col items-center gap-2.5 px-4 pt-2 pb-3.5"
        onSubmit={send}
      >
        <InputGroup
          className={cn(
            "min-h-11 items-end rounded-[22px] bg-background px-0.5 shadow-xs has-[[data-slot=input-group-control]:focus-visible]:ring-0",
            tall && "flex-wrap rounded-3xl"
          )}
        >
          <InputGroupAddon
            className={cn("pb-1.25 pl-2.5", tall && "order-none")}
          >
            <DropdownMenu>
              <DropdownMenuTrigger
                render={
                  <InputGroupButton
                    aria-label="Add attachment"
                    className={cn(press, "rounded-full")}
                    size="icon-sm"
                  />
                }
              >
                <PlusIcon strokeWidth={1.8} />
              </DropdownMenuTrigger>
              <DropdownMenuContent
                align="start"
                className="w-56 rounded-[14px] p-1.5"
                sideOffset={10}
              >
                <DropdownMenuGroup className="flex flex-col gap-0.5">
                  <DropdownMenuItem className={cn(item, "gap-2.5")}>
                    <PaperclipIcon strokeWidth={1.6} />
                    Add files
                  </DropdownMenuItem>
                  <DropdownMenuItem className={cn(item, "gap-2.5")}>
                    <ImageIcon strokeWidth={1.6} />
                    Add photos
                  </DropdownMenuItem>
                  <DropdownMenuItem className={cn(item, "gap-2.5")}>
                    <GlobeIcon strokeWidth={1.6} />
                    Search the web
                  </DropdownMenuItem>
                </DropdownMenuGroup>
              </DropdownMenuContent>
            </DropdownMenu>
          </InputGroupAddon>
          <InputGroupTextarea
            className={cn(
              "max-h-48 min-h-0 py-2.5 pl-1 text-[15px]/6 md:text-[15px]/6",
              tall && "-order-1 basis-full px-2.75 py-1.5"
            )}
            onChange={(e) => {
              setDraft(e.target.value)
              setTall(e.target.scrollHeight > 44)
            }}
            onKeyDown={(e) => {
              if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault()
                e.currentTarget.form?.requestSubmit()
              }
            }}
            placeholder={listening ? "Listening…" : "Ask anything"}
            rows={1}
            value={draft}
          />
          <InputGroupAddon
            align="inline-end"
            className={cn("gap-1.5 pr-2.5 pb-1.25", tall && "ml-auto")}
          >
            {draft.trim() ? (
              <InputGroupButton
                aria-label="Send"
                className={cn(swap, press, "rounded-full")}
                disabled={streaming}
                size="icon-sm"
                type="submit"
                variant="default"
              >
                <ArrowUpIcon strokeWidth={2} />
              </InputGroupButton>
            ) : (
              <InputGroupButton
                aria-label={listening ? "Stop listening" : "Voice input"}
                aria-pressed={listening}
                className={cn(
                  swap,
                  press,
                  "rounded-full",
                  listening &&
                    "bg-destructive/15 text-destructive hover:bg-destructive/25"
                )}
                onClick={() => setListening(!listening)}
                size="icon-sm"
              >
                {listening ? (
                  <SquareIcon
                    fill="currentColor"
                    className="animate-pulse motion-reduce:animate-none"
                  />
                ) : (
                  <MicIcon strokeWidth={1.8} />
                )}
              </InputGroupButton>
            )}
            <DropdownMenu>
              <DropdownMenuTrigger
                render={
                  <InputGroupButton
                    aria-label="Intelligence level"
                    className={cn(
                      press,
                      "h-8 gap-1.25 rounded-full bg-muted px-3 font-medium text-[13px] text-muted-foreground hover:bg-muted"
                    )}
                    size="sm"
                  />
                }
              >
                {level}
                <ChevronDownIcon className="size-3" strokeWidth={2} />
              </DropdownMenuTrigger>
              <DropdownMenuContent
                align="end"
                className="w-49 rounded-[14px] p-1.5"
                side="top"
                sideOffset={10}
              >
                <DropdownMenuGroup className="flex flex-col gap-0.5">
                  <DropdownMenuLabel className="px-2.5 pt-1 pb-0.5 text-[11px]">
                    Intelligence
                  </DropdownMenuLabel>
                  <DropdownMenuRadioGroup
                    onValueChange={setLevel}
                    value={level}
                  >
                    {levels.map((l) => (
                      <DropdownMenuRadioItem
                        className={cn(item, "pr-8 pl-2.5")}
                        key={l.name}
                        value={l.name}
                      >
                        {l.name}
                        {l.hint && (
                          <span className="text-muted-foreground text-xs">
                            {l.hint}
                          </span>
                        )}
                      </DropdownMenuRadioItem>
                    ))}
                  </DropdownMenuRadioGroup>
                  <DropdownMenuSeparator className="mx-1.5 my-1" />
                  <DropdownMenuSub>
                    <DropdownMenuSubTrigger
                      className={cn(
                        item,
                        "[&>svg]:size-3.5 [&>svg]:text-muted-foreground"
                      )}
                    >
                      {model}
                    </DropdownMenuSubTrigger>
                    <DropdownMenuSubContent className="w-44 rounded-[14px] p-1.5">
                      <DropdownMenuRadioGroup
                        className="flex flex-col gap-0.5"
                        onValueChange={setModel}
                        value={model}
                      >
                        {models.map((m) => (
                          <DropdownMenuRadioItem
                            className={cn(item, "pr-8 pl-2.5")}
                            key={m}
                            value={m}
                          >
                            {m}
                          </DropdownMenuRadioItem>
                        ))}
                      </DropdownMenuRadioGroup>
                    </DropdownMenuSubContent>
                  </DropdownMenuSub>
                </DropdownMenuGroup>
              </DropdownMenuContent>
            </DropdownMenu>
          </InputGroupAddon>
        </InputGroup>
        <p className="text-muted-foreground text-xs">
          AI can make mistakes. Check important info.
        </p>
      </form>
    </div>
  )
}

"use client"

import {
  CheckIcon,
  ChevronDownIcon,
  PanelLeftIcon,
  ShareIcon,
} from "lucide-react"
import { useRef, useState } from "react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Kbd } from "@/components/ui/kbd"
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import { cn } from "@/lib/utils"
import { ChatSidebar } from "./components/chat-sidebar"
import { CommandMenu } from "./components/command-menu"
import { type Attachment, Composer } from "./components/composer"
import { Conversation, type Thread, type Turn } from "./components/conversation"
import { ClaudeLogo, OpenAILogo } from "./components/logos"
import data from "./data.json" with { type: "json" }

const { models, replies } = data
const seed = data.threads as Thread[]

const logos = { openai: OpenAILogo, anthropic: ClaudeLogo }
const Logo = ({ vendor, ...props }: { vendor: string; className?: string }) => {
  const Icon = logos[vendor as keyof typeof logos]
  return <Icon {...props} />
}

const thinkDelay = 900
const tokenDelay = 40

export default function Chat03() {
  const [threads, setThreads] = useState(seed)
  const [activeId, setActiveId] = useState<string | null>("heat-pump")
  const [draft, setDraft] = useState("")
  const [attachment, setAttachment] = useState<Attachment | null>(null)
  const [model, setModel] = useState(models[0].name)
  const [search, setSearch] = useState(false)
  const [replyIndex, setReplyIndex] = useState(0)
  const timer = useRef<number | null>(null)

  const thread = threads.find((t) => t.id === activeId) ?? null
  const streaming = thread?.turns.some((t) => t.streaming) ?? false
  const altModel = models.find((m) => m.name !== model)?.name ?? model

  const patch = (threadId: string, turnId: string, fn: (t: Turn) => Turn) =>
    setThreads((prev) =>
      prev.map((t) =>
        t.id === threadId
          ? { ...t, turns: t.turns.map((m) => (m.id === turnId ? fn(m) : m)) }
          : t
      )
    )

  const stream = (threadId: string, turnId: string) => {
    const reply = replies[replyIndex % replies.length]
    setReplyIndex(replyIndex + 1)
    patch(threadId, turnId, (t) => ({
      ...t,
      text: "",
      reasoning: reply.reasoning,
      thought: undefined,
      error: undefined,
      streaming: true,
    }))
    let shown = 0
    const tick = () => {
      shown = Math.min(
        reply.text.length,
        shown + 2 + Math.floor(Math.random() * 5)
      )
      const done = shown >= reply.text.length
      patch(threadId, turnId, (t) => ({
        ...t,
        text: reply.text.slice(0, shown),
        thought: done ? 4 + Math.round(reply.reasoning.length / 40) : t.thought,
        streaming: !done,
      }))
      timer.current = done
        ? null
        : window.setTimeout(tick, tokenDelay * (0.5 + Math.random()))
    }
    tick()
  }

  const stop = () => {
    if (timer.current) {
      window.clearTimeout(timer.current)
      timer.current = null
    }
    const live = thread?.turns.find((t) => t.streaming)
    if (thread && live) {
      patch(thread.id, live.id, (t) => ({
        ...t,
        streaming: false,
        error: true,
      }))
    }
  }

  const send = () => {
    const text = draft.trim()
    const replyId = crypto.randomUUID()
    const turns: Turn[] = [
      { id: crypto.randomUUID(), role: "user", text, day: "today" },
      {
        id: replyId,
        role: "assistant",
        text: "",
        streaming: true,
        day: "today",
      },
    ]
    const id = thread?.id ?? crypto.randomUUID()
    setThreads((prev) =>
      thread
        ? [
            {
              ...thread,
              updated: "now",
              group: "today",
              turns: [
                ...thread.turns.map((t) => ({
                  ...t,
                  day: t.day ?? thread.group,
                })),
                ...turns,
              ],
            },
            ...prev.filter((t) => t.id !== id),
          ]
        : [
            {
              id,
              title: text.split(" ").slice(0, 5).join(" "),
              preview: text,
              updated: "now",
              group: "today",
              turns,
            },
            ...prev,
          ]
    )
    setActiveId(id)
    setDraft("")
    setAttachment(null)
    window.setTimeout(() => stream(id, replyId), thinkDelay)
  }

  const retry = (turnId: string, next?: string) => {
    if (!thread) {
      return
    }
    if (next) {
      setModel(next)
    }
    patch(thread.id, turnId, (t) => ({
      ...t,
      text: "",
      thought: undefined,
      error: undefined,
      streaming: true,
    }))
    window.setTimeout(() => stream(thread.id, turnId), thinkDelay)
  }

  const edit = (turn: Turn) => {
    if (!thread) {
      return
    }
    const at = thread.turns.findIndex((t) => t.id === turn.id)
    setThreads((prev) =>
      prev.map((t) =>
        t.id === thread.id ? { ...t, turns: t.turns.slice(0, at) } : t
      )
    )
    setDraft(turn.text)
  }

  return (
    <SidebarProvider
      className="h-dvh min-h-0"
      style={{ "--sidebar-width": "260px" } as React.CSSProperties}
    >
      <ChatSidebar
        activeId={activeId}
        onChange={(next) => {
          setThreads(next)
          if (activeId && !next.some((t) => t.id === activeId)) {
            setActiveId(null)
          }
        }}
        onNew={() => setActiveId(null)}
        onSearch={() => setSearch(true)}
        onSelect={setActiveId}
        threads={threads}
        user={data.user}
      />
      <SidebarInset className="min-h-0 bg-background">
        <header className="flex h-13 shrink-0 items-center gap-2.5 border-b px-4">
          <SidebarTrigger className="size-7.5 rounded-lg text-muted-foreground">
            <PanelLeftIcon className="size-4" strokeWidth={1.8} />
          </SidebarTrigger>
          <DropdownMenu>
            <DropdownMenuTrigger
              render={
                <Button
                  className="h-8 gap-1.5 rounded-lg px-2.5 text-[13px]"
                  variant="secondary"
                />
              }
            >
              <Logo
                className="size-3.5"
                vendor={
                  models.find((m) => m.name === model)?.vendor ?? "openai"
                }
              />
              {model}
              <ChevronDownIcon
                className="size-3 text-muted-foreground"
                strokeWidth={2}
              />
            </DropdownMenuTrigger>
            <DropdownMenuContent
              align="start"
              className="w-75 rounded-xl p-1.5"
              sideOffset={6}
            >
              <DropdownMenuGroup className="flex flex-col gap-0.5">
                {models.map((m) => (
                  <DropdownMenuItem
                    className={cn(
                      "gap-2.5 rounded-md px-2.5 py-2",
                      m.name === model && "bg-muted"
                    )}
                    key={m.name}
                    onClick={() => setModel(m.name)}
                  >
                    <span className="flex grow flex-col gap-0.5">
                      <span className="flex items-center gap-1.5 font-medium text-[13px]/4">
                        <Logo className="size-3 shrink-0" vendor={m.vendor} />
                        {m.name}
                      </span>
                      <span className="text-[11px]/3.5 text-muted-foreground">
                        {m.hint}
                      </span>
                    </span>
                    {m.name === model && (
                      <CheckIcon className="size-3.5" strokeWidth={2.2} />
                    )}
                    <Kbd className="h-4.5 border border-border bg-background px-1.5 font-mono text-[10px]">
                      {m.context}
                    </Kbd>
                  </DropdownMenuItem>
                ))}
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>
          <div className="grow" />
          {thread && (
            <Button
              aria-label="Share thread"
              className="size-7.5 rounded-lg text-muted-foreground"
              size="icon-sm"
              variant="ghost"
            >
              <ShareIcon className="size-4" strokeWidth={1.8} />
            </Button>
          )}
        </header>

        <Conversation
          altModel={altModel}
          onEdit={edit}
          onOpen={setActiveId}
          onRetry={retry}
          recent={threads.filter((t) => !t.pinned).slice(0, 3)}
          thread={thread}
        />

        <Composer
          attachment={attachment}
          draft={draft}
          onAttachment={setAttachment}
          onDraft={setDraft}
          onSend={send}
          onStop={stop}
          streaming={streaming}
        />
      </SidebarInset>

      <CommandMenu
        onNew={(text) => {
          setActiveId(null)
          setDraft(text)
        }}
        onOpen={setActiveId}
        onOpenChange={setSearch}
        open={search}
        threads={threads}
      />
    </SidebarProvider>
  )
}

"use client"

import {
  ArchiveIcon,
  ChevronsUpDownIcon,
  CircleQuestionMarkIcon,
  EllipsisIcon,
  KeyboardIcon,
  LogOutIcon,
  PencilIcon,
  PinIcon,
  PlusIcon,
  SearchIcon,
  SettingsIcon,
  ShareIcon,
  SunMoonIcon,
  TrashIcon,
} from "lucide-react"
import { useState } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Kbd, KbdGroup } from "@/components/ui/kbd"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"
import { cn } from "@/lib/utils"
import type { Thread } from "./conversation"

const groups: { key: Thread["group"] | "pinned"; label: string }[] = [
  { key: "pinned", label: "Pinned" },
  { key: "today", label: "Today" },
  { key: "yesterday", label: "Yesterday" },
  { key: "week", label: "Previous 7 days" },
]

const item = "h-8 gap-2.5 rounded-md px-2.5 text-[13px]"

type Props = {
  user: {
    name: string
    email: string
    plan: string
    renews: string
    avatar: string
  }
  threads: Thread[]
  activeId: string | null
  onSelect: (id: string) => void
  onNew: () => void
  onSearch: () => void
  onChange: (threads: Thread[]) => void
}

export function ChatSidebar({
  user,
  threads,
  activeId,
  onSelect,
  onNew,
  onSearch,
  onChange,
}: Props) {
  const [renameId, setRenameId] = useState<string | null>(null)
  const [name, setName] = useState("")

  const commitRename = () => {
    if (renameId && name.trim()) {
      onChange(
        threads.map((t) =>
          t.id === renameId ? { ...t, title: name.trim() } : t
        )
      )
    }
    setRenameId(null)
  }

  return (
    <Sidebar className="border-sidebar-border" collapsible="offcanvas">
      <SidebarHeader className="gap-2 px-3 pt-3 pb-1">
        <Button className="h-8.5 rounded-lg text-[13px]" onClick={onNew}>
          <PlusIcon className="size-3.5" strokeWidth={2.2} />
          New chat
        </Button>
        <button
          className="flex h-8 items-center gap-1.75 rounded-lg border border-border pr-1.5 pl-2.5 text-[13px] text-muted-foreground transition-colors hover:bg-muted/60 focus-visible:border-primary focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-primary/20"
          onClick={onSearch}
          type="button"
        >
          <SearchIcon className="size-3.5" strokeWidth={2} />
          <span className="grow text-left">Search chats</span>
          <Kbd className="h-4.5 border border-border bg-sidebar px-1.25 text-[10px]">
            ⌘K
          </Kbd>
        </button>
      </SidebarHeader>

      <SidebarContent className="gap-0 px-3 pt-2">
        {groups.map(({ key, label }) => {
          const list = threads.filter((t) =>
            key === "pinned" ? t.pinned : !t.pinned && t.group === key
          )
          if (list.length === 0) {
            return null
          }
          return (
            <SidebarGroup className="p-0 pb-2" key={key}>
              <SidebarGroupLabel className="h-5 px-2 font-semibold text-[10px] text-muted-foreground/80 uppercase tracking-[0.08em]">
                {label}
              </SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu className="gap-0.5">
                  {list.map((t) => (
                    <SidebarMenuItem key={t.id}>
                      {renameId === t.id ? (
                        <input
                          aria-label="Thread name"
                          autoFocus
                          className="h-7 w-full rounded-md border border-primary bg-background px-2 text-[13px] outline-none ring-3 ring-primary/20"
                          onBlur={commitRename}
                          onChange={(e) => setName(e.target.value)}
                          onFocus={(e) => e.target.select()}
                          onKeyDown={(e) => {
                            if (e.key === "Enter") {
                              commitRename()
                            }
                            if (e.key === "Escape") {
                              setRenameId(null)
                            }
                          }}
                          value={name}
                        />
                      ) : (
                        <>
                          <SidebarMenuButton
                            className="h-7 px-2 text-[13px] data-active:bg-muted"
                            isActive={t.id === activeId}
                            onClick={() => onSelect(t.id)}
                          >
                            <span>{t.title}</span>
                          </SidebarMenuButton>
                          <SidebarMenuBadge
                            className={cn(
                              "top-1! right-1.5 font-mono font-normal text-[11px] text-muted-foreground/80 group-focus-within/menu-item:opacity-0 group-hover/menu-item:opacity-0 group-has-aria-expanded/menu-item:opacity-0",
                              t.pinned && "right-1"
                            )}
                          >
                            {t.pinned ? (
                              <PinIcon className="size-3" strokeWidth={1.8} />
                            ) : (
                              t.updated
                            )}
                          </SidebarMenuBadge>
                          <DropdownMenu>
                            <DropdownMenuTrigger
                              render={
                                <SidebarMenuAction
                                  aria-label="Thread actions"
                                  className="top-1! text-muted-foreground"
                                  showOnHover
                                />
                              }
                            >
                              <EllipsisIcon className="size-3.5" />
                            </DropdownMenuTrigger>
                            <DropdownMenuContent
                              align="start"
                              className="w-48 rounded-xl p-1.5"
                              finalFocus={false}
                              side="bottom"
                              sideOffset={6}
                            >
                              <DropdownMenuGroup className="flex flex-col gap-0.5">
                                <DropdownMenuItem
                                  className={item}
                                  onClick={() =>
                                    onChange(
                                      threads.map((x) =>
                                        x.id === t.id
                                          ? { ...x, pinned: !x.pinned }
                                          : x
                                      )
                                    )
                                  }
                                >
                                  <PinIcon strokeWidth={1.8} />
                                  {t.pinned ? "Unpin" : "Pin"}
                                </DropdownMenuItem>
                                <DropdownMenuItem
                                  className={item}
                                  onClick={() => {
                                    setRenameId(t.id)
                                    setName(t.title)
                                  }}
                                >
                                  <PencilIcon strokeWidth={1.8} />
                                  Rename
                                </DropdownMenuItem>
                                <DropdownMenuItem className={item}>
                                  <ShareIcon strokeWidth={1.8} />
                                  Share
                                </DropdownMenuItem>
                                <DropdownMenuItem
                                  className={item}
                                  onClick={() =>
                                    onChange(
                                      threads.filter((x) => x.id !== t.id)
                                    )
                                  }
                                >
                                  <ArchiveIcon strokeWidth={1.8} />
                                  Archive
                                </DropdownMenuItem>
                              </DropdownMenuGroup>
                              <DropdownMenuSeparator className="my-1" />
                              <DropdownMenuItem
                                className={item}
                                onClick={() =>
                                  onChange(threads.filter((x) => x.id !== t.id))
                                }
                                variant="destructive"
                              >
                                <TrashIcon strokeWidth={1.8} />
                                Delete
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </>
                      )}
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          )
        })}
      </SidebarContent>

      <SidebarFooter className="border-sidebar-border border-t p-0">
        <DropdownMenu>
          <DropdownMenuTrigger
            render={
              <button
                className="flex h-14 w-full items-center gap-2.5 px-3 text-left outline-none transition-colors hover:bg-muted/60 focus-visible:bg-muted/60 aria-expanded:bg-muted/60"
                type="button"
              />
            }
          >
            <Avatar className="size-7.5 rounded-lg">
              <AvatarImage
                alt={user.name}
                className="rounded-lg"
                src={user.avatar}
              />
              <AvatarFallback className="rounded-lg">
                {user.name[0]}
              </AvatarFallback>
            </Avatar>
            <span className="flex min-w-0 grow flex-col gap-px">
              <span className="truncate font-medium text-[13px]">
                {user.name}
              </span>
              <span className="truncate text-[11px] text-muted-foreground">
                {user.plan} · {user.email}
              </span>
            </span>
            <ChevronsUpDownIcon
              className="size-3.5 shrink-0 text-muted-foreground/80"
              strokeWidth={2}
            />
          </DropdownMenuTrigger>
          <DropdownMenuContent
            align="center"
            className="w-[calc(var(--anchor-width)-1rem)] rounded-xl p-1.5"
            side="top"
            sideOffset={8}
          >
            <div className="flex items-center gap-2.5 px-2 pt-1.5 pb-2.5">
              <Avatar className="size-8 rounded-lg">
                <AvatarImage
                  alt={user.name}
                  className="rounded-lg"
                  src={user.avatar}
                />
                <AvatarFallback className="rounded-lg">
                  {user.name[0]}
                </AvatarFallback>
              </Avatar>
              <div className="flex min-w-0 flex-col gap-px">
                <span className="font-medium text-[13px]">{user.name}</span>
                <span className="text-[11px] text-muted-foreground">
                  {user.email}
                </span>
              </div>
            </div>
            <DropdownMenuSeparator />
            <DropdownMenuGroup className="flex flex-col gap-0.5 py-0.5">
              <DropdownMenuItem className={item}>
                <SettingsIcon strokeWidth={1.8} />
                Settings
                <KbdGroup className="ml-auto">
                  <Kbd>⌘</Kbd>
                  <Kbd>,</Kbd>
                </KbdGroup>
              </DropdownMenuItem>
              <DropdownMenuItem className={item}>
                <SunMoonIcon strokeWidth={1.8} />
                Appearance
                <DropdownMenuShortcut className="text-xs tracking-normal">
                  System
                </DropdownMenuShortcut>
              </DropdownMenuItem>
              <DropdownMenuItem className={item}>
                <KeyboardIcon strokeWidth={1.8} />
                Keyboard shortcuts
                <KbdGroup className="ml-auto">
                  <Kbd>⌘</Kbd>
                  <Kbd>/</Kbd>
                </KbdGroup>
              </DropdownMenuItem>
              <DropdownMenuItem className={item}>
                <CircleQuestionMarkIcon strokeWidth={1.8} />
                Help & feedback
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <div className="my-0.5 flex items-center justify-between rounded-lg bg-muted/60 px-2.5 py-2">
              <div className="flex flex-col gap-px">
                <span className="font-medium text-xs">{user.plan} plan</span>
                <span className="text-[11px] text-muted-foreground">
                  Renews {user.renews}
                </span>
              </div>
              <Button className="h-auto p-0 text-xs" size="sm" variant="link">
                Manage
              </Button>
            </div>
            <DropdownMenuSeparator />
            <DropdownMenuItem className={item}>
              <LogOutIcon strokeWidth={1.8} />
              Log out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarFooter>
    </Sidebar>
  )
}

"use client"

import { FileTextIcon, MessageSquareIcon, PlusIcon } from "lucide-react"
import { useEffect, useState } from "react"
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command"
import { Kbd } from "@/components/ui/kbd"
import type { Thread } from "./conversation"

type Props = {
  open: boolean
  onOpenChange: (open: boolean) => void
  threads: Thread[]
  onOpen: (id: string) => void
  onNew: (draft: string) => void
}

const heading =
  "**:[[cmdk-group-heading]]:px-2.5 **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:text-[10px] **:[[cmdk-group-heading]]:uppercase **:[[cmdk-group-heading]]:tracking-[0.08em] **:[[cmdk-group-heading]]:text-muted-foreground/80"
const row = "h-10 gap-3 rounded-lg px-2.5 text-[13px]"

function useCommandKey(onToggle: () => void) {
  useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        onToggle()
      }
    }
    document.addEventListener("keydown", down)
    return () => document.removeEventListener("keydown", down)
  }, [onToggle])
}

export function CommandMenu({
  open,
  onOpenChange,
  threads,
  onOpen,
  onNew,
}: Props) {
  const [query, setQuery] = useState("")
  const q = query.trim().toLowerCase()
  useCommandKey(() => onOpenChange(!open))

  const messages = q
    ? threads.flatMap((t) =>
        t.turns
          .filter(
            (m) => m.role === "assistant" && m.text.toLowerCase().includes(q)
          )
          .slice(0, 1)
          .map((m) => {
            const at = m.text.toLowerCase().indexOf(q)
            const start = Math.max(0, at - 40)
            return {
              id: m.id,
              threadId: t.id,
              thread: t.title,
              snippet: `${start > 0 ? "…" : ""}${m.text.slice(start, start + 90)}…`,
            }
          })
      )
    : []

  const pick = (fn: () => void) => {
    fn()
    onOpenChange(false)
    setQuery("")
  }

  return (
    <CommandDialog
      className="max-w-140 rounded-[14px]!"
      description="Search chats and messages"
      onOpenChange={(v) => {
        onOpenChange(v)
        if (!v) {
          setQuery("")
        }
      }}
      open={open}
      title="Search"
    >
      <Command
        className="p-0"
        filter={(value, search) =>
          value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0
        }
      >
        <CommandInput
          onValueChange={setQuery}
          placeholder="Search chats…"
          value={query}
        />
        <CommandList className="max-h-80 p-1">
          <CommandEmpty className="py-8 text-[13px] text-muted-foreground">
            No results for “{query}”
          </CommandEmpty>
          <CommandGroup className={heading} heading="Chats">
            {threads.map((t) => (
              <CommandItem
                className={row}
                key={t.id}
                onSelect={() => pick(() => onOpen(t.id))}
                value={`${t.title} ${t.preview}`}
              >
                <MessageSquareIcon
                  className="text-muted-foreground"
                  strokeWidth={1.8}
                />
                <span className="flex min-w-0 grow items-baseline gap-1.5">
                  <span className="shrink-0 font-medium">{t.title}</span>
                  <span className="truncate text-muted-foreground text-xs">
                    {t.preview}
                  </span>
                </span>
                <CommandShortcut className="font-mono text-[11px] tracking-normal">
                  {t.updated}
                </CommandShortcut>
              </CommandItem>
            ))}
          </CommandGroup>
          {messages.length > 0 && (
            <CommandGroup className={heading} heading="Messages">
              {messages.map((m) => (
                <CommandItem
                  className={row}
                  key={m.id}
                  onSelect={() => pick(() => onOpen(m.threadId))}
                  value={m.snippet}
                >
                  <FileTextIcon
                    className="text-muted-foreground"
                    strokeWidth={1.8}
                  />
                  <span className="grow truncate text-muted-foreground">
                    {m.snippet}
                  </span>
                  <CommandShortcut className="shrink-0 whitespace-nowrap text-[11px] tracking-normal">
                    {m.thread}
                  </CommandShortcut>
                </CommandItem>
              ))}
            </CommandGroup>
          )}
          <CommandGroup className={heading} forceMount heading="Actions">
            <CommandItem
              className={row}
              forceMount
              onSelect={() => pick(() => onNew(query.trim()))}
              value={`new chat ${query}`}
            >
              <PlusIcon className="text-muted-foreground" strokeWidth={2} />
              <span className="grow">
                {q ? `New chat about “${query.trim()}”` : "New chat"}
              </span>
              <CommandShortcut className="font-mono text-[11px] tracking-normal">
                ⌘N
              </CommandShortcut>
            </CommandItem>
          </CommandGroup>
        </CommandList>
        <div className="flex h-9 items-center gap-3.5 border-t bg-muted/40 px-3.5 text-[11px] text-muted-foreground">
          <span className="flex items-center gap-1.25">
            <Kbd className="h-4.5 bg-background px-1.25 font-mono text-[10px] ring-1 ring-border">
              ↑↓
            </Kbd>
            Navigate
          </span>
          <span className="flex items-center gap-1.25">
            <Kbd className="h-4.5 bg-background px-1.25 font-mono text-[10px] ring-1 ring-border">
              ↵
            </Kbd>
            Open
          </span>
        </div>
      </Command>
    </CommandDialog>
  )
}