ChatPrompt

<script setup lang="ts">
import { ref } from 'vue'
import type { SelectItem } from 'pohon-ui';

const input = ref('');
const model = ref('claude-opus-4.6');

const models = [
  { label: 'Claude Opus 4.6', value: 'claude-opus-4.6', icon: 'i-simple-icons-anthropic' },
  { label: 'Gemini 3 Pro', value: 'gemini-3-pro', icon: 'i-simple-icons-googlegemini' },
  { label: 'GPT-5', value: 'gpt-5', icon: 'i-simple-icons-openai' },
] satisfies Array<SelectItem>;

function onSubmit() {
  input.value = '';
}
</script>

<template>
  <PChatPrompt
    v-model="input"
    class="w-full"
    @submit="onSubmit"
  >
    <template #footer>
      <PButton
        icon="i-lucide-plus"
        color="neutral"
        variant="ghost"
        size="sm"
      />

      <div class="flex gap-1.5 items-center">
        <PSelect
          v-model="model"
          :items="models"
          :icon="models.find(item => item.value === model)?.icon"
          placeholder="Select a model"
          variant="ghost"
          size="sm"
          square
        />

        <PChatPromptSubmit size="sm" />
      </div>
    </template>
  </PChatPrompt>
</template>

<script setup lang="ts">
import { ref, useTemplateRef } from 'vue'
import type { EditorMentionMenuItem, SelectItem } from 'pohon-ui';
import { Extension } from '@tiptap/core';

const input = ref('');
const mode = ref('auto');
const attachments = ref<Array<{ name: string; src?: string }>>([]);
const fileInputRef = useTemplateRef('fileInputRef');

const files: Array<EditorMentionMenuItem> = [
  { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
  { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' },
  { label: 'package.json', icon: 'i-vscode-icons-file-type-json' },
  { label: 'README.md', icon: 'i-vscode-icons-file-type-markdown' },
  { label: 'AuthForm.vue', icon: 'i-vscode-icons-file-type-vue' },
  { label: 'useChat.ts', icon: 'i-vscode-icons-file-type-typescript' },
];

const commands: Array<EditorMentionMenuItem> = [
  { label: 'init', icon: 'i-lucide-sparkles' },
  { label: 'review', icon: 'i-lucide-search-code' },
  { label: 'security-review', icon: 'i-lucide-shield-check' },
  { label: 'clear', icon: 'i-lucide-eraser' },
  { label: 'compact', icon: 'i-lucide-fold-vertical' },
  { label: 'config', icon: 'i-lucide-settings' },
];

const modes = [
  { label: 'Manual', value: 'manual', icon: 'i-lucide-hand' },
  { label: 'Edit automatically', value: 'edit', icon: 'i-lucide-code-xml' },
  { label: 'Plan mode', value: 'plan', icon: 'i-lucide-list-checks' },
  { label: 'Auto mode', value: 'auto', icon: 'i-lucide-zap' },
] satisfies Array<SelectItem>;

// SSR-safe target so the menus aren't clipped by overflow
const appendToBody = false ? () => document.body : undefined;

function onFilesChange(event: Event) {
  const target = event.target as HTMLInputElement;
  for (const file of Array.from(target.files ?? [])) {
    attachments.value.push({
      name: file.name,
      src: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined,
    });
  }
  target.value = '';
}

function onSubmit() {
  console.log('submit', input.value);

  input.value = '';
  attachments.value = [];
}
</script>

<template>
  <PChatPrompt
    v-model="input"
    class="p-0 gap-0 w-full"
    placeholder="Press / to open the command menu"
    :ui="{
      header: 'px-2.5 py-2 border-b border-border',
      footer: 'px-2.5 py-2 border-t border-border',
    }"
    @submit="onSubmit"
  >
    <template
      v-if="attachments.length"
      #header
    >
      <PButton
        v-for="(file, index) in attachments"
        :key="index"
        :label="file.name"
        :avatar="file.src ? { src: file.src } : undefined"
        :icon="file.src ? undefined : 'i-lucide-file'"
        color="neutral"
        variant="soft"
        size="xs"
        square
        trailing-icon="i-lucide-x"
        @click="attachments.splice(index, 1)"
      />
    </template>

    <template #body="{ submit, placeholder }">
      <PEditor
        v-slot="{ editor }"
        v-model="input"
        content-type="markdown"
        :starter-kit="false"
        :placeholder="placeholder"
        class="min-h-12 w-full"
        :ui="{ base: 'p-2.5! [&_.mention]:bg-primary/5 [&_.mention]:rounded-sm [&_.mention]:px-0.5 [&_.mention]:py-0.25' }"
        :extensions="[Extension.create({
          name: 'chatPromptSubmit',
          priority: 1000,
          addKeyboardShortcuts: () => ({ Enter: () => (submit(), true) }),
        })]"
      >
        <PEditorMentionMenu
          :editor="editor"
          char="@"
          plugin-key="mention"
          :items="files"
          :append-to="appendToBody"
        />
        <PEditorMentionMenu
          :editor="editor"
          char="/"
          plugin-key="command"
          :items="commands"
          :append-to="appendToBody"
        />
      </PEditor>
    </template>

    <template #footer>
      <div class="flex gap-0.5 items-center">
        <PButton
          icon="i-lucide-plus"
          color="neutral"
          variant="ghost"
          aria-label="Attach files"
          size="sm"
          @click="fileInputRef?.click()"
        />
        <input
          ref="fileInputRef"
          type="file"
          multiple
          class="hidden"
          @change="onFilesChange"
        >
      </div>

      <div class="flex gap-1 items-center">
        <PSelect
          v-model="mode"
          :items="modes"
          :icon="modes.find(item => item.value === mode)?.icon"
          color="neutral"
          variant="ghost"
          size="sm"
          square
        />

        <PChatPromptSubmit
          size="sm"
          :disabled="!input.trim()"
        />
      </div>
    </template>
  </PChatPrompt>
</template>