Refactor UI
This commit is contained in:
dwrz
@@ -51,7 +51,13 @@
|
||||
<template id="tpl-assistant-message">
|
||||
<div class="message message--assistant">
|
||||
<div class="message__body">
|
||||
<div class="message__content"></div>
|
||||
<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">
|
||||
@@ -125,37 +131,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="tpl-collapsible">
|
||||
<details class="collapsible">
|
||||
<summary class="collapsible__summary">
|
||||
<span class="collapsible__label"></span>
|
||||
</summary>
|
||||
<div class="collapsible__content">
|
||||
<pre></pre>
|
||||
</div>
|
||||
</details>
|
||||
</template>
|
||||
|
||||
<template id="tpl-tool-call">
|
||||
<details class="collapsible collapsible--tool">
|
||||
<summary class="collapsible__summary">
|
||||
<svg class="icon"><use href="/static/icons.svg#tool"></use></svg>
|
||||
<span class="collapsible__label"></span>
|
||||
</summary>
|
||||
<div class="collapsible__content">
|
||||
<div class="collapsible__section">
|
||||
<div class="collapsible__section-label">Arguments</div>
|
||||
<pre class="collapsible__pre" data-args></pre>
|
||||
</div>
|
||||
<div class="collapsible__section collapsible__section--output" hidden>
|
||||
<div class="collapsible__section-label">Output</div>
|
||||
<pre class="collapsible__pre" data-output></pre>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</template>
|
||||
|
||||
<template id="tpl-attachment-chip">
|
||||
<div class="compose__attachment">
|
||||
<span class="compose__attachment-name"></span>
|
||||
@@ -173,4 +148,123 @@
|
||||
<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 }}
|
||||
|
||||
Reference in New Issue
Block a user