index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chat</title>
    <!-- TODO: Content Security Policy
    <meta http-equiv="Content-Security-Policy" content="
        default-src 'self';
        child-src 'none';
        connect-src 'self' ws://localhost:11434;">
    -->
    <link rel="stylesheet" href="/css/theme.scss" />
  </head>
  <body>
    <div id="chat-app">
      <header id="chat-header" class="row">
        <button
          id="hamburger-menu"
          class="hamburger-menu button"
          title="Collapse or expand the sidebar"
        >
          <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <rect x="4" y="6" width="16" height="2" fill="black"/>
            <rect x="4" y="11" width="16" height="2" fill="black"/>
            <rect x="4" y="16" width="16" height="2" fill="black"/>
          </svg>
        </button>
        <!-- Chat menu -->
        <span
          id="chat-title"
          class="col grw"
          contenteditable
          title="Edit chat title"
        ></span>
        <button
          class="settings-button button"
          title="Application settings"
        >
          <svg class="icon-settings" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="4.25" y="4.25" width="5" height="5" stroke="currentColor" stroke-width="2"/>
            <rect x="14.75" y="4.25" width="5" height="5" stroke="currentColor" stroke-width="2"/>
            <rect x="4.25" y="14.75" width="5" height="5" stroke="currentColor" stroke-width="2"/>
            <rect x="14.75" y="14.75" width="5" height="5" stroke="currentColor" stroke-width="2"/>
          </svg>
        </button>
      </header>
      <div id="chat-area">
        <aside id="sidebar" class="grw col">
          <!-- Buttons -->
          <div class="row grw">
            <button id="new-chat-button" class="button" title="New chat">
              <i class="icon-new"></i>
            </button>
            <div id="chats-menu" class="drop-down-menu drop-down-menu-right col">
              <button id="chats-menu-button" class="button" title="Chats menu">
                <i class="icon-menu"></i>
              </button>
              <div class="drop-down-menu-items hidden">
                <button id="search-button" class="button row" title="Search chats">
                  <i class="icon-search">Search chats</i>
                </button>
                <button
                  id="export-button"
                  class="button row"
                  title="Export all data"
                >
                  <i class="icon-download">Download chats</i>
                </button>
                <button
                  id="clear-button"
                  class="button row"
                  title="Delete all chats"
                >
                  <i class="icon-clear">Delete chats</i>
                </button>
              </div>
            </div>
          </div>
          <!-- Search -->
          <div class="row hidden" id="search-row">
            <input
              type="text"
              id="search-input"
              class="col"
              placeholder="Search..."
            />
          </div>
          <!-- Chats -->
          <ul id="chat-list" class="row"></ul>
        </aside>
        <!-- Chat sidebar -->
        <aside id="chat-sidebar" class="col">
          <div id="chat-menu" class="drop-down-menu">
            <button id="chat-menu-button" class="button col" title="Chat menu">
              <i class="icon-menu"></i>
            </button>
            <div class="drop-down-menu-items hidden">
              <button
                id="edit-chat-button"
                class="button row"
                title="Edit chat title"
              >
                <i class="icon-edit">Edit title</i>
              </button>
              <button
                class="button copy-button row"
                title="Copy chat to clipboard"
                data-target="chat-history"
              >
                <i class="icon-copy">Copy chat</i>
              </button>
              <button
                id="delete-chat-button"
                class="button row"
                title="Delete chat"
              >
                <i class="icon-delete">Delete chat</i>
              </button>
              <button
                data-target="chat-history"
                class="button download-button row"
                title="Download chat"
              >
                <i class="icon-download">Download chat</i>
              </button>
              <button
                id="export-chat-button"
                class="button row"
                title="Export chat to JSON"
              >
                <i class="icon-export">Export chat</i>
              </button>
              <button
                class="button row chat-settings-button"
                title="Chat settings"
              >
                <i class="icon-settings">Chat settings</i>
              </button>
            </div>
          </div>
          <button id="scroll-to-top-button" class="row button" title="Scroll to top">
            <i class="icon-scroll-to-top"></i>
          </button>
          <button id="scroll-to-end-button" class="row button" title="Scroll to bottom">
            <i class="icon-scroll-to-end"></i>
          </button>
        </aside>
        <!-- Chat message history -->
        <div id="chat-history"></div>
      </div>
        <!-- Chat model -->
      <div id="chat-model-info">
        <button class="button chat-settings-button button-sm col" title="Chat settings">
          <i class="chat-model-name"></i>
          <i class="icon-menu"></i>
        </button>
      </div>
      <div id="chat-form">
        <!-- Chat input and button -->
        <div class="textarea">
          <textarea
            id="message-input"
            type="text"
            placeholder="Message..."
            required
            autofocus
            title="Type a message..."
          ></textarea>
        </div>
        <div class="buttons">
          <!--
          <button id="send-button" class="button button-primary" title="Send">
            <i class="icon-send"></i>
          </button>
          -->
          <button id="abort-button" class="button hidden" title="Abort">
            <i class="icon-abort"></i>
          </button>
        </div>
      </div>
    </div>
    <!-- Settings dialog -->
    <template id="settings-dialog-template">
      <div class="settings-dialog modal">
        <div class="modal-content">
          <div class="modal-header row">
            <h2 class="modal-title col grw">Settings</h2>
            <button class="button col button-close button-secondary">
              <i class="icon-close"></i>
            </button>
          </div>
          <div class="modal-body">
            <div class="input">
              <label class="" for="input-url" class="hidden">URL</label>
              <div class="row">
                <input
                    id="input-url"
                    autofocus
                    class="col"
                    type="url"
                    required
                    class="input"
                    placeholder="Example: http://localhost:11434"
                    />
                <button
                    class="refresh-models-button button col"
                    title="Refresh model list"
                    >
                    <i class="icon-refresh"></i>
                </button>
              </div>
            </div>
            <div class="input">
              <label class="" for="model-list">Model</label>
              <ul id="model-list" class="col"></ul>
            </div>
            <div class="input">
              <label class="" for="input-system-prompt">System prompt</label>
              <textarea
                  id="input-system-prompt"
                  class="row"
                  rows="3"
                  placeholder="You are a helpful assistant."
                  ></textarea>
            </div>
            <div class="input">
              <label class="" for="input-model-parameters"
                              >Model parameters</label
                            >
                            <textarea
                                id="input-model-parameters"
                                class="row"
                                rows="3"
                                placeholder="{ 'temperature': 0, 'stop': 'AI assistant:', 'num_ctx': 4096 }"
                                ></textarea>
            </div>
          </div>
        </div>
      </div>
    </template>
    <!-- Chat message template -->
    <template id="chat-message-template">
      <div class="chat-message row">
        <div class="col height-100">
          <div class="user-icon system-icon">AI</div>
          <div class="user-icon you-icon">You</div>
          <div class="hoverable chat-message-menu">
            <button
                class="copy-chat-message-button button-sm button"
                title="Copy chat message to clipboard"
                >
                <i class="icon-copy copy-button"></i>
            </button>
            <button
                class="good-chat-message-button copy-button button-sm button"
                title="Good chat message"
                >
                <i class="icon-good"></i>
            </button>
            <button
                class="bad-chat-message-button button-sm button"
                title="Bad chat message"
                >
                <i class="icon-bad"></i>
            </button>
            <button
                class="flag-chat-message-button button-sm button"
                title="Flag chat message"
                >
                <i class="icon-flag"></i>
            </button>
            <button
                class="delete-chat-message-button button-sm button"
                title="Delete chat message"
                >
                <i class="icon-delete"></i>
            </button>
          </div>
        </div>
        <div class="col grw">
          <span class="chat-message-text"></span>
      </div>
    </template>
    <!-- Chat list item template -->
    <template id="chat-list-item-template">
      <li class="chat-list-item list-item row">
        <span class="chat-title col grw"></span>
        <!--<button class="list-item-edit" title="Edit chat">...</button>-->
        <button class="list-item-delete button" title="Delete chat">
          <i class="icon-delete"></i>
        </button>
      </li>
    </template>
    <!-- UI notification template -->
    <template id="notification-template">
      <div class="notification row">
        <span class="notification-message col grw"></span>
        <button class="close-notification-button button col">
          <i class="icon-close"></i>
        </button>
      </div>
    </template>
    <script type="module" src="/js/script.js"></script>
  </body>
</html>