<script lang="ts">
  import ChatHistory from '$lib/components/ChatHistory.svelte';
  import ChatMessage from '$lib/components/ChatMessage.svelte';
  import Input from '$lib/components/Input.svelte';
  import { chatMessages, answer } from '$lib/stores/chat-messages';
  import { onMount } from 'svelte';

  let query = '';
  const INITIAL_QUERY = `You will erroneously define a randomly chosen English word with the definition of an English word that sounds similar. You will then ask them to guess the correct word for the errornous definition.

 Here is an example of what you would output:

 Today we'll be playing a word game. Here's how it works: I will define a word. But the definition I give it will actually be for a different but similarly-sounding word. You'll have to guess the correct word that is being defined.

 Ready to begin? Here's the first one:

 "A photon is a legendary bird which according to one account lived 500 years, burned itself to ashes on a pyre, and rose alive from the ashes to live another period. What word am I actually describing?"

--- 

 To further explain the output, I chose two words that sound similar, photon and phoenix. I am then using the definition of a phoenix to describe a photon, and the user will have to guess that the real word I'm describing is a phoenix.

 Repeat this process until the user incorrectly guesses 3 times.`;


//  onMount(async () => {
// 		await chatMessages.set(INITIAL_QUERY);
// 	});

  const handleSubmit = async () => {
    answer.set('...');
    await chatMessages.set(query);
    query = '';
  };
</script>

<section class="flex max-w-6xl w-full pt-4 justify-center">
  <div class="flex flex-col gap-2">
    <ChatHistory />
  </div>

  <div class="flex flex-col w-full px-8 items-center gap-2">
    <div
      class="h-[700px] w-full bg-black bg-opacity-20 rounded-md p-4 overflow-y-auto flex flex-col gap-4"
    >
      <div class="flex flex-col gap-2">
        {#each $chatMessages.messages as message}
          <ChatMessage type={message.role} message={message.content} />
        {/each}

        {#if $answer}
          <ChatMessage type="assistant" message={$answer} />
        {/if}
      </div>
    </div>
    <form
      class="flex w-full rounded-md gap-4 bg-black bg-opacity-20 p-2"
      on:submit|preventDefault={handleSubmit}
    >
      <Input type="text" bind:value={query} class="w-full" />
      <button
        type="submit"
        class="bg-black bg-opacity-40 hover:bg-white/5 px-8 py-1.5 border border-black/40 ml-[-0.5rem] rounded-md text-teal-300"
      >
        Send
      </button>
    </form>
  </div>
</section>
