odidere/internal/service/templates/static/templates.gohtml

{{ define "templates" }}
  <template id="tpl-user-message">
    <div class="message message--user">
      <div class="message__body">
        <div class="message__content"></div>
        <div class="message__actions">
          <svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#user"></use></svg>
          <div class="message__actions-buttons">
            <button
              type="button"
              class="message__action-btn message__action-btn--delete"
              data-action="delete"
              aria-label="Delete message"
            >
              <svg class="icon"><use href="/static/icons.svg#trash"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn"
              data-action="inspect"
              aria-label="Show details"
              aria-expanded="false"
            >
              <svg class="icon"><use href="/static/icons.svg#inspect"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn"
              data-action="edit"
              aria-label="Edit message"
            >
              <svg class="icon"><use href="/static/icons.svg#edit"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn"
              data-action="copy"
              aria-label="Copy to clipboard"
            >
              <svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
            </button>
          </div>
        </div>
        <div class="message__debug">
          <dl class="message__debug-list"></dl>
        </div>
      </div>
    </div>
  </template>

  <template id="tpl-assistant-message">
    <div class="message message--assistant">
      <div class="message__body">
        <details class="message__collapsible" open>
          <summary class="message__collapsible-summary">
            <svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#content"></use></svg>
            <span class="message__collapsible-label">Content</span>
          </summary>
          <div class="message__content"></div>
        </details>
        <div class="message__actions">
          <svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#assistant"></use></svg>
          <div class="message__actions-buttons">
            <button
              type="button"
              class="message__action-btn message__action-btn--play"
              data-action="play"
              aria-label="Play"
            >
              <svg class="icon"><use href="/static/icons.svg#volume"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn message__action-btn--delete"
              data-action="delete"
              aria-label="Delete message"
            >
              <svg class="icon"><use href="/static/icons.svg#trash"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn"
              data-action="inspect"
              aria-label="Show details"
              aria-expanded="false"
            >
              <svg class="icon"><use href="/static/icons.svg#inspect"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn"
              data-action="edit"
              aria-label="Edit message"
            >
              <svg class="icon"><use href="/static/icons.svg#edit"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn"
              data-action="copy"
              aria-label="Copy to clipboard"
            >
              <svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
            </button>
          </div>
        </div>
        <div class="message__debug">
          <dl class="message__debug-list"></dl>
        </div>
      </div>
    </div>
  </template>

  <template id="tpl-error-message">
    <div class="message message--error message--assistant">
      <div class="message__body">
        <div class="message__content"></div>
        <div class="message__actions">
          <svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#assistant"></use></svg>
          <div class="message__actions-buttons">
            <button
              type="button"
              class="message__action-btn"
              data-action="copy"
              aria-label="Copy to clipboard"
            >
              <svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn message__action-btn--delete"
              data-action="delete"
              aria-label="Delete message"
            >
              <svg class="icon"><use href="/static/icons.svg#trash"></use></svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </template>
  <template id="tpl-attachment-chip">
    <div class="compose__attachment">
      <span class="compose__attachment-name"></span>
      <button
        type="button"
        class="compose__attachment-remove"
        aria-label="Remove attachment"
      >
        <svg class="icon"><use href="/static/icons.svg#x-circle"></use></svg>
      </button>
    </div>
  </template>

  <template id="tpl-debug-row">
    <dt></dt>
    <dd></dd>
  </template>

  <template id="tpl-reasoning-message">
    <div class="message message--reasoning">
      <div class="message__body">
        <details class="message__collapsible">
          <summary class="message__collapsible-summary">
            <svg class="message__icon message__icon--reasoning" aria-hidden="true"><use href="/static/icons.svg#reasoning"></use></svg>
            <span class="message__collapsible-label">Reasoning</span>
          </summary>
          <div class="message__content"></div>
        </details>
        <div class="message__actions">
            <svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#assistant"></use></svg>
          <div class="message__actions-buttons">
            <button
              type="button"
              class="message__action-btn message__action-btn--delete"
              data-action="delete"
              aria-label="Delete message"
            >
              <svg class="icon"><use href="/static/icons.svg#trash"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn"
              data-action="inspect"
              aria-label="Show details"
              aria-expanded="false"
            >
              <svg class="icon"><use href="/static/icons.svg#inspect"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn"
              data-action="edit"
              aria-label="Edit message"
            >
              <svg class="icon"><use href="/static/icons.svg#edit"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn"
              data-action="copy"
              aria-label="Copy to clipboard"
            >
              <svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
            </button>
          </div>
        </div>
        <div class="message__debug">
          <dl class="message__debug-list"></dl>
        </div>
      </div>
    </div>
  </template>

  <template id="tpl-tool-message">
    <div class="message message--tool">
      <div class="message__body">
        <details class="message__collapsible">
          <summary class="message__collapsible-summary">
            <svg class="message__icon message__icon--tool" aria-hidden="true"><use href="/static/icons.svg#tool"></use></svg>
            <span class="message__collapsible-label"></span>
          </summary>
          <div class="message__content">
            <div class="message__tool-section">
              <div class="message__tool-section-label">Arguments</div>
              <pre class="message__tool-pre" data-args></pre>
            </div>
            <div class="message__tool-section message__tool-section--output" hidden>
              <div class="message__tool-section-label">Output</div>
              <pre class="message__tool-pre" data-output></pre>
            </div>
          </div>
        </details>
        <div class="message__actions">
            <svg class="message__icon" aria-hidden="true"><use href="/static/icons.svg#assistant"></use></svg>
          <div class="message__actions-buttons">
            <button
              type="button"
              class="message__action-btn message__action-btn--delete"
              data-action="delete"
              aria-label="Delete message"
            >
              <svg class="icon"><use href="/static/icons.svg#trash"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn"
              data-action="inspect"
              aria-label="Show details"
              aria-expanded="false"
            >
              <svg class="icon"><use href="/static/icons.svg#inspect"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn"
              data-action="edit"
              aria-label="Edit message"
            >
              <svg class="icon"><use href="/static/icons.svg#edit"></use></svg>
            </button>
            <button
              type="button"
              class="message__action-btn"
              data-action="copy"
              aria-label="Copy to clipboard"
            >
              <svg class="icon"><use href="/static/icons.svg#copy"></use></svg>
            </button>
          </div>
        </div>
        <div class="message__debug">
          <dl class="message__debug-list"></dl>
        </div>
      </div>
    </div>
  </template>
{{ end }}