Tyler
208 lines
9.3 KiB
HTML
208 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ollama Sidebar</title>
|
|
<link rel="stylesheet" href="sidepanel.css">
|
|
<link rel="stylesheet" href="hljs-github-dark.min.css">
|
|
<script src="marked.min.js"></script>
|
|
<script src="highlight.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app" data-theme="dark">
|
|
|
|
<!-- ── Header ─────────────────────────────────────────────── -->
|
|
<header>
|
|
<div class="h-left">
|
|
<button id="btn-sessions" class="icon-btn" title="Chat history">💬</button>
|
|
<span class="app-title">Ollama</span>
|
|
</div>
|
|
<div class="h-right">
|
|
<div class="status-wrap">
|
|
<span id="status-dot" class="status-dot" title="Checking…"></span>
|
|
<div id="stats-panel" class="stats-panel hidden"></div>
|
|
</div>
|
|
<button id="btn-compact" class="icon-btn" title="Compact mode">≡</button>
|
|
<button id="btn-help" class="icon-btn" title="Keyboard shortcuts (Ctrl+?)">?</button>
|
|
<button id="btn-settings" class="icon-btn" title="Settings">⚙</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ── Sessions panel ─────────────────────────────────────── -->
|
|
<div id="sessions-panel" class="drop-panel hidden">
|
|
<div class="panel-hdr">
|
|
<span class="panel-title">Conversations</span>
|
|
<button id="btn-new-session" class="pill-btn">+ New</button>
|
|
</div>
|
|
<input type="text" id="session-search" class="session-search" placeholder="Search conversations…" spellcheck="false">
|
|
<div id="sessions-list" class="sessions-list"></div>
|
|
</div>
|
|
|
|
<!-- ── Session bar ─────────────────────────────────────────── -->
|
|
<div class="session-bar">
|
|
<span id="session-name-display" class="session-name" title="Double-click to rename"></span>
|
|
<div class="session-bar-actions">
|
|
<select id="model-select" class="model-select-bar" title="Active model"></select>
|
|
<select id="model-select-b" class="model-select-bar hidden" title="Second model (compare)"></select>
|
|
<button id="btn-persona" class="icon-btn sm" title="Switch persona">🎭</button>
|
|
<button id="btn-export-session" class="icon-btn sm" title="Export chat as Markdown">📥</button>
|
|
<button id="btn-delete-session" class="icon-btn sm danger" title="Delete chat">🗑</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Chat area ───────────────────────────────────────────── -->
|
|
<div id="chat-area" class="chat-area">
|
|
<div id="messages" class="messages"></div>
|
|
</div>
|
|
|
|
<!-- ── Input area ──────────────────────────────────────────── -->
|
|
<div class="input-area">
|
|
|
|
<!-- Row 1: Context chips (shown when active) -->
|
|
<div id="file-chips-area" class="file-chips-area hidden">
|
|
<div id="file-chips" class="file-chips"></div>
|
|
</div>
|
|
|
|
<!-- Context window bar -->
|
|
<div id="ctx-bar-wrap" class="ctx-bar-wrap-full" title="Context window usage">
|
|
<span class="ctx-bar-label">Context</span>
|
|
<div class="ctx-bar-track">
|
|
<div id="ctx-bar" class="ctx-bar"></div>
|
|
</div>
|
|
<span id="ctx-bar-pct" class="ctx-bar-pct">0%</span>
|
|
</div>
|
|
|
|
<!-- Row 2: Message textarea -->
|
|
<textarea id="input-message"
|
|
placeholder="Message… (Enter to send, Shift+Enter for newline, / for templates)"
|
|
rows="2"
|
|
spellcheck="true"></textarea>
|
|
|
|
<!-- Template autocomplete dropdown -->
|
|
<div id="template-dropdown" class="tmpl-dropdown hidden">
|
|
<div class="tmpl-dd-header">
|
|
Templates
|
|
<button id="btn-tmpl-manage-inline" class="pill-btn">Manage</button>
|
|
</div>
|
|
<div id="tmpl-dd-list" class="tmpl-dd-list"></div>
|
|
</div>
|
|
|
|
<!-- Row 3: Controls -->
|
|
<div class="send-row">
|
|
<button id="btn-compare" class="icon-btn sm compare-btn" title="Compare two models (select a second model to begin)">
|
|
<span class="tbi">⇔</span><span class="tbi" style="font-size:10px;">Compare</span>
|
|
</button>
|
|
<button id="btn-templates-open" class="icon-btn sm" title="Prompt templates (/)">
|
|
<span class="tbi">/</span>
|
|
</button>
|
|
<button id="btn-page-context" class="icon-btn sm ctx-btn" title="Add current page as context">
|
|
<span class="tbi">🌐</span><span id="page-ctx-lbl">Add page</span>
|
|
</button>
|
|
<button id="btn-attach-file" class="icon-btn sm" title="Attach file or image">
|
|
<span class="tbi">📎</span>
|
|
</button>
|
|
<div class="tb-spacer"></div>
|
|
<button id="btn-send" class="send-btn" title="Send message (Enter)">►</button>
|
|
</div>
|
|
|
|
</div><!-- /input-area -->
|
|
|
|
<!-- ── Template manager overlay ───────────────────────────── -->
|
|
<div id="tmpl-overlay" class="overlay hidden">
|
|
<div class="overlay-panel">
|
|
<div class="overlay-hdr">
|
|
<span>Prompt Templates</span>
|
|
<button id="btn-tmpl-overlay-close" class="icon-btn">✕</button>
|
|
</div>
|
|
<div id="tmpl-list" class="tmpl-list"></div>
|
|
<div class="tmpl-add-form">
|
|
<input id="tmpl-new-name" type="text" placeholder="Template name…" maxlength="60">
|
|
<textarea id="tmpl-new-content" placeholder="Template content…" rows="4"></textarea>
|
|
<button id="btn-tmpl-add" class="primary-btn">Add Template</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Persona manager overlay ────────────────────────────── -->
|
|
<div id="persona-overlay" class="overlay hidden">
|
|
<div class="overlay-panel">
|
|
<div class="overlay-hdr">
|
|
<span>Personas</span>
|
|
<button id="btn-persona-overlay-close" class="icon-btn">✕</button>
|
|
</div>
|
|
<div id="persona-list" class="tmpl-list"></div>
|
|
<div class="tmpl-add-form">
|
|
<input id="persona-new-name" type="text" placeholder="Persona name…" maxlength="60">
|
|
<textarea id="persona-new-prompt" placeholder="System prompt…" rows="4"></textarea>
|
|
<button id="btn-persona-add" class="primary-btn">Add Persona</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Export preview overlay ──────────────────────────────── -->
|
|
<div id="export-overlay" class="overlay hidden">
|
|
<div class="overlay-panel">
|
|
<div class="overlay-hdr">
|
|
<span id="export-overlay-title">Export</span>
|
|
<div style="display:flex;gap:6px;align-items:center;">
|
|
<button id="btn-export-copy" class="pill-btn">Copy</button>
|
|
<button id="btn-export-close" class="icon-btn">✕</button>
|
|
</div>
|
|
</div>
|
|
<pre id="export-content" class="export-pre"></pre>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- ── Drag and drop overlay ───────────────────────────────── -->
|
|
<div id="drag-overlay" class="drag-overlay hidden">
|
|
<div class="drag-overlay-inner">
|
|
<div class="drag-icon">📎</div>
|
|
<div class="drag-label">Drop files to attach</div>
|
|
<div class="drag-sub">.txt · .md · .pdf · .csv · .jpg · .png · .webp</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Keyboard shortcuts overlay ──────────────────────────── -->
|
|
<div id="help-overlay" class="overlay hidden">
|
|
<div class="overlay-panel help-panel">
|
|
<div class="overlay-hdr">
|
|
<span>Keyboard Shortcuts</span>
|
|
<button id="btn-help-close" class="icon-btn">✕</button>
|
|
</div>
|
|
<div class="help-body">
|
|
<div class="help-group">
|
|
<div class="help-group-label">Chat</div>
|
|
<div class="help-row"><kbd>Enter</kbd><span>Send message</span></div>
|
|
<div class="help-row"><kbd>Shift</kbd><kbd>Enter</kbd><span>New line</span></div>
|
|
<div class="help-row"><kbd>Ctrl</kbd><kbd>L</kbd><span>Clear conversation (press twice)</span></div>
|
|
</div>
|
|
<div class="help-group">
|
|
<div class="help-group-label">Navigation</div>
|
|
<div class="help-row"><kbd>Ctrl</kbd><kbd>K</kbd><span>New chat</span></div>
|
|
<div class="help-row"><kbd>Ctrl</kbd><kbd>,</kbd><span>Open settings</span></div>
|
|
<div class="help-row"><kbd>Ctrl</kbd><kbd>/</kbd><span>Open templates</span></div>
|
|
<div class="help-row"><kbd>Ctrl</kbd><kbd>?</kbd><span>Show this help</span></div>
|
|
<div class="help-row"><kbd>Esc</kbd><span>Close panels and dropdowns</span></div>
|
|
</div>
|
|
<div class="help-group">
|
|
<div class="help-group-label">Files</div>
|
|
<div class="help-row"><span class="help-drag">Drag & drop</span><span>Attach files or images</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /#app -->
|
|
<script src="pdf.min.js"></script>
|
|
<script>
|
|
if (typeof pdfjsLib !== 'undefined') {
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc =
|
|
chrome.runtime.getURL('pdf.worker.min.js');
|
|
}
|
|
</script>
|
|
<script src="sidepanel.js"></script>
|
|
</body>
|
|
</html>
|