AI Chat textarea with rich toolbar actions

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "plus"/"mic"/"globe"/"chevron-down") — см.
  docs/PORTING.md §5. Плавающий слой (`DropdownMenuContent`) не раскрывается
  в кейсе.
-->
<script setup lang="ts">
import { ref } from "vue"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Field } from "@/components/ui/field"
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } from "@/components/ui/input-group"
import { Kbd } from "@/components/ui/kbd"

const model = ref("GPT-4o")
</script>

<template>
  <Field class="max-w-xs">
    <InputGroup>
      <InputGroupTextarea placeholder="Ask AI anything..." class="min-h-24 pb-12" />
      <InputGroupAddon align="block-end">
        <div class="flex items-center gap-1">
          <InputGroupButton variant="ghost" size="icon-xs">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-plus size-4"
            >
              <path d="M5 12h14" />
              <path d="M12 5v14" />
            </svg>
          </InputGroupButton>
          <InputGroupButton variant="ghost" size="icon-xs">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-mic size-4"
            >
              <path d="M12 19v3" />
              <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
              <rect x="9" y="2" width="6" height="13" rx="3" />
            </svg>
          </InputGroupButton>
          <InputGroupButton variant="ghost" class="h-7 px-2 text-xs">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-globe mr-1 size-3.5"
            >
              <circle cx="12" cy="12" r="10" />
              <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
              <path d="M2 12h20" />
            </svg>
            Search
          </InputGroupButton>
          <DropdownMenu>
            <DropdownMenuTrigger as-child>
              <InputGroupButton variant="ghost" class="h-7 px-2 text-xs">
                <Kbd class="border-border rounded-sm border">Σ</Kbd>
                {{ model }}
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-chevron-down ml-1 size-3.5 opacity-60"
                >
                  <path d="m6 9 6 6 6-6" />
                </svg>
              </InputGroupButton>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" class="min-w-32">
              <DropdownMenuItem @click="model = 'GPT-4o'">GPT-4o</DropdownMenuItem>
              <DropdownMenuItem @click="model = 'GPT-4'">GPT-4</DropdownMenuItem>
              <DropdownMenuItem @click="model = 'Claude 3.5'">Claude 3.5</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
        <InputGroupButton variant="default" size="icon-xs" class="ml-auto">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-arrow-up size-4"
          >
            <path d="m5 12 7-7 7 7" />
            <path d="M12 19V5" />
          </svg>
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  </Field>
</template>