Suggestion

<script lang="ts">
  import ArrowUpIcon from "@lucide/svelte/icons/arrow-up";
  import PlusIcon from "@lucide/svelte/icons/plus";
  import * as Bubble from "$lib/components/ui/bubble/index.js";
  import * as InputGroup from "$lib/components/ui/input-group/index.js";
  import * as Message from "$lib/components/ui/message/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
 
  const suggestions = [
    "Add a dark mode toggle",
    "Fix the failing build",
    "Write tests for the form",
    "Upgrade to Next.js 16",
    "Add a loading state",
    "Find unused dependencies"
  ];
 
  const replies: Record<string, string> = {
    "Add a dark mode toggle":
      "Added a ModeToggle to the site header. It calls setTheme from next-themes.",
    "Fix the failing build":
      "The build failed on a missing import in app/page.tsx. I added it and the build passes.",
    "Write tests for the form":
      "Added four tests in signup-form.test.tsx. They cover the empty, invalid and valid states.",
    "Upgrade to Next.js 16":
      "Ran the codemod and bumped next to 16. Two routes needed async params, so I updated them.",
    "Add a loading state":
      "Added a loading.tsx to the dashboard route. It shows skeletons while the data loads.",
    "Find unused dependencies":
      "Three packages are not imported anywhere: lodash, moment and classnames. Should I remove them?"
  };
 
  let text = $state("");
  let turn = $state<{ prompt: string; reply: string } | null>(null);
  let form = $state<HTMLFormElement | null>(null);
  const canSend = $derived(text.trim().length > 0);
 
  function send(prompt: string) {
    turn = {
      prompt,
      reply:
        replies[prompt] ?? "This demo only knows the suggestions. Pick one."
    };
    text = "";
  }
 
  function onSubmit(event: SubmitEvent) {
    event.preventDefault();
    if (!canSend) {
      return;
    }
 
    send(text.trim());
  }
</script>
 
<div class="mx-auto flex w-full max-w-lg flex-col gap-6 py-6 text-sm">
  {#if turn}
    <div class="flex flex-col gap-4">
      <Message.Root align="end">
        <Message.Content>
          <Bubble.Root align="end" variant="muted">
            <Bubble.Content>{turn.prompt}</Bubble.Content>
          </Bubble.Root>
        </Message.Content>
      </Message.Root>
      <Message.Root>
        <Message.Content>
          <p>{turn.reply}</p>
        </Message.Content>
      </Message.Root>
    </div>
  {/if}
  <div class="flex flex-col gap-2">
    <div
      class="flex scroll-fade-x scrollbar-none gap-2 overflow-x-auto overscroll-x-contain"
    >
      {#each suggestions as suggestion, index (index)}
        <Button
          variant="outline"
          size="sm"
          class="shrink-0"
          onclick={() => send(suggestion)}
        >
          {suggestion}
        </Button>
      {/each}
    </div>
    <form bind:this={form} onsubmit={onSubmit}>
      <InputGroup.Root>
        <InputGroup.Textarea
          bind:value={text}
          placeholder="Ask the agent to change your code..."
          onkeydown={(event) => {
            if (event.key === "Enter" && !event.shiftKey) {
              event.preventDefault();
              form?.requestSubmit();
            }
          }}
          class="p-3"
        />
        <InputGroup.Addon align="block-end">
          <InputGroup.Button
            size="icon-sm"
            variant="outline"
            class="rounded-full"
            aria-label="Attach files"
          >
            <PlusIcon />
          </InputGroup.Button>
          <InputGroup.Button
            type="submit"
            size="icon-sm"
            variant="default"
            class="ml-auto rounded-full"
            disabled={!canSend}
            aria-label="Send"
          >
            <ArrowUpIcon />
          </InputGroup.Button>
        </InputGroup.Addon>
      </InputGroup.Root>
    </form>
  </div>
</div>