Refactor UI
This commit is contained in:
@@ -3,5 +3,6 @@
|
||||
{{ template "main" . }}
|
||||
{{ template "templates" . }}
|
||||
{{ template "modal/settings" . }}
|
||||
{{ template "modal/edit" . }}
|
||||
</body>
|
||||
{{ end }}
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
type="button"
|
||||
class="compose__action-btn"
|
||||
id="attach"
|
||||
data-action="attach"
|
||||
aria-label="Attach files"
|
||||
>
|
||||
<svg class="icon"><use href="/static/icons.svg#attach"></use></svg>
|
||||
@@ -22,6 +23,7 @@
|
||||
type="button"
|
||||
class="compose__action-btn"
|
||||
id="location"
|
||||
data-action="location"
|
||||
aria-label="Include location"
|
||||
title="Include GPS location"
|
||||
>
|
||||
@@ -34,6 +36,7 @@
|
||||
type="button"
|
||||
class="compose__action-btn"
|
||||
id="transcribe"
|
||||
data-action="transcribe"
|
||||
aria-label="Transcribe to text"
|
||||
title="Record and transcribe (does not send)"
|
||||
>
|
||||
@@ -43,6 +46,7 @@
|
||||
type="button"
|
||||
class="compose__action-btn compose__action-btn--record"
|
||||
id="ptt"
|
||||
data-action="ptt"
|
||||
aria-label="Push to talk"
|
||||
>
|
||||
<svg class="icon"><use href="/static/icons.svg#mic"></use></svg>
|
||||
@@ -51,6 +55,7 @@
|
||||
type="button"
|
||||
class="compose__action-btn compose__action-btn--send"
|
||||
id="send"
|
||||
data-action="send"
|
||||
aria-label="Send message"
|
||||
>
|
||||
<svg class="icon compose__icon--send"><use href="/static/icons.svg#send"></use></svg>
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
type="button"
|
||||
class="footer__toolbar-btn"
|
||||
id="settings"
|
||||
data-action="settings"
|
||||
aria-label="Settings"
|
||||
>
|
||||
<svg class="icon"><use href="/static/icons.svg#settings"></use></svg>
|
||||
@@ -14,6 +15,7 @@
|
||||
type="button"
|
||||
class="footer__toolbar-btn"
|
||||
id="reset"
|
||||
data-action="reset"
|
||||
aria-label="Reset conversation"
|
||||
>
|
||||
<svg class="icon"><use href="/static/icons.svg#trash"></use></svg>
|
||||
@@ -22,6 +24,7 @@
|
||||
type="button"
|
||||
class="footer__toolbar-btn"
|
||||
id="scroll"
|
||||
data-action="scroll"
|
||||
aria-label="Scroll to top"
|
||||
>
|
||||
<svg class="icon scroll-icon--up"><use href="/static/icons.svg#scroll-up"></use></svg>
|
||||
@@ -31,6 +34,7 @@
|
||||
type="button"
|
||||
class="footer__toolbar-btn"
|
||||
id="mute"
|
||||
data-action="mute"
|
||||
aria-label="Mute"
|
||||
>
|
||||
<svg class="icon"><use href="/static/icons.svg#volume"></use></svg>
|
||||
|
||||
@@ -9,6 +9,6 @@
|
||||
<meta name="tts-default-voice" content="{{ .TTSDefaultVoice }}">
|
||||
<title>Odidere</title>
|
||||
<link rel="stylesheet" href="/static/main.css">
|
||||
<script defer src="/static/main.js"></script>
|
||||
<script type="module" src="/static/main.js"></script>
|
||||
</head>
|
||||
{{ end }}
|
||||
|
||||
42
internal/service/templates/static/modal/edit.gohtml
Normal file
42
internal/service/templates/static/modal/edit.gohtml
Normal file
@@ -0,0 +1,42 @@
|
||||
{{ define "modal/edit" }}
|
||||
<template id="tpl-edit-modal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h2></h2>
|
||||
<button type="button" class="modal__close" aria-label="Cancel">
|
||||
<svg class="icon"><use href="/static/icons.svg#close"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<textarea class="modal__textarea" id="edit-textarea" rows="10"></textarea>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button type="button" class="modal__save" id="edit-save">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="tpl-edit-tool-modal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
<h2>Edit Tool Call</h2>
|
||||
<button type="button" class="modal__close" aria-label="Cancel">
|
||||
<svg class="icon"><use href="/static/icons.svg#close"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<details class="modal__collapsible">
|
||||
<summary class="modal__collapsible-summary">Tool Call (JSON)</summary>
|
||||
<textarea class="modal__textarea" id="edit-tool-call" rows="8"></textarea>
|
||||
</details>
|
||||
<details class="modal__collapsible">
|
||||
<summary class="modal__collapsible-summary">Tool Result</summary>
|
||||
<textarea class="modal__textarea" id="edit-tool-result" rows="6"></textarea>
|
||||
</details>
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button type="button" class="modal__save" id="edit-save">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
{{ end }}
|
||||
@@ -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