rust-template/apps/web/src/views/HomeView.vue

<script setup lang="ts">
import QueryBox from "@/components/QueryBox.vue";
import {ref} from "vue";
import {usePromptStore} from "@/stores/prompt.ts";
import {useRouter} from "vue-router";

const promptStore = usePromptStore();
const router = useRouter();

const query = ref('');

const submitQuery = async () => {
  promptStore.setPrompt(query.value);
  await router.push('/response');
}

const updateQuery = (v: string) => {
  query.value = v;
}
</script>

<template>
  <main class="relative flex flex-1">
    <div class="absolute inset-x-0 top-[42%] -translate-y-1/2 px-1">
      <QueryBox @on-change="updateQuery" @submit="submitQuery" />
      <p class="mt-3 text-center text-[11px] text-muted">
        Enter to send
        <span class="mx-1.5 text-muted/50">·</span>
        <kbd class="rounded border border-line px-1 py-px font-mono text-[10px]">/</kbd>
        to focus
      </p>
    </div>
  </main>
</template>

<style scoped>

</style>