diff --git a/app/app.vue b/app/app.vue index 49dea9d..a0f374e 100644 --- a/app/app.vue +++ b/app/app.vue @@ -65,13 +65,6 @@ provide('sha', sha) const historyOpen = useVersionHistory() const { assistant } = useAppConfig() -const assistantOpen = useAssistant() - -// Mounting pulls the AI SDK + shiki chunks, so the panel only mounts after the first open. -const assistantMounted = ref(false) -watch(assistantOpen, (isOpen) => { - if (isOpen) assistantMounted.value = true -}) defineShortcuts({ // Disabled `d` for now as it prevents the playground editor to work with the `d` letter @@ -87,26 +80,33 @@ defineShortcuts({ color="var(--ui-text-highlighted)" /> - - - - - - - - - - - - - - - +
+
+ + + + + + + + + + + + + + + +
+ + + + +
- diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue index 983e5e7..440cfc8 100644 --- a/app/components/AppHeader.vue +++ b/app/components/AppHeader.vue @@ -27,7 +27,7 @@ const navigation = useMainNavigation() label="Ask AI" color="neutral" variant="outline" - @click="assistantOpen = true" + @click="assistantOpen = !assistantOpen" /> assistant?.faqQuestions ?? []) +// Compact prose sizes for the narrow panel +const proseUi = { + prose: { + p: { base: 'my-2 text-sm/6' }, + li: { base: 'my-0.5 text-sm/6' }, + ul: { base: 'my-2' }, + ol: { base: 'my-2' }, + h1: { base: 'text-xl mb-4' }, + h2: { base: 'text-lg mt-6 mb-3' }, + h3: { base: 'text-base mt-4 mb-2' }, + h4: { base: 'text-sm mt-3 mb-1.5' }, + code: { base: 'text-xs' }, + pre: { root: 'my-2', base: 'text-xs/5' }, + table: { root: 'my-2' }, + hr: { base: 'my-4' }, + }, +} + +// The panel mounts on every page (for the push-header layout), so autofocus would steal +// focus on load. Focus the prompt only once the assistant actually opens. +const promptRef = ref<{ textareaRef?: HTMLTextAreaElement } | null>(null) +watch(open, (isOpen) => { + if (!isOpen) return + nextTick(() => promptRef.value?.textareaRef?.focus({ preventScroll: true })) +}) + watch(input, (value) => { if (value.length > MAX_INPUT) input.value = value.slice(0, MAX_INPUT) }) @@ -99,160 +125,152 @@ function sourcesLabel(message: UIMessage) {