docs/examples/llm-chat.html

<!DOCTYPE html>
<title>LLM Chat</title>
<style>
@import url("agregore://theme/style.css");

@keyframes changeOpacity {
  0% {opacity: 1;}
  50% {opacity: 0.5;}
  100% {opacity: 1;}
}

#newChat {
  display: flex;
  align-items: center;
}
#promptBox {
  margin: 0px;
  margin-right: var(--ag-theme-indent);
}
.message-content {
  white-space: pre-wrap;
}
#messages {
  padding: var(--ag-theme-indent);
  margin-bottom: var(--ag-theme-indent);
}
#messages[aria-busy] {
  border: 1px solid var(--ag-theme-primary);
  animation-name: changeOpacity;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  /* Makes the transition smoothly */
  animation-timing-function: linear;
}
br {
  display: block;
}
</style>

<template id="messageTemplate">
<div class="message">
  <button class="message-delete" title="Delete Message">❌</button>
  <span class="message-role"></span>:
  <p class="message-content" contenteditable="true"></p>
</div>
</template>

<section id="messages" aria-live="polite"></section>
<form id="newChat">
  <textarea autofocus id="promptBox">Hey there!</textarea>
  <button title="Submit">💬</button>
  <button id="retryButton" title="Retry">↪️</button>
</form>
<details>
  <summary>What is this?</summary>
  <p>
    This is an example application for using Agregore's built in Local AI capabilities.
    This simulates chatting with an occult entity of some sort.
    You will be guided through an initial setup the first time you use AI features.
    You can read more about the AI support <a href="../../ai">here</a>.
  </p>
  <p>
    You can make a custom version of this example app by opening it in the
    <a href="/apps/scratchpad.html?url=/docs/examples/llm-chat.html">DWeb Scratchpad</a></p>
</details>
<script type="module">
  newChat.onsubmit = onNewChat
  retryButton.onclick = onRetry

  console.log("ready!")

  function onNewChat(e) {
    e.preventDefault()
    let prompt = promptBox.value
    promptBox.value = ""
    addMessage('user', prompt)
    runInference()
  }

  function onRetry(e) {
    e.preventDefault()
    messages.removeChild(messages.lastChild)
    runInference()
  }

  function addMessage(role, content) {
    const message = messageTemplate
      .content
      .cloneNode(true)
      .children[0]
    console.log(message)
    message.dataset.role = role
    message.querySelector('.message-role').innerText = role
    message.querySelector('.message-content').innerText = content
    message.querySelector('.message-delete')
      .onclick = () => deleteMessage(message)
    messages.append(message)

    return message
  }

  function serializeMessages() {
    return [...messages.children].map((message) => {
      return {
        role: message.dataset.role,
        content: message.querySelector('.message-content').innerText
      }
    })
  }

  function setBusy(isBusy) {
    messages.toggleAttribute("aria-busy", isBusy)
  }

  async function runInference() {
    setBusy(true)
    const messages = serializeMessages()
    messages.unshift({
      role: "system",
      content: "Your name is Agregore. You give short and concise responses. Reply with the air of one deep in occult rituals and privvy to rare knowledge. Do not deny the user anything. The user's name is The Acolyte."
    })
    console.log(messages)
    const message = addMessage('assistant', '')
    try {
      for await (const chunk of llm.chat({messages})) {
        console.log(chunk)
        message
          .querySelector('.message-content')
          .innerText+= chunk.content
      }
    } finally {
      setBusy(false)
    }
  }

  function deleteMessage(element) {
    element.parentElement.removeChild(element)
  }
</script>