pediatric-ai-scribe-v3/public/components/assistant.html

        <div class="module-header assistant-header">
          <div>
            <h2><i class="fas fa-brain" style="color:var(--purple);"></i> AI Clinical Assistant</h2>
            <p>Ask focused clinical questions over indexed Nextcloud books/resources, or ask for a teaching image directly in the chat box.</p>
          </div>
          <div class="assistant-status" id="assistant-status">
            <span class="assistant-dot"></span>
            <span id="assistant-status-text">Ready</span>
          </div>
        </div>

        <div class="assistant-layout">
          <section class="assistant-main card">
            <div class="assistant-toolbar">
              <div>
                <strong>Clinical Question</strong>
                <span id="assistant-model-label" class="model-tag">Admin model</span>
              </div>
              <div class="assistant-toolbar-actions">
                <button id="btn-assistant-clear" class="btn-sm btn-ghost" type="button"><i class="fas fa-rotate-left"></i> New chat</button>
                <button id="btn-assistant-copy" class="btn-sm btn-ghost" type="button"><i class="fas fa-copy"></i> Copy answer</button>
                <button id="btn-assistant-save" class="btn-sm btn-ghost" type="button"><i class="fas fa-bookmark"></i> Save chat</button>
                <button id="btn-assistant-download-chat" class="btn-sm btn-ghost" type="button">Download transcript</button>
                <button id="btn-assistant-handoff" class="btn-sm btn-ghost" type="button">Request handoff summary</button>
                <button id="btn-assistant-export-pdf" class="btn-sm btn-ghost" type="button"><i class="fas fa-file-pdf"></i> Export PDF</button>
              </div>
            </div>

            <div id="assistant-messages" class="assistant-messages" aria-live="polite">
              <div class="assistant-empty">
                <i class="fas fa-book-medical"></i>
                <h3>Evidence-first pediatric assistant</h3>
                <p>Ask a real clinical question. Citations stay linked to the source cards on the right.</p>
                <div class="assistant-examples">
                  <button type="button" data-assistant-example="In a 4-year-old with acute wheeze, when should magnesium sulfate be considered and what dose is recommended?">Status asthma escalation</button>
                  <button type="button" data-assistant-example="What are the red flags for bilious vomiting in neonates, and what immediate workup is recommended?">Bilious vomiting</button>
                  <button type="button" data-assistant-example="Compare bronchiolitis and asthma management in infants, citing clinical references.">Bronchiolitis vs asthma</button>
                </div>
              </div>
            </div>

            <form id="assistant-form" class="assistant-composer">
              <label for="assistant-input">Clinical question</label>
              <textarea id="assistant-input" rows="3" placeholder="Ask a focused clinical question..." autocomplete="off" aria-describedby="assistant-context-budget assistant-context-warning"></textarea>
              <p id="assistant-context-budget" class="assistant-muted" aria-live="polite">Loading conversation limit; history and draft are counted in UTF-16 code units. The server validates each request.</p>
              <div id="assistant-context-warning" role="alert" hidden></div>
              <textarea id="assistant-handoff-text" hidden readonly></textarea>
              <div class="assistant-composer-footer">
                <label class="assistant-check"><input type="checkbox" id="assistant-include-context" checked> retrieve broader context</label>
                <button id="btn-assistant-cancel" class="btn-sm btn-ghost" type="button" hidden><i class="fas fa-stop"></i> Cancel search</button>
                <button id="btn-assistant-send" class="btn-generate" type="submit"><i class="fas fa-paper-plane"></i> Ask</button>
              </div>
            </form>
          </section>

          <aside class="assistant-side">
            <div class="card">
              <div class="card-header"><h3><i class="fas fa-wand-magic-sparkles"></i> Image / Graph</h3></div>
              <div class="assistant-side-body">
                <textarea id="assistant-image-prompt" rows="4" placeholder="Generate a teaching image, pathway, or infographic from the current answer..."></textarea>
                <div class="assistant-image-buttons">
                  <button id="btn-assistant-image" class="btn-sm btn-primary" type="button"><i class="fas fa-image"></i> Generate image</button>
                  <button id="btn-assistant-image-clear" class="btn-sm btn-ghost" type="button"><i class="fas fa-rotate-left"></i> Clear image</button>
                </div>
                <div id="assistant-visual-output" class="assistant-visual-output"></div>
              </div>
            </div>

            <div class="card">
              <div class="card-header"><h3><i class="fas fa-bookmark"></i> Saved Chats</h3></div>
              <div id="assistant-saved-chats" class="assistant-saved-chats">
                <p class="assistant-muted">Saved chats appear here after you click Save chat.</p>
              </div>
              <div id="assistant-save-panel" class="assistant-save-panel" hidden>
                <label for="assistant-save-title">Save chat as</label>
                <input id="assistant-save-title" type="text" maxlength="160" autocomplete="off">
                <div class="assistant-save-actions">
                  <button id="btn-assistant-save-confirm" class="btn-sm btn-primary" type="button">Save</button>
                  <button id="btn-assistant-save-cancel" class="btn-sm btn-ghost" type="button">Cancel</button>
                </div>
              </div>
            </div>

            <div class="card">
              <div class="card-header"><h3><i class="fas fa-quote-right"></i> Sources</h3></div>
              <div id="assistant-sources" class="assistant-sources">
                <p class="assistant-muted">Citations appear here after an answer.</p>
              </div>
            </div>
          </aside>
        </div>

        <!-- Clinical handoff dialog: uses the site's standard modal pattern. -->
        <div id="assistant-handoff-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="assistant-handoff-heading">
          <div class="modal-content">
            <div class="modal-header">
              <h2 id="assistant-handoff-heading">Clinical handoff</h2>
              <button id="btn-assistant-handoff-close" class="modal-close" type="button" aria-label="Close handoff"><i class="fas fa-xmark"></i></button>
            </div>
            <div class="modal-body">
              <div id="assistant-handoff-preview" class="assistant-bubble" role="region" aria-labelledby="assistant-handoff-heading"></div>
              <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap;">
                <button id="btn-assistant-copy-handoff" class="btn-sm btn-primary" type="button">Copy handoff</button>
                <button id="btn-assistant-handoff-done" class="btn-sm btn-ghost" type="button">Close</button>
              </div>
            </div>
          </div>
        </div>

<link rel="stylesheet" href="/css/assistant.css">