2857 lines
94 KiB
HTML
2857 lines
94 KiB
HTML
<div id="{{ panel_id }}" class="compose-shell">
|
|
<div class="is-flex is-justify-content-space-between is-align-items-center" style="gap: 0.5rem; flex-wrap: wrap;">
|
|
<div>
|
|
<p class="is-size-7 has-text-weight-semibold" style="margin-bottom: 0.2rem;">Manual Text Mode</p>
|
|
{% if recent_contacts %}
|
|
<div class="compose-contact-switch">
|
|
<div class="select is-small">
|
|
<select id="{{ panel_id }}-contact-select" class="compose-contact-select">
|
|
{% for option in recent_contacts %}
|
|
<option
|
|
value="{{ option.identifier }}"
|
|
data-service="{{ option.service }}"
|
|
data-identifier="{{ option.identifier }}"
|
|
data-person="{{ option.person_id }}"
|
|
data-page-url="{{ option.compose_url }}"
|
|
data-widget-url="{{ option.compose_widget_url }}"
|
|
{% if option.is_active %}selected{% endif %}>
|
|
{{ option.person_name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p class="is-size-6" style="margin-bottom: 0;">
|
|
{% if person %}
|
|
{{ person.name }}
|
|
{% else %}
|
|
{{ identifier }}
|
|
{% endif %}
|
|
</p>
|
|
{% endif %}
|
|
<p id="{{ panel_id }}-meta-line" class="is-size-7 compose-meta-line" style="margin-bottom: 0;">
|
|
{{ service|title }} · {{ identifier }}
|
|
</p>
|
|
{% if platform_options %}
|
|
<div class="compose-platform-switch">
|
|
<div class="select is-small">
|
|
<select id="{{ panel_id }}-platform-select" class="compose-platform-select">
|
|
{% for option in platform_options %}
|
|
<option
|
|
value="{{ option.service }}"
|
|
data-identifier="{{ option.identifier }}"
|
|
data-person="{{ option.person_id }}"
|
|
data-page-url="{{ option.page_url }}"
|
|
data-widget-url="{{ option.widget_url }}"
|
|
{% if option.is_active %}selected{% endif %}>
|
|
{{ option.service_label }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="buttons are-small compose-top-actions" style="margin: 0;">
|
|
<button type="button" class="button is-light is-rounded compose-history-sync-btn">
|
|
<span class="icon is-small"><i class="fa-solid fa-rotate-right"></i></span>
|
|
<span>Force Sync</span>
|
|
</button>
|
|
<button type="button" class="button is-light is-rounded js-ai-trigger" data-kind="drafts">
|
|
<span class="icon is-small"><i class="fa-solid fa-pen"></i></span>
|
|
<span>Drafts</span>
|
|
</button>
|
|
<button type="button" class="button is-light is-rounded js-ai-trigger" data-kind="summary">
|
|
<span class="icon is-small"><i class="fa-solid fa-list"></i></span>
|
|
<span>Summary</span>
|
|
</button>
|
|
<button type="button" class="button is-light is-rounded js-ai-trigger" data-kind="engage">
|
|
<span class="icon is-small"><i class="fa-solid fa-handshake"></i></span>
|
|
<span>Engage</span>
|
|
</button>
|
|
<button type="button" class="button is-light is-rounded js-ai-trigger" data-kind="quick_insights">
|
|
<span class="icon is-small"><i class="fa-solid fa-chart-line"></i></span>
|
|
<span>Quick Insights</span>
|
|
</button>
|
|
<a class="button is-light is-rounded" href="{{ ai_workspace_url }}">
|
|
<span class="icon is-small"><i class="{{ manual_icon_class }}"></i></span>
|
|
<span>AI Workspace</span>
|
|
</a>
|
|
{% if ai_workspace_widget_url %}
|
|
<button
|
|
type="button"
|
|
class="button is-light is-rounded is-small js-widget-spawn-trigger is-hidden"
|
|
data-widget-url="{{ ai_workspace_widget_url }}"
|
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
|
hx-get="{{ ai_workspace_widget_url }}"
|
|
hx-target="#widgets-here"
|
|
hx-swap="afterend"
|
|
title="Open AI Person widget here"
|
|
aria-label="Open AI Person widget here">
|
|
<span class="icon is-small"><i class="fa-solid fa-table-cells-large"></i></span>
|
|
<span>Widget</span>
|
|
</button>
|
|
{% endif %}
|
|
{% if render_mode == "page" %}
|
|
<a class="button is-light is-rounded" href="{{ compose_workspace_url }}">
|
|
<span class="icon is-small"><i class="fa-solid fa-table-cells-large"></i></span>
|
|
<span>Chat Workspace</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="{{ panel_id }}-status" class="compose-status">
|
|
{% include "partials/compose-send-status.html" %}
|
|
</div>
|
|
|
|
<div id="{{ panel_id }}-popover-backdrop" class="compose-ai-popover-backdrop is-hidden"></div>
|
|
<div id="{{ panel_id }}-popover" class="compose-ai-popover is-hidden">
|
|
<div class="compose-ai-card" data-kind="drafts">
|
|
<p class="compose-ai-title">Draft Suggestions</p>
|
|
<div class="compose-ai-loading">
|
|
<div class="compose-ai-skel"></div>
|
|
<div class="compose-ai-skel"></div>
|
|
<div class="compose-ai-skel"></div>
|
|
</div>
|
|
<div class="compose-ai-content"></div>
|
|
</div>
|
|
<div class="compose-ai-card" data-kind="summary">
|
|
<p class="compose-ai-title">Conversation Summary</p>
|
|
<div class="compose-ai-loading">
|
|
<div class="compose-ai-skel"></div>
|
|
<div class="compose-ai-skel"></div>
|
|
<div class="compose-ai-skel"></div>
|
|
</div>
|
|
<div class="compose-ai-content"></div>
|
|
</div>
|
|
<div class="compose-ai-card" data-kind="quick_insights">
|
|
<p class="compose-ai-title">Quick Insights</p>
|
|
<div class="compose-ai-loading">
|
|
<div class="compose-ai-skel"></div>
|
|
<div class="compose-ai-skel"></div>
|
|
<div class="compose-ai-skel"></div>
|
|
</div>
|
|
<div class="compose-ai-content"></div>
|
|
</div>
|
|
<div class="compose-ai-card" data-kind="engage">
|
|
<p class="compose-ai-title">Quick Engage (Shared Framing)</p>
|
|
<div class="compose-engage-source-row">
|
|
<div class="select is-small is-fullwidth">
|
|
<select class="engage-source-select">
|
|
<option value="auto">Auto</option>
|
|
</select>
|
|
</div>
|
|
<button type="button" class="button is-light is-small engage-refresh-btn">
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
<div class="field compose-engage-custom-wrap is-hidden">
|
|
<textarea
|
|
class="textarea is-small engage-custom-text"
|
|
rows="2"
|
|
placeholder="Write custom engagement text..."></textarea>
|
|
</div>
|
|
<div class="compose-ai-loading">
|
|
<div class="compose-ai-skel"></div>
|
|
<div class="compose-ai-skel"></div>
|
|
</div>
|
|
<div class="compose-ai-content"></div>
|
|
<div class="compose-ai-safety">
|
|
<label class="checkbox is-size-7">
|
|
<input type="checkbox" class="engage-confirm"> Confirm Send To Other Party
|
|
</label>
|
|
<button type="button" class="button is-link is-light is-small engage-send-btn" disabled>
|
|
Send Engage
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="{{ panel_id }}-lightbox" class="compose-lightbox is-hidden" aria-hidden="true">
|
|
<button
|
|
type="button"
|
|
id="{{ panel_id }}-lightbox-prev"
|
|
class="compose-lightbox-nav compose-lightbox-prev"
|
|
aria-label="Previous image">
|
|
<span class="icon is-small"><i class="fa-solid fa-chevron-left"></i></span>
|
|
</button>
|
|
<button type="button" class="compose-lightbox-close" aria-label="Close image preview">
|
|
<span class="icon is-small"><i class="fa-solid fa-xmark"></i></span>
|
|
</button>
|
|
<figure class="compose-lightbox-frame">
|
|
<img
|
|
id="{{ panel_id }}-lightbox-image"
|
|
class="compose-lightbox-image"
|
|
src=""
|
|
alt="Conversation attachment preview">
|
|
</figure>
|
|
<button
|
|
type="button"
|
|
id="{{ panel_id }}-lightbox-next"
|
|
class="compose-lightbox-nav compose-lightbox-next"
|
|
aria-label="Next image">
|
|
<span class="icon is-small"><i class="fa-solid fa-chevron-right"></i></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
id="{{ panel_id }}-glance"
|
|
class="compose-glance{% if not glance_items %} is-hidden{% endif %}">
|
|
{% for item in glance_items %}
|
|
{% if item.url %}
|
|
<a class="compose-glance-item" href="{{ item.url }}" title="{{ item.tooltip }}">
|
|
<span class="compose-glance-key">{{ item.label }}</span>
|
|
<span class="compose-glance-val">{{ item.value }}</span>
|
|
</a>
|
|
{% else %}
|
|
<span class="compose-glance-item" title="{{ item.tooltip }}">
|
|
<span class="compose-glance-key">{{ item.label }}</span>
|
|
<span class="compose-glance-val">{{ item.value }}</span>
|
|
</span>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div
|
|
id="{{ panel_id }}-thread"
|
|
class="compose-thread"
|
|
data-poll-url="{% url 'compose_thread' %}"
|
|
data-service="{{ service }}"
|
|
data-identifier="{{ identifier }}"
|
|
data-person="{% if person %}{{ person.id }}{% endif %}"
|
|
data-limit="{{ limit }}"
|
|
data-last-ts="{{ last_ts }}"
|
|
data-ws-url="{{ compose_ws_url }}"
|
|
data-drafts-url="{{ compose_drafts_url }}"
|
|
data-summary-url="{{ compose_summary_url }}"
|
|
data-quick-insights-url="{{ compose_quick_insights_url }}"
|
|
data-history-sync-url="{{ compose_history_sync_url }}"
|
|
data-engage-preview-url="{{ compose_engage_preview_url }}"
|
|
data-engage-send-url="{{ compose_engage_send_url }}">
|
|
{% for msg in serialized_messages %}
|
|
<div class="compose-row {% if msg.outgoing %}is-out{% else %}is-in{% endif %}" data-ts="{{ msg.ts }}">
|
|
{% if msg.gap_fragments %}
|
|
{% with gap=msg.gap_fragments.0 %}
|
|
<p
|
|
class="compose-latency-chip"
|
|
title="{{ gap.focus|default:'Response delay between turns.' }} · Latency {{ gap.lag|default:'-' }}{% if gap.calculation %} · How it is calculated: {{ gap.calculation }}{% endif %}{% if gap.psychology %} · Psychological interpretation: {{ gap.psychology }}{% endif %}">
|
|
<span class="icon is-small"><i class="fa-regular fa-clock"></i></span>
|
|
<span class="compose-latency-val">{{ gap.lag|default:"-" }}</span>
|
|
</p>
|
|
{% endwith %}
|
|
{% endif %}
|
|
<article class="compose-bubble {% if msg.outgoing %}is-out{% else %}is-in{% endif %}">
|
|
{% if msg.image_urls %}
|
|
{% for image_url in msg.image_urls %}
|
|
<figure class="compose-media">
|
|
<img
|
|
class="compose-image"
|
|
src="{{ image_url }}"
|
|
alt="Attachment"
|
|
referrerpolicy="no-referrer"
|
|
loading="lazy"
|
|
decoding="async">
|
|
</figure>
|
|
{% endfor %}
|
|
{% elif msg.image_url %}
|
|
<figure class="compose-media">
|
|
<img
|
|
class="compose-image"
|
|
src="{{ msg.image_url }}"
|
|
alt="Attachment"
|
|
referrerpolicy="no-referrer"
|
|
loading="lazy"
|
|
decoding="async">
|
|
</figure>
|
|
{% endif %}
|
|
{% if not msg.hide_text %}
|
|
<p class="compose-body">{{ msg.display_text|default:"(no text)" }}</p>
|
|
{% else %}
|
|
<p class="compose-body compose-image-fallback is-hidden">(no text)</p>
|
|
{% endif %}
|
|
<p class="compose-msg-meta">
|
|
{{ msg.display_ts }}{% if msg.author %} · {{ msg.author }}{% endif %}
|
|
</p>
|
|
</article>
|
|
</div>
|
|
{% empty %}
|
|
<div class="compose-empty-wrap">
|
|
<p class="compose-empty">No stored messages for this contact yet.</p>
|
|
<button type="button" class="button is-light is-small compose-history-sync-btn">
|
|
<span class="icon is-small"><i class="fa-solid fa-rotate-right"></i></span>
|
|
<span>Force History Sync</span>
|
|
</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<p id="{{ panel_id }}-typing" class="compose-typing is-hidden">
|
|
{% if person %}{{ person.name }}{% else %}Contact{% endif %} is typing...
|
|
</p>
|
|
|
|
<form
|
|
id="{{ panel_id }}-form"
|
|
class="compose-form"
|
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
|
hx-post="{% url 'compose_send' %}"
|
|
hx-target="#{{ panel_id }}-status"
|
|
hx-swap="innerHTML">
|
|
<input id="{{ panel_id }}-input-service" type="hidden" name="service" value="{{ service }}">
|
|
<input id="{{ panel_id }}-input-identifier" type="hidden" name="identifier" value="{{ identifier }}">
|
|
<input id="{{ panel_id }}-input-person" type="hidden" name="person" value="{% if person %}{{ person.id }}{% endif %}">
|
|
<input type="hidden" name="render_mode" value="{{ render_mode }}">
|
|
<input type="hidden" name="limit" value="{{ limit }}">
|
|
<input type="hidden" name="panel_id" value="{{ panel_id }}">
|
|
<input type="hidden" name="failsafe_arm" value="0">
|
|
<input type="hidden" name="failsafe_confirm" value="0">
|
|
<div class="compose-send-safety">
|
|
<label class="checkbox is-size-7">
|
|
<input type="checkbox" class="manual-confirm"> Confirm Send
|
|
</label>
|
|
</div>
|
|
<div class="compose-composer-capsule">
|
|
<textarea
|
|
id="{{ panel_id }}-textarea"
|
|
class="compose-textarea"
|
|
name="text"
|
|
rows="1"
|
|
placeholder="Type a message. Enter to send, Shift+Enter for newline."></textarea>
|
|
<button class="button is-link is-light compose-send-btn" type="submit" disabled>
|
|
<span class="icon is-small"><i class="{{ manual_icon_class }}"></i></span>
|
|
<span>Send</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<style>
|
|
#{{ panel_id }}.compose-shell {
|
|
position: relative;
|
|
overflow: visible;
|
|
border: 1px solid rgba(0, 0, 0, 0.16);
|
|
border-radius: 8px;
|
|
box-shadow: none;
|
|
padding: 0.7rem;
|
|
background: #fff;
|
|
}
|
|
#{{ panel_id }} .compose-thread {
|
|
margin-top: 0.55rem;
|
|
margin-bottom: 0.55rem;
|
|
min-height: 16rem;
|
|
max-height: 62vh;
|
|
overflow-y: auto;
|
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
|
border-radius: 8px;
|
|
padding: 0.65rem;
|
|
background: linear-gradient(180deg, rgba(248, 250, 252, 0.7), rgba(255, 255, 255, 0.98));
|
|
}
|
|
#{{ panel_id }} .compose-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.3rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
#{{ panel_id }} .compose-row.is-in {
|
|
align-items: flex-start;
|
|
}
|
|
#{{ panel_id }} .compose-row.is-out {
|
|
align-items: flex-end;
|
|
}
|
|
#{{ panel_id }} .compose-row.is-group-middle,
|
|
#{{ panel_id }} .compose-row.is-group-first {
|
|
margin-bottom: 0.16rem;
|
|
}
|
|
#{{ panel_id }} .compose-row.is-group-middle .compose-msg-meta,
|
|
#{{ panel_id }} .compose-row.is-group-first .compose-msg-meta {
|
|
display: none;
|
|
}
|
|
#{{ panel_id }} .compose-row.is-group-first .compose-bubble.is-in {
|
|
border-bottom-left-radius: 5px;
|
|
}
|
|
#{{ panel_id }} .compose-row.is-group-middle .compose-bubble.is-in {
|
|
border-radius: 5px 8px 8px 5px;
|
|
}
|
|
#{{ panel_id }} .compose-row.is-group-last .compose-bubble.is-in {
|
|
border-top-left-radius: 5px;
|
|
}
|
|
#{{ panel_id }} .compose-row.is-group-first .compose-bubble.is-out {
|
|
border-bottom-right-radius: 5px;
|
|
}
|
|
#{{ panel_id }} .compose-row.is-group-middle .compose-bubble.is-out {
|
|
border-radius: 8px 5px 5px 8px;
|
|
}
|
|
#{{ panel_id }} .compose-row.is-group-last .compose-bubble.is-out {
|
|
border-top-right-radius: 5px;
|
|
}
|
|
#{{ panel_id }} .compose-latency-chip {
|
|
align-self: center;
|
|
margin: 0;
|
|
padding: 0.02rem 0.28rem;
|
|
border-radius: 999px;
|
|
color: #6b7787;
|
|
font-size: 0.61rem;
|
|
line-height: 1.1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.2rem;
|
|
background: rgba(247, 249, 252, 0.88);
|
|
border: 1px solid rgba(103, 121, 145, 0.16);
|
|
}
|
|
#{{ panel_id }} .compose-latency-val {
|
|
font-weight: 600;
|
|
color: #58667a;
|
|
}
|
|
#{{ panel_id }} .compose-latency-chip::before,
|
|
#{{ panel_id }} .compose-latency-chip::after {
|
|
content: "";
|
|
width: 0.95rem;
|
|
height: 1px;
|
|
background: rgba(101, 119, 141, 0.28);
|
|
}
|
|
#{{ panel_id }} .compose-bubble {
|
|
max-width: min(85%, 46rem);
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(0, 0, 0, 0.13);
|
|
padding: 0.52rem 0.62rem;
|
|
box-shadow: none;
|
|
}
|
|
#{{ panel_id }} .compose-bubble.is-in {
|
|
background: rgba(255, 255, 255, 0.96);
|
|
}
|
|
#{{ panel_id }} .compose-bubble.is-out {
|
|
background: #eef6ff;
|
|
}
|
|
#{{ panel_id }} .compose-media {
|
|
margin: 0 0 0.28rem 0;
|
|
}
|
|
#{{ panel_id }} .compose-image {
|
|
display: block;
|
|
max-width: min(100%, 22rem);
|
|
max-height: 18rem;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(0, 0, 0, 0.14);
|
|
object-fit: cover;
|
|
background: #f8f8f8;
|
|
cursor: zoom-in;
|
|
transition: filter 120ms ease;
|
|
}
|
|
#{{ panel_id }} .compose-image:hover {
|
|
filter: brightness(0.97);
|
|
}
|
|
#{{ panel_id }}-lightbox.compose-lightbox {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 12050;
|
|
background: rgba(10, 12, 16, 0.82);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
}
|
|
#{{ panel_id }}-lightbox.compose-lightbox.is-hidden {
|
|
display: none;
|
|
}
|
|
#{{ panel_id }}-lightbox .compose-lightbox-frame {
|
|
margin: 0;
|
|
max-width: min(96vw, 70rem);
|
|
max-height: 88vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
#{{ panel_id }}-lightbox .compose-lightbox-image {
|
|
display: block;
|
|
max-width: min(96vw, 70rem);
|
|
max-height: 88vh;
|
|
width: auto;
|
|
height: auto;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
|
|
object-fit: contain;
|
|
background: #111;
|
|
}
|
|
#{{ panel_id }}-lightbox .compose-lightbox-close {
|
|
position: absolute;
|
|
top: 0.8rem;
|
|
right: 0.8rem;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
|
background: rgba(10, 12, 16, 0.62);
|
|
color: #fff;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
#{{ panel_id }}-lightbox .compose-lightbox-nav {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 2;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
|
background: rgba(10, 12, 16, 0.62);
|
|
color: #fff;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: opacity 120ms ease-out;
|
|
}
|
|
#{{ panel_id }}-lightbox .compose-lightbox-prev {
|
|
left: 0.8rem;
|
|
}
|
|
#{{ panel_id }}-lightbox .compose-lightbox-next {
|
|
right: 0.8rem;
|
|
}
|
|
#{{ panel_id }}-lightbox .compose-lightbox-nav:disabled {
|
|
opacity: 0.3;
|
|
cursor: default;
|
|
}
|
|
#{{ panel_id }} .compose-body {
|
|
margin: 0 0 0.2rem 0;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
#{{ panel_id }} .compose-msg-meta,
|
|
#{{ panel_id }} .compose-meta-line {
|
|
color: #616161;
|
|
font-size: 0.72rem;
|
|
}
|
|
#{{ panel_id }} .compose-msg-meta {
|
|
margin: 0;
|
|
}
|
|
#{{ panel_id }} .compose-platform-switch {
|
|
margin-top: 0.32rem;
|
|
}
|
|
#{{ panel_id }} .compose-contact-switch {
|
|
margin-bottom: 0.08rem;
|
|
}
|
|
#{{ panel_id }} .compose-contact-select {
|
|
min-width: 15rem;
|
|
max-width: min(80vw, 30rem);
|
|
}
|
|
#{{ panel_id }} .compose-platform-select {
|
|
min-width: 11rem;
|
|
}
|
|
#{{ panel_id }} .compose-gap-artifacts {
|
|
align-self: center;
|
|
width: min(92%, 34rem);
|
|
}
|
|
#{{ panel_id }} .compose-metric-artifacts {
|
|
width: min(86%, 46rem);
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(9.4rem, 1fr));
|
|
gap: 0.28rem;
|
|
}
|
|
#{{ panel_id }} .compose-artifact {
|
|
border: 1px dashed rgba(0, 0, 0, 0.16);
|
|
border-radius: 8px;
|
|
background: rgba(252, 253, 255, 0.96);
|
|
padding: 0.28rem 0.38rem;
|
|
}
|
|
#{{ panel_id }} .compose-artifact.compose-artifact-gap {
|
|
margin-bottom: 0.2rem;
|
|
padding: 0.18rem 0.3rem;
|
|
}
|
|
#{{ panel_id }} .compose-gap-line {
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.28rem;
|
|
font-size: 0.62rem;
|
|
line-height: 1.1;
|
|
color: #4d5b70;
|
|
}
|
|
#{{ panel_id }} .compose-gap-lag,
|
|
#{{ panel_id }} .compose-gap-score {
|
|
white-space: nowrap;
|
|
font-weight: 600;
|
|
}
|
|
#{{ panel_id }} .compose-gap-track {
|
|
flex: 1 1 auto;
|
|
min-width: 2.8rem;
|
|
height: 2px;
|
|
border-radius: 999px;
|
|
background: rgba(83, 103, 130, 0.23);
|
|
overflow: hidden;
|
|
}
|
|
#{{ panel_id }} .compose-gap-fill {
|
|
display: block;
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
background: linear-gradient(90deg, rgba(80, 128, 196, 0.95), rgba(31, 95, 176, 0.95));
|
|
}
|
|
#{{ panel_id }} .compose-artifact-head {
|
|
margin: 0;
|
|
display: flex;
|
|
gap: 0.3rem;
|
|
align-items: center;
|
|
color: #3f4f67;
|
|
font-size: 0.68rem;
|
|
line-height: 1.25;
|
|
}
|
|
#{{ panel_id }} .compose-artifact-head .icon {
|
|
color: #6a88b4;
|
|
}
|
|
#{{ panel_id }} .compose-artifact-score {
|
|
margin-left: auto;
|
|
color: #2f4f7a;
|
|
font-weight: 700;
|
|
font-size: 0.66rem;
|
|
}
|
|
#{{ panel_id }} .compose-artifact-detail {
|
|
margin: 0.15rem 0 0;
|
|
color: #637185;
|
|
font-size: 0.64rem;
|
|
line-height: 1.25;
|
|
}
|
|
#{{ panel_id }} .compose-empty {
|
|
margin: 0;
|
|
color: #6f6f6f;
|
|
font-size: 0.78rem;
|
|
}
|
|
#{{ panel_id }} .compose-empty-wrap {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
#{{ panel_id }} .compose-history-sync-btn.is-loading {
|
|
pointer-events: none;
|
|
opacity: 0.7;
|
|
}
|
|
#{{ panel_id }} .compose-typing {
|
|
margin: 0 0 0.5rem 0.2rem;
|
|
font-size: 0.78rem;
|
|
color: #4e6381;
|
|
min-height: 1rem;
|
|
}
|
|
#{{ panel_id }} .compose-typing.is-hidden {
|
|
visibility: hidden;
|
|
}
|
|
#{{ panel_id }} .compose-composer-capsule {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 0.45rem;
|
|
border: 1px solid rgba(0, 0, 0, 0.16);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
padding: 0.35rem;
|
|
}
|
|
#{{ panel_id }} .compose-textarea {
|
|
flex: 1 1 auto;
|
|
min-height: 2.45rem;
|
|
max-height: 8rem;
|
|
resize: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
outline: none;
|
|
background: transparent;
|
|
line-height: 1.35;
|
|
font-size: 0.98rem;
|
|
padding: 0.45rem 0.5rem;
|
|
}
|
|
#{{ panel_id }} .compose-send-btn {
|
|
height: 2.45rem;
|
|
border-radius: 8px;
|
|
margin: 0;
|
|
}
|
|
#{{ panel_id }} .compose-send-btn[disabled] {
|
|
opacity: 0.55;
|
|
}
|
|
#{{ panel_id }} .compose-send-safety {
|
|
display: flex;
|
|
gap: 0.85rem;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 0.45rem;
|
|
color: #505050;
|
|
}
|
|
#{{ panel_id }} .compose-status {
|
|
margin-top: 0.55rem;
|
|
min-height: 1.1rem;
|
|
}
|
|
#{{ panel_id }} .compose-glance {
|
|
margin-top: 0.2rem;
|
|
margin-bottom: 0.45rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.28rem;
|
|
}
|
|
#{{ panel_id }} .compose-glance.is-hidden {
|
|
display: none;
|
|
}
|
|
#{{ panel_id }} .compose-glance-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
max-width: 100%;
|
|
border: 1px solid rgba(0, 0, 0, 0.14);
|
|
border-radius: 999px;
|
|
padding: 0.12rem 0.45rem;
|
|
background: rgba(250, 252, 255, 0.95);
|
|
font-size: 0.64rem;
|
|
line-height: 1.2;
|
|
min-width: 0;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
#{{ panel_id }} a.compose-glance-item:hover {
|
|
border-color: rgba(35, 84, 175, 0.45);
|
|
background: rgba(234, 243, 255, 0.96);
|
|
}
|
|
#{{ panel_id }} .compose-glance-key {
|
|
color: #5b6a7c;
|
|
white-space: nowrap;
|
|
}
|
|
#{{ panel_id }} .compose-glance-val {
|
|
color: #26384f;
|
|
font-weight: 700;
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
#{{ panel_id }} .compose-status-line {
|
|
margin: 0;
|
|
font-size: 0.76rem;
|
|
color: #5f6a7a;
|
|
}
|
|
#{{ panel_id }} .compose-status-line.is-warning,
|
|
#{{ panel_id }} .compose-status-line.is-danger {
|
|
color: #c0392b;
|
|
}
|
|
#{{ panel_id }} .compose-status-line.is-success {
|
|
color: #2f855a;
|
|
}
|
|
#{{ panel_id }} .compose-ai-popover {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: min(40rem, calc(100% - 1rem));
|
|
margin-top: 0;
|
|
z-index: 35;
|
|
overflow: visible;
|
|
}
|
|
#{{ panel_id }} .compose-ai-popover-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 8px;
|
|
background: radial-gradient(circle at 100% 0%, rgba(238, 245, 255, 0.42), rgba(255, 255, 255, 0.15) 42%, rgba(255, 255, 255, 0));
|
|
z-index: 34;
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
transition: opacity 140ms ease-out;
|
|
}
|
|
#{{ panel_id }} .compose-ai-popover-backdrop.is-hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
#{{ panel_id }} .compose-ai-popover.is-hidden {
|
|
display: none;
|
|
}
|
|
#{{ panel_id }} .compose-ai-card {
|
|
display: none;
|
|
border: 1px solid rgba(0, 0, 0, 0.16);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
padding: 0.65rem;
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
|
|
overflow: visible;
|
|
}
|
|
#{{ panel_id }} .compose-ai-card.is-active {
|
|
display: block;
|
|
animation: composeFadeIn 180ms ease-out;
|
|
}
|
|
#{{ panel_id }} .compose-ai-title {
|
|
font-weight: 600;
|
|
margin-bottom: 0.45rem;
|
|
}
|
|
#{{ panel_id }} .compose-ai-loading.is-hidden {
|
|
display: none;
|
|
}
|
|
#{{ panel_id }} .compose-ai-skel {
|
|
height: 0.7rem;
|
|
border-radius: 999px;
|
|
margin-bottom: 0.4rem;
|
|
background: linear-gradient(90deg, rgba(233, 236, 239, 0.8), rgba(210, 214, 218, 0.95), rgba(233, 236, 239, 0.8));
|
|
background-size: 200% 100%;
|
|
animation: composePulse 1s ease-in-out infinite;
|
|
}
|
|
#{{ panel_id }} .compose-ai-skel:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
#{{ panel_id }} .compose-ai-content {
|
|
white-space: pre-wrap;
|
|
}
|
|
#{{ panel_id }} .compose-draft-option {
|
|
width: 100%;
|
|
text-align: left;
|
|
margin-bottom: 0.45rem;
|
|
border-radius: 8px;
|
|
white-space: normal;
|
|
height: auto;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
line-height: 1.35;
|
|
padding: 0.58rem 0.62rem;
|
|
}
|
|
#{{ panel_id }} .compose-draft-tone {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 0 0 0.28rem 0;
|
|
color: #6e7782;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01em;
|
|
line-height: 1.2;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
#{{ panel_id }} .compose-draft-text {
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
#{{ panel_id }} .compose-draft-option:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
#{{ panel_id }} .buttons {
|
|
overflow: visible;
|
|
}
|
|
#{{ panel_id }} .compose-top-actions {
|
|
align-items: stretch;
|
|
gap: 0.35rem;
|
|
}
|
|
#{{ panel_id }} .compose-top-actions .button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 2.55rem;
|
|
}
|
|
#{{ panel_id }} .compose-top-actions .button > span:last-child {
|
|
white-space: normal;
|
|
line-height: 1.15;
|
|
text-align: center;
|
|
}
|
|
#{{ panel_id }} .js-ai-trigger {
|
|
position: relative;
|
|
overflow: visible;
|
|
background: #eef6ff;
|
|
border-color: #8bb2e6;
|
|
}
|
|
#{{ panel_id }} .js-ai-trigger.is-expanded {
|
|
font-weight: 600;
|
|
}
|
|
#{{ panel_id }} .js-ai-trigger.is-expanded::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -0.34rem;
|
|
width: 0;
|
|
height: 0;
|
|
transform: translateX(-50%);
|
|
border-left: 6px solid transparent;
|
|
border-right: 6px solid transparent;
|
|
border-top: 6px solid #8bb2e6;
|
|
pointer-events: none;
|
|
}
|
|
#{{ panel_id }} .compose-qi-head {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.32rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
#{{ panel_id }} .compose-qi-chip {
|
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
|
border-radius: 8px;
|
|
padding: 0.35rem 0.42rem;
|
|
background: #fff;
|
|
min-width: 0;
|
|
}
|
|
#{{ panel_id }} .compose-qi-chip p {
|
|
margin: 0;
|
|
line-height: 1.25;
|
|
}
|
|
#{{ panel_id }} .compose-qi-chip .k {
|
|
color: #657283;
|
|
font-size: 0.67rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
#{{ panel_id }} .compose-qi-chip .v {
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
min-width: 0;
|
|
gap: 0.28rem;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
#{{ panel_id }} .compose-qi-chip .v > span:last-child {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-all;
|
|
}
|
|
#{{ panel_id }} .compose-qi-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.36rem;
|
|
}
|
|
#{{ panel_id }} .compose-qi-row {
|
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
padding: 0.42rem 0.46rem;
|
|
height: 100%;
|
|
}
|
|
#{{ panel_id }} .compose-qi-row-head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.2rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
#{{ panel_id }} .compose-qi-row-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.32rem;
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
font-size: 0.74rem;
|
|
font-weight: 600;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
#{{ panel_id }} .compose-qi-doc-dot {
|
|
width: 0.64rem;
|
|
height: 0.64rem;
|
|
min-width: 0.64rem;
|
|
border-radius: 50%;
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: #7a94b4;
|
|
cursor: help;
|
|
opacity: 0.85;
|
|
transform: translateY(0.02rem);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
#{{ panel_id }} .compose-qi-doc-dot::after {
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(100% + 0.42rem);
|
|
transform: translate(-50%, 0.18rem);
|
|
width: min(21rem, 75vw);
|
|
max-width: 21rem;
|
|
padding: 0.42rem 0.5rem;
|
|
border-radius: 7px;
|
|
background: rgba(31, 39, 53, 0.96);
|
|
color: #f5f8ff;
|
|
font-size: 0.67rem;
|
|
line-height: 1.3;
|
|
text-align: left;
|
|
white-space: normal;
|
|
box-shadow: 0 8px 22px rgba(7, 10, 17, 0.28);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
transition: opacity 85ms ease, transform 85ms ease, visibility 85ms linear;
|
|
transition-delay: 30ms;
|
|
}
|
|
#{{ panel_id }} .compose-qi-doc-dot::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(100% + 0.1rem);
|
|
transform: translateX(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 0.3rem solid transparent;
|
|
border-right: 0.3rem solid transparent;
|
|
border-top: 0.36rem solid rgba(31, 39, 53, 0.96);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
transition: opacity 85ms ease, visibility 85ms linear;
|
|
transition-delay: 30ms;
|
|
}
|
|
#{{ panel_id }} .compose-qi-doc-dot:hover,
|
|
#{{ panel_id }} .compose-qi-doc-dot:focus-visible {
|
|
background: #9ab1cc;
|
|
opacity: 1;
|
|
outline: 1px solid rgba(52, 101, 164, 0.45);
|
|
outline-offset: 1px;
|
|
}
|
|
#{{ panel_id }} .compose-qi-doc-dot:hover::after,
|
|
#{{ panel_id }} .compose-qi-doc-dot:focus-visible::after,
|
|
#{{ panel_id }} .compose-qi-doc-dot:hover::before,
|
|
#{{ panel_id }} .compose-qi-doc-dot:focus-visible::before {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translate(-50%, 0);
|
|
transition-delay: 0ms;
|
|
}
|
|
#{{ panel_id }} .compose-qi-row-meta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.44rem;
|
|
font-size: 0.68rem;
|
|
color: #657283;
|
|
flex: 1 1 100%;
|
|
min-width: 0;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
row-gap: 0.14rem;
|
|
}
|
|
#{{ panel_id }} .compose-qi-row-meta > span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.16rem;
|
|
min-width: 0;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
#{{ panel_id }} .compose-qi-row-body {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
#{{ panel_id }} .compose-qi-value {
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
color: #202835;
|
|
}
|
|
#{{ panel_id }} .compose-qi-docs {
|
|
margin: 0.5rem 0 0;
|
|
padding-left: 1.1rem;
|
|
color: #657283;
|
|
font-size: 0.71rem;
|
|
}
|
|
#{{ panel_id }} .compose-qi-docs li {
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
#{{ panel_id }} .compose-image-fallback.is-hidden {
|
|
display: none;
|
|
}
|
|
#{{ panel_id }}.is-send-success .compose-composer-capsule {
|
|
animation: composeSendFlash 360ms ease-out;
|
|
}
|
|
#{{ panel_id }}.is-send-fail .compose-composer-capsule {
|
|
animation: composeSendShake 330ms ease-out;
|
|
border-color: rgba(192, 57, 43, 0.7);
|
|
}
|
|
#{{ panel_id }} .compose-ai-safety {
|
|
margin-top: 0.55rem;
|
|
display: flex;
|
|
gap: 0.65rem;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
#{{ panel_id }} .compose-engage-source-row {
|
|
display: flex;
|
|
gap: 0.45rem;
|
|
margin-bottom: 0.45rem;
|
|
align-items: center;
|
|
}
|
|
#{{ panel_id }} .compose-engage-source-row .select {
|
|
flex: 1 1 auto;
|
|
}
|
|
#{{ panel_id }} .compose-engage-custom-wrap {
|
|
margin-bottom: 0.45rem;
|
|
}
|
|
@keyframes composePulse {
|
|
0% { background-position: 100% 0; }
|
|
100% { background-position: 0 0; }
|
|
}
|
|
@keyframes composeFadeIn {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes composeSendFlash {
|
|
0% { box-shadow: 0 0 0 0 rgba(60, 132, 218, 0); }
|
|
25% { box-shadow: 0 0 0 3px rgba(60, 132, 218, 0.25); }
|
|
100% { box-shadow: 0 0 0 0 rgba(60, 132, 218, 0); }
|
|
}
|
|
@keyframes composeSendShake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-2px); }
|
|
50% { transform: translateX(2px); }
|
|
75% { transform: translateX(-1px); }
|
|
}
|
|
@media (max-width: 768px) {
|
|
#{{ panel_id }} .compose-thread {
|
|
max-height: 52vh;
|
|
}
|
|
#{{ panel_id }} .compose-send-btn span:last-child {
|
|
display: none;
|
|
}
|
|
#{{ panel_id }} .compose-ai-popover {
|
|
width: calc(100% - 1rem);
|
|
}
|
|
#{{ panel_id }} .compose-qi-row-label {
|
|
width: 100%;
|
|
}
|
|
#{{ panel_id }} .compose-qi-row-meta {
|
|
font-size: 0.64rem;
|
|
gap: 0.3rem;
|
|
}
|
|
#{{ panel_id }} .compose-qi-list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
#{{ panel_id }} .compose-top-actions .button {
|
|
min-height: 2.75rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function () {
|
|
const panelId = "{{ panel_id }}";
|
|
const panel = document.getElementById(panelId);
|
|
if (!panel) {
|
|
return;
|
|
}
|
|
const thread = document.getElementById(panelId + "-thread");
|
|
const form = document.getElementById(panelId + "-form");
|
|
const textarea = document.getElementById(panelId + "-textarea");
|
|
const platformSelect = document.getElementById(panelId + "-platform-select");
|
|
const contactSelect = document.getElementById(panelId + "-contact-select");
|
|
const metaLine = document.getElementById(panelId + "-meta-line");
|
|
const hiddenService = document.getElementById(panelId + "-input-service");
|
|
const hiddenIdentifier = document.getElementById(panelId + "-input-identifier");
|
|
const hiddenPerson = document.getElementById(panelId + "-input-person");
|
|
const renderMode = "{{ render_mode }}";
|
|
if (!thread || !form || !textarea) {
|
|
return;
|
|
}
|
|
|
|
const statusBox = document.getElementById(panelId + "-status");
|
|
const typingNode = document.getElementById(panelId + "-typing");
|
|
const glanceNode = document.getElementById(panelId + "-glance");
|
|
const popover = document.getElementById(panelId + "-popover");
|
|
const popoverBackdrop = document.getElementById(panelId + "-popover-backdrop");
|
|
const lightbox = document.getElementById(panelId + "-lightbox");
|
|
const lightboxImage = document.getElementById(panelId + "-lightbox-image");
|
|
const lightboxPrev = document.getElementById(panelId + "-lightbox-prev");
|
|
const lightboxNext = document.getElementById(panelId + "-lightbox-next");
|
|
const csrfToken = "{{ csrf_token }}";
|
|
if (lightbox && lightbox.parentElement !== document.body) {
|
|
document.body.appendChild(lightbox);
|
|
}
|
|
|
|
window.giaComposePanels = window.giaComposePanels || {};
|
|
const previousState = window.giaComposePanels[panelId];
|
|
if (previousState && previousState.timer) {
|
|
clearInterval(previousState.timer);
|
|
}
|
|
if (previousState && previousState.eventHandler) {
|
|
document.body.removeEventListener("composeMessageSent", previousState.eventHandler);
|
|
}
|
|
if (previousState && previousState.sendResultHandler) {
|
|
document.body.removeEventListener("composeSendResult", previousState.sendResultHandler);
|
|
}
|
|
if (previousState && previousState.docClickHandler) {
|
|
document.removeEventListener("mousedown", previousState.docClickHandler);
|
|
}
|
|
if (previousState && previousState.resizeHandler) {
|
|
window.removeEventListener("resize", previousState.resizeHandler);
|
|
}
|
|
if (previousState && previousState.lightboxKeyHandler) {
|
|
document.removeEventListener("keydown", previousState.lightboxKeyHandler);
|
|
}
|
|
const panelState = {
|
|
timer: null,
|
|
polling: false,
|
|
socket: null,
|
|
websocketReady: false,
|
|
activePanel: null,
|
|
engageToken: "",
|
|
lightboxKeyHandler: null,
|
|
lightboxImages: [],
|
|
lightboxIndex: -1,
|
|
};
|
|
window.giaComposePanels[panelId] = panelState;
|
|
const triggerButtons = Array.from(panel.querySelectorAll(".js-ai-trigger"));
|
|
|
|
const positionPopover = function (kind) {
|
|
if (!popover || popover.classList.contains("is-hidden")) {
|
|
return;
|
|
}
|
|
const panelRect = panel.getBoundingClientRect();
|
|
const statusRect = statusBox ? statusBox.getBoundingClientRect() : null;
|
|
const trigger = triggerButtons.find(function (button) {
|
|
return button.dataset.kind === kind;
|
|
}) || triggerButtons[0] || null;
|
|
const triggerRect = trigger ? trigger.getBoundingClientRect() : null;
|
|
const anchorBottom = Math.max(
|
|
statusRect ? statusRect.bottom : panelRect.top,
|
|
triggerRect ? triggerRect.bottom : panelRect.top
|
|
);
|
|
const top = Math.max(8, Math.round(anchorBottom - panelRect.top + 8));
|
|
const maxWidth = Math.max(260, Math.round(panelRect.width - 16));
|
|
const width = Math.min(maxWidth, 640);
|
|
let left = 8;
|
|
if (triggerRect) {
|
|
const triggerCenter = (triggerRect.left + (triggerRect.width / 2)) - panelRect.left;
|
|
left = Math.round(triggerCenter - (width / 2));
|
|
}
|
|
left = Math.max(8, Math.min(left, Math.round(panelRect.width - width - 8)));
|
|
const maxHeight = Math.max(140, Math.round(panelRect.height - top - 8));
|
|
popover.style.top = String(top) + "px";
|
|
popover.style.left = String(left) + "px";
|
|
popover.style.width = String(width) + "px";
|
|
popover.style.maxHeight = String(maxHeight) + "px";
|
|
};
|
|
|
|
const toInt = function (value) {
|
|
const parsed = parseInt(value || "0", 10);
|
|
return Number.isFinite(parsed) ? parsed : 0;
|
|
};
|
|
|
|
const minuteBucketFromTs = function (tsValue) {
|
|
const ts = toInt(tsValue);
|
|
if (!ts) {
|
|
return "";
|
|
}
|
|
return String(Math.floor(ts / 60000));
|
|
};
|
|
const collectLightboxImages = function () {
|
|
return Array.from(thread.querySelectorAll(".compose-image"));
|
|
};
|
|
const syncLightboxNav = function () {
|
|
const total = panelState.lightboxImages.length;
|
|
const index = panelState.lightboxIndex;
|
|
if (lightboxPrev) {
|
|
lightboxPrev.disabled = total < 2 || index <= 0;
|
|
}
|
|
if (lightboxNext) {
|
|
lightboxNext.disabled = total < 2 || index >= (total - 1);
|
|
}
|
|
};
|
|
const openLightboxAt = function (index) {
|
|
if (!lightbox || !lightboxImage) {
|
|
return;
|
|
}
|
|
const images = collectLightboxImages();
|
|
if (!images.length) {
|
|
return;
|
|
}
|
|
const safeIndex = Math.max(0, Math.min(Number(index) || 0, images.length - 1));
|
|
const imageNode = images[safeIndex];
|
|
const source = String(imageNode.currentSrc || imageNode.src || "").trim();
|
|
if (!source) {
|
|
return;
|
|
}
|
|
panelState.lightboxImages = images;
|
|
panelState.lightboxIndex = safeIndex;
|
|
lightboxImage.src = source;
|
|
lightbox.classList.remove("is-hidden");
|
|
lightbox.setAttribute("aria-hidden", "false");
|
|
syncLightboxNav();
|
|
};
|
|
const openLightboxFromElement = function (imageNode) {
|
|
const images = collectLightboxImages();
|
|
if (!images.length) {
|
|
return;
|
|
}
|
|
const idx = images.indexOf(imageNode);
|
|
openLightboxAt(idx >= 0 ? idx : 0);
|
|
};
|
|
const stepLightbox = function (delta) {
|
|
if (!lightbox || lightbox.classList.contains("is-hidden")) {
|
|
return;
|
|
}
|
|
if (!panelState.lightboxImages.length) {
|
|
panelState.lightboxImages = collectLightboxImages();
|
|
}
|
|
if (!panelState.lightboxImages.length) {
|
|
return;
|
|
}
|
|
openLightboxAt(panelState.lightboxIndex + delta);
|
|
};
|
|
const closeLightbox = function () {
|
|
if (!lightbox) {
|
|
return;
|
|
}
|
|
lightbox.classList.add("is-hidden");
|
|
lightbox.setAttribute("aria-hidden", "true");
|
|
if (lightboxImage) {
|
|
lightboxImage.removeAttribute("src");
|
|
}
|
|
panelState.lightboxImages = [];
|
|
panelState.lightboxIndex = -1;
|
|
syncLightboxNav();
|
|
};
|
|
const openLightbox = function (srcValue) {
|
|
const source = String(srcValue || "").trim();
|
|
if (!source) {
|
|
return;
|
|
}
|
|
const images = collectLightboxImages();
|
|
const idx = images.findIndex(function (img) {
|
|
return String(img.currentSrc || img.src || "").trim() === source;
|
|
});
|
|
openLightboxAt(idx >= 0 ? idx : 0);
|
|
};
|
|
|
|
let lastTs = toInt(thread.dataset.lastTs);
|
|
let glanceState = {
|
|
gap: null,
|
|
metrics: [],
|
|
};
|
|
const insightUrlForMetric = function (metricSlug) {
|
|
const slug = String(metricSlug || "").trim();
|
|
const personId = String(thread.dataset.person || "").trim();
|
|
if (!personId || !slug) {
|
|
return "";
|
|
}
|
|
return (
|
|
"/ai/workspace/page/person/"
|
|
+ encodeURIComponent(personId)
|
|
+ "/insights/"
|
|
+ encodeURIComponent(slug)
|
|
+ "/"
|
|
);
|
|
};
|
|
|
|
const autosize = function () {
|
|
textarea.style.height = "auto";
|
|
const targetHeight = Math.min(Math.max(textarea.scrollHeight, 40), 128);
|
|
textarea.style.height = targetHeight + "px";
|
|
};
|
|
textarea.addEventListener("input", autosize);
|
|
autosize();
|
|
|
|
const nearBottom = function () {
|
|
return thread.scrollHeight - thread.scrollTop - thread.clientHeight < 100;
|
|
};
|
|
|
|
const scrollToBottom = function (force) {
|
|
if (force || nearBottom()) {
|
|
thread.scrollTop = thread.scrollHeight;
|
|
}
|
|
};
|
|
|
|
const bindHistorySyncButtons = function (rootNode) {
|
|
const scope = rootNode || panel;
|
|
if (!scope) {
|
|
return;
|
|
}
|
|
scope.querySelectorAll(".compose-history-sync-btn").forEach(function (button) {
|
|
if (button.dataset.bound === "1") {
|
|
return;
|
|
}
|
|
button.dataset.bound = "1";
|
|
button.addEventListener("click", async function () {
|
|
const historySyncUrl = String(thread.dataset.historySyncUrl || "").trim();
|
|
if (!historySyncUrl) {
|
|
setStatus("History sync endpoint is unavailable.", "warning");
|
|
return;
|
|
}
|
|
button.classList.add("is-loading");
|
|
setStatus("Requesting history sync…", "info");
|
|
try {
|
|
const payload = new URLSearchParams();
|
|
payload.set("service", thread.dataset.service || "");
|
|
payload.set("identifier", thread.dataset.identifier || "");
|
|
if (thread.dataset.person) {
|
|
payload.set("person", thread.dataset.person);
|
|
}
|
|
payload.set("limit", thread.dataset.limit || "60");
|
|
const response = await fetch(historySyncUrl, {
|
|
method: "POST",
|
|
credentials: "same-origin",
|
|
headers: {
|
|
"X-CSRFToken": csrfToken,
|
|
"Content-Type": "application/x-www-form-urlencoded",
|
|
Accept: "application/json"
|
|
},
|
|
body: payload.toString(),
|
|
});
|
|
const result = await response.json();
|
|
if (!result.ok) {
|
|
setStatus(
|
|
String(result.message || result.error || "History sync failed."),
|
|
String(result.level || "danger")
|
|
);
|
|
} else {
|
|
setStatus(
|
|
String(result.message || "History sync requested."),
|
|
String(result.level || "success")
|
|
);
|
|
}
|
|
await poll(true);
|
|
if (result.ok) {
|
|
window.setTimeout(function () {
|
|
poll(false);
|
|
}, 1800);
|
|
window.setTimeout(function () {
|
|
poll(false);
|
|
}, 4200);
|
|
}
|
|
} catch (err) {
|
|
setStatus("History sync request failed.", "danger");
|
|
} finally {
|
|
button.classList.remove("is-loading");
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
const ensureEmptyState = function (messageText) {
|
|
if (!thread) {
|
|
return;
|
|
}
|
|
if (thread.querySelector(".compose-row")) {
|
|
return;
|
|
}
|
|
thread.querySelectorAll(".compose-empty").forEach(function (node) {
|
|
if (!node.closest(".compose-empty-wrap")) {
|
|
node.remove();
|
|
}
|
|
});
|
|
let wrap = thread.querySelector(".compose-empty-wrap");
|
|
if (!wrap) {
|
|
wrap = document.createElement("div");
|
|
wrap.className = "compose-empty-wrap";
|
|
const empty = document.createElement("p");
|
|
empty.className = "compose-empty";
|
|
empty.textContent = String(
|
|
messageText || "No stored messages for this contact yet."
|
|
);
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.className = "button is-light is-small compose-history-sync-btn";
|
|
button.innerHTML = '<span class="icon is-small"><i class="fa-solid fa-rotate-right"></i></span><span>Force History Sync</span>';
|
|
wrap.appendChild(empty);
|
|
wrap.appendChild(button);
|
|
thread.appendChild(wrap);
|
|
} else {
|
|
const empty = wrap.querySelector(".compose-empty");
|
|
if (empty && messageText) {
|
|
empty.textContent = String(messageText);
|
|
}
|
|
}
|
|
bindHistorySyncButtons(wrap);
|
|
};
|
|
|
|
const extractUrlCandidates = function (value) {
|
|
const raw = String(value || "");
|
|
const matches = raw.match(/https?:\/\/[^\s<>'"\\]+/g) || [];
|
|
const seen = new Set();
|
|
const output = [];
|
|
matches.forEach(function (item) {
|
|
const cleaned = String(item).trim().replace(/[.,);:!?\"']+$/g, "");
|
|
if (!cleaned || seen.has(cleaned)) {
|
|
return;
|
|
}
|
|
seen.add(cleaned);
|
|
output.push(cleaned);
|
|
});
|
|
return output;
|
|
};
|
|
|
|
const appendImageCandidates = function (bubble, candidates) {
|
|
(candidates || []).forEach(function (candidateUrl) {
|
|
const figure = document.createElement("figure");
|
|
figure.className = "compose-media";
|
|
const img = document.createElement("img");
|
|
img.className = "compose-image";
|
|
img.src = String(candidateUrl);
|
|
img.alt = "Attachment";
|
|
img.referrerPolicy = "no-referrer";
|
|
img.loading = "lazy";
|
|
img.decoding = "async";
|
|
figure.appendChild(img);
|
|
bubble.insertBefore(figure, bubble.firstChild);
|
|
});
|
|
};
|
|
|
|
const wireImageFallbacks = function (rootNode) {
|
|
const scope = rootNode || thread;
|
|
if (!scope) {
|
|
return;
|
|
}
|
|
scope.querySelectorAll(".compose-image").forEach(function (img) {
|
|
if (img.dataset.lightboxBound === "1") {
|
|
return;
|
|
}
|
|
img.dataset.lightboxBound = "1";
|
|
img.setAttribute("role", "button");
|
|
img.setAttribute("tabindex", "0");
|
|
img.setAttribute("aria-label", "Open image preview");
|
|
img.addEventListener("click", function (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
openLightboxFromElement(img);
|
|
});
|
|
img.addEventListener("keydown", function (event) {
|
|
if (event.key !== "Enter" && event.key !== " ") {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
openLightboxFromElement(img);
|
|
});
|
|
});
|
|
scope.querySelectorAll(".compose-bubble").forEach(function (bubble) {
|
|
const fallback = bubble.querySelector(".compose-image-fallback");
|
|
const refresh = function () {
|
|
if (!fallback) {
|
|
return;
|
|
}
|
|
const remaining = bubble.querySelectorAll(".compose-image").length;
|
|
fallback.classList.toggle("is-hidden", remaining > 0);
|
|
};
|
|
bubble.querySelectorAll(".compose-image").forEach(function (img) {
|
|
if (img.dataset.fallbackBound === "1") {
|
|
return;
|
|
}
|
|
img.dataset.fallbackBound = "1";
|
|
img.addEventListener("error", function () {
|
|
img.classList.add("is-image-load-failed");
|
|
});
|
|
img.addEventListener("load", function () {
|
|
if (fallback) {
|
|
fallback.classList.add("is-hidden");
|
|
}
|
|
});
|
|
});
|
|
refresh();
|
|
});
|
|
};
|
|
|
|
const hydrateBodyUrlsAsImages = function (rootNode) {
|
|
const scope = rootNode || thread;
|
|
if (!scope) {
|
|
return;
|
|
}
|
|
scope.querySelectorAll(".compose-bubble").forEach(function (bubble) {
|
|
if (bubble.querySelector(".compose-image")) {
|
|
return;
|
|
}
|
|
const body = bubble.querySelector(".compose-body");
|
|
if (!body) {
|
|
return;
|
|
}
|
|
const candidates = extractUrlCandidates(body.textContent || "");
|
|
if (!candidates.length) {
|
|
return;
|
|
}
|
|
appendImageCandidates(bubble, candidates);
|
|
});
|
|
wireImageFallbacks(scope);
|
|
};
|
|
|
|
const renderGlanceItems = function (items) {
|
|
if (!glanceNode) {
|
|
return;
|
|
}
|
|
const safe = Array.isArray(items) ? items.slice(0, 3) : [];
|
|
glanceNode.innerHTML = "";
|
|
if (!safe.length) {
|
|
glanceNode.classList.add("is-hidden");
|
|
return;
|
|
}
|
|
safe.forEach(function (item) {
|
|
const url = String(item.url || "").trim();
|
|
const chip = document.createElement(url ? "a" : "span");
|
|
chip.className = "compose-glance-item";
|
|
chip.title = String(item.tooltip || "");
|
|
if (url) {
|
|
chip.href = url;
|
|
}
|
|
const key = document.createElement("span");
|
|
key.className = "compose-glance-key";
|
|
key.textContent = String(item.label || "Info");
|
|
const val = document.createElement("span");
|
|
val.className = "compose-glance-val";
|
|
val.textContent = String(item.value || "-");
|
|
chip.appendChild(key);
|
|
chip.appendChild(val);
|
|
glanceNode.appendChild(chip);
|
|
});
|
|
glanceNode.classList.remove("is-hidden");
|
|
};
|
|
|
|
const updateGlanceFromState = function () {
|
|
const items = [];
|
|
if (glanceState.gap) {
|
|
const gapMetricSlug = String(
|
|
glanceState.gap.slug || "inbound_response_score"
|
|
);
|
|
items.push({
|
|
label: "Response Delay",
|
|
value: String(glanceState.gap.lag || "-") + " · " + String(glanceState.gap.score || "-"),
|
|
tooltip: [
|
|
String(glanceState.gap.focus || "Response delay"),
|
|
"Delay " + String(glanceState.gap.lag || "-"),
|
|
"Score " + String(glanceState.gap.score || "-"),
|
|
glanceState.gap.calculation ? ("How it is calculated: " + String(glanceState.gap.calculation || "")) : "",
|
|
glanceState.gap.psychology ? ("Psychological interpretation: " + String(glanceState.gap.psychology || "")) : "",
|
|
].filter(Boolean).join(" | "),
|
|
url: insightUrlForMetric(gapMetricSlug),
|
|
});
|
|
}
|
|
(glanceState.metrics || []).slice(0, 2).forEach(function (metric) {
|
|
const metricSlug = String(metric.slug || "").trim();
|
|
items.push({
|
|
label: String(metric.title || "Metric"),
|
|
value: String(metric.value || "-"),
|
|
tooltip: [
|
|
metric.calculation ? ("How it is calculated: " + String(metric.calculation || "")) : "",
|
|
metric.psychology ? ("Psychological interpretation: " + String(metric.psychology || "")) : "",
|
|
].filter(Boolean).join(" | "),
|
|
url: insightUrlForMetric(metricSlug),
|
|
});
|
|
});
|
|
renderGlanceItems(items);
|
|
};
|
|
|
|
const updateGlanceFromMessage = function (msg) {
|
|
if (!msg || typeof msg !== "object") {
|
|
return;
|
|
}
|
|
let changed = false;
|
|
if (Array.isArray(msg.gap_fragments) && msg.gap_fragments.length) {
|
|
glanceState.gap = msg.gap_fragments[0];
|
|
changed = true;
|
|
}
|
|
if (Array.isArray(msg.metric_fragments) && msg.metric_fragments.length) {
|
|
glanceState.metrics = msg.metric_fragments.slice(0, 2);
|
|
changed = true;
|
|
}
|
|
if (!changed) {
|
|
return;
|
|
}
|
|
updateGlanceFromState();
|
|
};
|
|
|
|
const latencyTooltip = function (gap) {
|
|
if (!gap || typeof gap !== "object") {
|
|
return "Response delay between turns.";
|
|
}
|
|
return [
|
|
String(gap.focus || "Response delay between turns."),
|
|
"Latency " + String(gap.lag || "-"),
|
|
gap.calculation ? ("How it is calculated: " + String(gap.calculation || "")) : "",
|
|
gap.psychology ? ("Psychological interpretation: " + String(gap.psychology || "")) : "",
|
|
].filter(Boolean).join(" | ");
|
|
};
|
|
|
|
const appendLatencyChip = function (row, msg) {
|
|
if (!row || !msg || !Array.isArray(msg.gap_fragments) || !msg.gap_fragments.length) {
|
|
return;
|
|
}
|
|
const gap = msg.gap_fragments[0] || {};
|
|
const lag = String(gap.lag || "").trim();
|
|
if (!lag) {
|
|
return;
|
|
}
|
|
const chip = document.createElement("p");
|
|
chip.className = "compose-latency-chip";
|
|
chip.title = latencyTooltip(gap);
|
|
const icon = document.createElement("span");
|
|
icon.className = "icon is-small";
|
|
const iconGlyph = document.createElement("i");
|
|
iconGlyph.className = "fa-regular fa-clock";
|
|
icon.appendChild(iconGlyph);
|
|
const value = document.createElement("span");
|
|
value.className = "compose-latency-val";
|
|
value.textContent = lag;
|
|
chip.appendChild(icon);
|
|
chip.appendChild(value);
|
|
row.appendChild(chip);
|
|
};
|
|
|
|
const appendBubble = function (msg) {
|
|
const row = document.createElement("div");
|
|
const outgoing = !!msg.outgoing;
|
|
row.className = "compose-row " + (outgoing ? "is-out" : "is-in");
|
|
row.dataset.ts = String(msg.ts || 0);
|
|
row.dataset.minute = minuteBucketFromTs(msg.ts || 0);
|
|
appendLatencyChip(row, msg);
|
|
|
|
const bubble = document.createElement("article");
|
|
bubble.className = "compose-bubble " + (outgoing ? "is-out" : "is-in");
|
|
|
|
const imageCandidatesFromPayload = Array.isArray(msg.image_urls) && msg.image_urls.length
|
|
? msg.image_urls
|
|
: (msg.image_url ? [msg.image_url] : []);
|
|
const imageCandidates = imageCandidatesFromPayload.length
|
|
? imageCandidatesFromPayload
|
|
: extractUrlCandidates(msg.text || msg.display_text || "");
|
|
appendImageCandidates(bubble, imageCandidates);
|
|
|
|
if (!msg.hide_text) {
|
|
const body = document.createElement("p");
|
|
body.className = "compose-body";
|
|
body.textContent = String(
|
|
msg.display_text ||
|
|
msg.text ||
|
|
(msg.image_url ? "" : "(no text)")
|
|
);
|
|
bubble.appendChild(body);
|
|
} else {
|
|
const fallback = document.createElement("p");
|
|
fallback.className = "compose-body compose-image-fallback is-hidden";
|
|
fallback.textContent = "(no text)";
|
|
bubble.appendChild(fallback);
|
|
}
|
|
|
|
const meta = document.createElement("p");
|
|
meta.className = "compose-msg-meta";
|
|
let metaText = String(msg.display_ts || msg.ts || "");
|
|
if (msg.author) {
|
|
metaText += " · " + String(msg.author);
|
|
}
|
|
meta.textContent = metaText;
|
|
bubble.appendChild(meta);
|
|
|
|
row.appendChild(bubble);
|
|
const empty = thread.querySelector(".compose-empty");
|
|
if (empty) {
|
|
empty.remove();
|
|
}
|
|
const emptyWrap = thread.querySelector(".compose-empty-wrap");
|
|
if (emptyWrap) {
|
|
emptyWrap.remove();
|
|
}
|
|
thread.appendChild(row);
|
|
wireImageFallbacks(row);
|
|
updateGlanceFromMessage(msg);
|
|
};
|
|
|
|
const applyMinuteGrouping = function () {
|
|
const rows = Array.from(thread.querySelectorAll(".compose-row"));
|
|
rows.forEach(function (row) {
|
|
row.classList.remove(
|
|
"is-group-single",
|
|
"is-group-first",
|
|
"is-group-middle",
|
|
"is-group-last"
|
|
);
|
|
});
|
|
for (let i = 0; i < rows.length; i += 1) {
|
|
const row = rows[i];
|
|
const minute = String(row.dataset.minute || minuteBucketFromTs(row.dataset.ts));
|
|
const side = row.classList.contains("is-out") ? "out" : "in";
|
|
const prev = rows[i - 1] || null;
|
|
const next = rows[i + 1] || null;
|
|
const prevMatch = !!(
|
|
prev
|
|
&& (prev.classList.contains("is-out") ? "out" : "in") === side
|
|
&& String(prev.dataset.minute || minuteBucketFromTs(prev.dataset.ts)) === minute
|
|
);
|
|
const nextMatch = !!(
|
|
next
|
|
&& (next.classList.contains("is-out") ? "out" : "in") === side
|
|
&& String(next.dataset.minute || minuteBucketFromTs(next.dataset.ts)) === minute
|
|
);
|
|
if (prevMatch && nextMatch) {
|
|
row.classList.add("is-group-middle");
|
|
} else if (!prevMatch && nextMatch) {
|
|
row.classList.add("is-group-first");
|
|
} else if (prevMatch && !nextMatch) {
|
|
row.classList.add("is-group-last");
|
|
} else {
|
|
row.classList.add("is-group-single");
|
|
}
|
|
}
|
|
};
|
|
|
|
const appendMessages = function (messages, forceScroll) {
|
|
const shouldStick = nearBottom() || forceScroll;
|
|
(messages || []).forEach(function (msg) {
|
|
appendBubble(msg);
|
|
lastTs = Math.max(lastTs, toInt(msg.ts));
|
|
});
|
|
thread.dataset.lastTs = String(lastTs);
|
|
if ((messages || []).length > 0) {
|
|
applyMinuteGrouping();
|
|
scrollToBottom(shouldStick);
|
|
}
|
|
};
|
|
|
|
const applyTyping = function (typingPayload) {
|
|
if (!typingNode || !typingPayload || typeof typingPayload !== "object") {
|
|
return;
|
|
}
|
|
const isTyping = !!typingPayload.typing;
|
|
if (!isTyping) {
|
|
typingNode.classList.add("is-hidden");
|
|
return;
|
|
}
|
|
const displayName = String(typingPayload.display_name || "").trim();
|
|
typingNode.textContent = (displayName || "Contact") + " is typing...";
|
|
typingNode.classList.remove("is-hidden");
|
|
};
|
|
|
|
const poll = async function (forceScroll) {
|
|
if (panelState.polling || panelState.websocketReady) {
|
|
return;
|
|
}
|
|
panelState.polling = true;
|
|
try {
|
|
const params = new URLSearchParams();
|
|
params.set("service", thread.dataset.service || "");
|
|
params.set("identifier", thread.dataset.identifier || "");
|
|
if (thread.dataset.person) {
|
|
params.set("person", thread.dataset.person);
|
|
}
|
|
params.set("limit", thread.dataset.limit || "60");
|
|
params.set("after_ts", String(lastTs));
|
|
const response = await fetch(thread.dataset.pollUrl + "?" + params.toString(), {
|
|
method: "GET",
|
|
credentials: "same-origin",
|
|
headers: { Accept: "application/json" }
|
|
});
|
|
if (!response.ok) {
|
|
return;
|
|
}
|
|
const payload = await response.json();
|
|
appendMessages(payload.messages || [], forceScroll);
|
|
if (payload.typing) {
|
|
applyTyping(payload.typing);
|
|
}
|
|
if (payload.last_ts !== undefined && payload.last_ts !== null) {
|
|
lastTs = Math.max(lastTs, toInt(payload.last_ts));
|
|
thread.dataset.lastTs = String(lastTs);
|
|
}
|
|
ensureEmptyState();
|
|
} catch (err) {
|
|
console.debug("compose poll error", err);
|
|
} finally {
|
|
panelState.polling = false;
|
|
}
|
|
};
|
|
|
|
const setupWebSocket = function () {
|
|
const wsPath = thread.dataset.wsUrl || "";
|
|
if (!wsPath || !window.WebSocket) {
|
|
return;
|
|
}
|
|
const protocol = window.location.protocol === "https:" ? "wss://" : "ws://";
|
|
const socketUrl = protocol + window.location.host + wsPath;
|
|
try {
|
|
const socket = new WebSocket(socketUrl);
|
|
panelState.socket = socket;
|
|
socket.onopen = function () {
|
|
panelState.websocketReady = true;
|
|
try {
|
|
socket.send(JSON.stringify({ kind: "sync", last_ts: lastTs }));
|
|
} catch (err) {
|
|
// Ignore.
|
|
}
|
|
};
|
|
socket.onmessage = function (event) {
|
|
try {
|
|
const payload = JSON.parse(event.data || "{}");
|
|
appendMessages(payload.messages || [], false);
|
|
if (payload.typing) {
|
|
applyTyping(payload.typing);
|
|
}
|
|
if (payload.last_ts !== undefined && payload.last_ts !== null) {
|
|
lastTs = Math.max(lastTs, toInt(payload.last_ts));
|
|
thread.dataset.lastTs = String(lastTs);
|
|
}
|
|
} catch (err) {
|
|
console.debug("compose websocket payload error", err);
|
|
}
|
|
};
|
|
socket.onclose = function () {
|
|
panelState.websocketReady = false;
|
|
};
|
|
socket.onerror = function () {
|
|
panelState.websocketReady = false;
|
|
};
|
|
} catch (err) {
|
|
panelState.websocketReady = false;
|
|
}
|
|
};
|
|
|
|
const manualConfirm = form.querySelector(".manual-confirm");
|
|
const armInput = form.querySelector("input[name='failsafe_arm']");
|
|
const confirmInput = form.querySelector("input[name='failsafe_confirm']");
|
|
const sendButton = form.querySelector(".compose-send-btn");
|
|
const updateManualSafety = function () {
|
|
const confirm = !!(manualConfirm && manualConfirm.checked);
|
|
if (armInput) {
|
|
armInput.value = confirm ? "1" : "0";
|
|
}
|
|
if (confirmInput) {
|
|
confirmInput.value = confirm ? "1" : "0";
|
|
}
|
|
if (sendButton) {
|
|
sendButton.disabled = !confirm;
|
|
}
|
|
};
|
|
if (manualConfirm) {
|
|
manualConfirm.addEventListener("change", updateManualSafety);
|
|
}
|
|
updateManualSafety();
|
|
try {
|
|
const initialTyping = JSON.parse("{{ typing_state_json|escapejs }}");
|
|
applyTyping(initialTyping);
|
|
} catch (err) {
|
|
// Ignore invalid initial typing state payload.
|
|
}
|
|
applyMinuteGrouping();
|
|
bindHistorySyncButtons(panel);
|
|
|
|
const setStatus = function (message, level) {
|
|
if (!statusBox) {
|
|
return;
|
|
}
|
|
if (!message) {
|
|
statusBox.innerHTML = "";
|
|
return;
|
|
}
|
|
const row = document.createElement("p");
|
|
row.className = "compose-status-line is-" + (level || "info");
|
|
row.textContent = String(message);
|
|
statusBox.innerHTML = "";
|
|
statusBox.appendChild(row);
|
|
};
|
|
|
|
const flashCompose = function (className) {
|
|
panel.classList.remove("is-send-success", "is-send-fail");
|
|
void panel.offsetWidth;
|
|
panel.classList.add(className);
|
|
window.setTimeout(function () {
|
|
panel.classList.remove(className);
|
|
}, 420);
|
|
};
|
|
|
|
const setActiveTrigger = function (kind) {
|
|
const popoverVisible = !!(popover && !popover.classList.contains("is-hidden"));
|
|
const activeCardVisible = !!(
|
|
popover
|
|
&& kind
|
|
&& popover.querySelector('.compose-ai-card[data-kind="' + kind + '"].is-active')
|
|
);
|
|
triggerButtons.forEach(function (button) {
|
|
const expanded = popoverVisible && activeCardVisible && button.dataset.kind === kind;
|
|
button.classList.toggle("is-expanded", expanded);
|
|
});
|
|
};
|
|
|
|
const hideAllCards = function () {
|
|
if (!popover) {
|
|
return;
|
|
}
|
|
if (popoverBackdrop) {
|
|
popoverBackdrop.classList.add("is-hidden");
|
|
}
|
|
popover.classList.add("is-hidden");
|
|
popover.querySelectorAll(".compose-ai-card").forEach(function (card) {
|
|
card.classList.remove("is-active");
|
|
});
|
|
panelState.activePanel = null;
|
|
setActiveTrigger(null);
|
|
};
|
|
|
|
const showCard = function (kind) {
|
|
if (!popover) {
|
|
return null;
|
|
}
|
|
if (popoverBackdrop) {
|
|
popoverBackdrop.classList.remove("is-hidden");
|
|
}
|
|
popover.classList.remove("is-hidden");
|
|
let active = null;
|
|
popover.querySelectorAll(".compose-ai-card").forEach(function (card) {
|
|
const isActive = card.dataset.kind === kind;
|
|
card.classList.toggle("is-active", isActive);
|
|
if (isActive) {
|
|
active = card;
|
|
}
|
|
});
|
|
panelState.activePanel = kind;
|
|
setActiveTrigger(kind);
|
|
positionPopover(kind);
|
|
return active;
|
|
};
|
|
|
|
const queryParams = function () {
|
|
const params = new URLSearchParams();
|
|
params.set("service", thread.dataset.service || "");
|
|
params.set("identifier", thread.dataset.identifier || "");
|
|
if (thread.dataset.person) {
|
|
params.set("person", thread.dataset.person);
|
|
}
|
|
params.set("limit", thread.dataset.limit || "60");
|
|
return params;
|
|
};
|
|
|
|
const titleCase = function (value) {
|
|
const raw = String(value || "").trim().toLowerCase();
|
|
if (!raw) {
|
|
return "";
|
|
}
|
|
if (raw === "whatsapp") {
|
|
return "WhatsApp";
|
|
}
|
|
if (raw === "xmpp") {
|
|
return "XMPP";
|
|
}
|
|
return raw.charAt(0).toUpperCase() + raw.slice(1);
|
|
};
|
|
|
|
const switchThreadContext = function (nextService, nextIdentifier, nextPersonId, pageUrl) {
|
|
const service = String(nextService || "").trim().toLowerCase();
|
|
const identifier = String(nextIdentifier || "").trim();
|
|
const personId = String(nextPersonId || "").trim();
|
|
if (!service || !identifier) {
|
|
return;
|
|
}
|
|
if (
|
|
String(thread.dataset.service || "").toLowerCase() === service
|
|
&& String(thread.dataset.identifier || "") === identifier
|
|
&& String(thread.dataset.person || "") === personId
|
|
) {
|
|
return;
|
|
}
|
|
thread.dataset.service = service;
|
|
thread.dataset.identifier = identifier;
|
|
if (personId) {
|
|
thread.dataset.person = personId;
|
|
} else {
|
|
delete thread.dataset.person;
|
|
}
|
|
if (hiddenService) {
|
|
hiddenService.value = service;
|
|
}
|
|
if (hiddenIdentifier) {
|
|
hiddenIdentifier.value = identifier;
|
|
}
|
|
if (hiddenPerson) {
|
|
hiddenPerson.value = personId;
|
|
}
|
|
if (metaLine) {
|
|
metaLine.textContent = titleCase(service) + " · " + identifier;
|
|
}
|
|
if (panelState.socket) {
|
|
try {
|
|
panelState.socket.close();
|
|
} catch (err) {
|
|
// Ignore socket close errors.
|
|
}
|
|
panelState.socket = null;
|
|
}
|
|
panelState.websocketReady = false;
|
|
hideAllCards();
|
|
thread.innerHTML = '<p class="compose-empty">Loading messages...</p>';
|
|
lastTs = 0;
|
|
thread.dataset.lastTs = "0";
|
|
glanceState = { gap: null, metrics: [] };
|
|
renderGlanceItems([]);
|
|
if (renderMode === "page" && pageUrl) {
|
|
try {
|
|
window.history.replaceState({}, "", String(pageUrl));
|
|
} catch (err) {
|
|
// Ignore history API failures.
|
|
}
|
|
}
|
|
poll(true);
|
|
};
|
|
|
|
const setCardLoading = function (card, loading) {
|
|
const loadingNode = card.querySelector(".compose-ai-loading");
|
|
const contentNode = card.querySelector(".compose-ai-content");
|
|
if (loadingNode) {
|
|
loadingNode.classList.toggle("is-hidden", !loading);
|
|
}
|
|
if (contentNode && loading) {
|
|
contentNode.innerHTML = "";
|
|
}
|
|
};
|
|
|
|
const openEngage = function (sourceRef) {
|
|
const engageCard = showCard("engage");
|
|
if (!engageCard) {
|
|
return;
|
|
}
|
|
if (!engageCard.dataset.bound) {
|
|
bindEngageControls(engageCard);
|
|
engageCard.dataset.bound = "1";
|
|
}
|
|
loadEngage(engageCard, sourceRef || "auto");
|
|
};
|
|
|
|
const loadDrafts = async function () {
|
|
const card = showCard("drafts");
|
|
if (!card) {
|
|
return;
|
|
}
|
|
setCardLoading(card, true);
|
|
try {
|
|
const response = await fetch(thread.dataset.draftsUrl + "?" + queryParams().toString(), {
|
|
method: "GET",
|
|
credentials: "same-origin",
|
|
headers: { Accept: "application/json" }
|
|
});
|
|
const payload = await response.json();
|
|
setCardLoading(card, false);
|
|
if (!payload.ok) {
|
|
card.querySelector(".compose-ai-content").textContent = payload.error || "Failed to load drafts.";
|
|
return;
|
|
}
|
|
const drafts = Array.isArray(payload.drafts) ? payload.drafts : [];
|
|
const container = card.querySelector(".compose-ai-content");
|
|
container.innerHTML = "";
|
|
const engageButton = document.createElement("button");
|
|
engageButton.type = "button";
|
|
engageButton.className = "button is-link is-light compose-draft-option";
|
|
const engageTone = document.createElement("p");
|
|
engageTone.className = "compose-draft-tone";
|
|
engageTone.textContent = "Custom Engage";
|
|
const engageText = document.createElement("p");
|
|
engageText.className = "compose-draft-text";
|
|
engageText.textContent = "Choose a source or write your own engagement text.";
|
|
engageButton.appendChild(engageTone);
|
|
engageButton.appendChild(engageText);
|
|
engageButton.addEventListener("click", function () {
|
|
openEngage("custom");
|
|
});
|
|
container.appendChild(engageButton);
|
|
drafts.forEach(function (item) {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.className = "button is-light compose-draft-option";
|
|
const tone = document.createElement("p");
|
|
tone.className = "compose-draft-tone";
|
|
tone.textContent = String(item.label || "Option");
|
|
const body = document.createElement("p");
|
|
body.className = "compose-draft-text";
|
|
body.textContent = String(item.text || "");
|
|
button.appendChild(tone);
|
|
button.appendChild(body);
|
|
button.addEventListener("click", function () {
|
|
textarea.value = String(item.text || "");
|
|
autosize();
|
|
textarea.focus();
|
|
hideAllCards();
|
|
});
|
|
container.appendChild(button);
|
|
});
|
|
} catch (err) {
|
|
setCardLoading(card, false);
|
|
card.querySelector(".compose-ai-content").textContent = "Failed to load drafts.";
|
|
}
|
|
};
|
|
|
|
const loadSummary = async function () {
|
|
const card = showCard("summary");
|
|
if (!card) {
|
|
return;
|
|
}
|
|
setCardLoading(card, true);
|
|
try {
|
|
const response = await fetch(thread.dataset.summaryUrl + "?" + queryParams().toString(), {
|
|
method: "GET",
|
|
credentials: "same-origin",
|
|
headers: { Accept: "application/json" }
|
|
});
|
|
const payload = await response.json();
|
|
setCardLoading(card, false);
|
|
if (!payload.ok) {
|
|
card.querySelector(".compose-ai-content").textContent = payload.error || "Failed to load summary.";
|
|
return;
|
|
}
|
|
card.querySelector(".compose-ai-content").textContent = String(payload.summary || "");
|
|
} catch (err) {
|
|
setCardLoading(card, false);
|
|
card.querySelector(".compose-ai-content").textContent = "Failed to load summary.";
|
|
}
|
|
};
|
|
|
|
const loadQuickInsights = async function () {
|
|
const card = showCard("quick_insights");
|
|
if (!card) {
|
|
return;
|
|
}
|
|
setCardLoading(card, true);
|
|
try {
|
|
const response = await fetch(
|
|
thread.dataset.quickInsightsUrl + "?" + queryParams().toString(),
|
|
{
|
|
method: "GET",
|
|
credentials: "same-origin",
|
|
headers: { Accept: "application/json" }
|
|
}
|
|
);
|
|
const payload = await response.json();
|
|
setCardLoading(card, false);
|
|
const container = card.querySelector(".compose-ai-content");
|
|
if (!payload.ok) {
|
|
container.textContent = payload.error || "Failed to load quick insights.";
|
|
return;
|
|
}
|
|
const summary = payload.summary || {};
|
|
const rows = Array.isArray(payload.rows) ? payload.rows : [];
|
|
const docs = Array.isArray(payload.docs) ? payload.docs : [];
|
|
container.innerHTML = "";
|
|
|
|
const docsTooltip = function (title, calculation, psychology) {
|
|
const parts = [];
|
|
if (calculation) {
|
|
parts.push("How it is calculated: " + String(calculation || ""));
|
|
}
|
|
if (psychology) {
|
|
parts.push("Psychological interpretation: " + String(psychology || ""));
|
|
}
|
|
if (!parts.length) {
|
|
return "";
|
|
}
|
|
return String(title || "Metric") + " | " + parts.join(" | ");
|
|
};
|
|
|
|
const appendDocDot = function (target, tooltipText, titleText) {
|
|
if (!target || !tooltipText) {
|
|
return;
|
|
}
|
|
const dot = document.createElement("button");
|
|
dot.type = "button";
|
|
dot.className = "compose-qi-doc-dot";
|
|
dot.setAttribute("data-tooltip", String(tooltipText || ""));
|
|
dot.setAttribute("aria-label", "Explain " + String(titleText || "metric"));
|
|
dot.addEventListener("click", function (ev) {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
});
|
|
target.appendChild(dot);
|
|
};
|
|
|
|
const stateFaceMeta = function (stateText) {
|
|
const state = String(stateText || "").toLowerCase();
|
|
if (state.includes("balanced")) {
|
|
return {
|
|
icon: "fa-regular fa-face-smile",
|
|
className: "has-text-success",
|
|
label: "Balanced"
|
|
};
|
|
}
|
|
if (state.includes("withdrawing")) {
|
|
return {
|
|
icon: "fa-regular fa-face-frown",
|
|
className: "has-text-danger",
|
|
label: "Withdrawing"
|
|
};
|
|
}
|
|
if (state.includes("overextending")) {
|
|
return {
|
|
icon: "fa-regular fa-face-meh",
|
|
className: "has-text-warning",
|
|
label: "Overextending"
|
|
};
|
|
}
|
|
if (state.includes("stable")) {
|
|
return {
|
|
icon: "fa-regular fa-face-smile",
|
|
className: "has-text-success",
|
|
label: "Positive"
|
|
};
|
|
}
|
|
if (state.includes("watch")) {
|
|
return {
|
|
icon: "fa-regular fa-face-meh",
|
|
className: "has-text-warning",
|
|
label: "Mixed"
|
|
};
|
|
}
|
|
if (state.includes("fragile")) {
|
|
return {
|
|
icon: "fa-regular fa-face-frown",
|
|
className: "has-text-danger",
|
|
label: "Strained"
|
|
};
|
|
}
|
|
return {
|
|
icon: "fa-regular fa-face-meh-blank",
|
|
className: "has-text-grey",
|
|
label: "Unknown"
|
|
};
|
|
};
|
|
const stateFace = stateFaceMeta(summary.state);
|
|
|
|
const head = document.createElement("div");
|
|
head.className = "compose-qi-head";
|
|
[
|
|
{
|
|
key: "Platform",
|
|
value: summary.platform || "-",
|
|
docs: summary.platform_docs || {},
|
|
},
|
|
{
|
|
key: "Participant State",
|
|
value: summary.state || "-",
|
|
icon: stateFace.icon,
|
|
className: stateFace.className,
|
|
docs: summary.state_docs || {},
|
|
},
|
|
{
|
|
key: "Data Points",
|
|
value: String(summary.snapshot_count || 0),
|
|
docs: summary.snapshot_docs || {},
|
|
},
|
|
{
|
|
key: "Thread",
|
|
value: summary.thread || "-",
|
|
docs: summary.thread_docs || {},
|
|
},
|
|
].forEach(function (pair) {
|
|
const chip = document.createElement("div");
|
|
chip.className = "compose-qi-chip";
|
|
|
|
const key = document.createElement("p");
|
|
key.className = "k";
|
|
const keyText = document.createElement("span");
|
|
keyText.textContent = String(pair.key || "");
|
|
key.appendChild(keyText);
|
|
const pairDocs = pair.docs || {};
|
|
appendDocDot(
|
|
key,
|
|
docsTooltip(
|
|
pair.key,
|
|
pairDocs.calculation,
|
|
pairDocs.psychology
|
|
),
|
|
pair.key
|
|
);
|
|
chip.appendChild(key);
|
|
|
|
const value = document.createElement("p");
|
|
value.className = "v";
|
|
if (pair.icon) {
|
|
const iconWrap = document.createElement("span");
|
|
iconWrap.className = String(pair.className || "");
|
|
const icon = document.createElement("span");
|
|
icon.className = "icon is-small";
|
|
const glyph = document.createElement("i");
|
|
glyph.className = String(pair.icon || "");
|
|
icon.appendChild(glyph);
|
|
iconWrap.appendChild(icon);
|
|
value.appendChild(iconWrap);
|
|
}
|
|
const valueText = document.createElement("span");
|
|
valueText.textContent = String(pair.value || "-");
|
|
value.appendChild(valueText);
|
|
chip.appendChild(value);
|
|
|
|
head.appendChild(chip);
|
|
});
|
|
container.appendChild(head);
|
|
|
|
if (!rows.length) {
|
|
const none = document.createElement("p");
|
|
none.className = "is-size-7 has-text-grey";
|
|
none.textContent = "No metric rows available yet.";
|
|
container.appendChild(none);
|
|
} else {
|
|
const list = document.createElement("div");
|
|
list.className = "compose-qi-list";
|
|
rows.forEach(function (row) {
|
|
const node = document.createElement("article");
|
|
node.className = "compose-qi-row";
|
|
|
|
const rowHead = document.createElement("div");
|
|
rowHead.className = "compose-qi-row-head";
|
|
|
|
const rowLabel = document.createElement("p");
|
|
rowLabel.className = "compose-qi-row-label";
|
|
const rowIcon = document.createElement("span");
|
|
rowIcon.className = "icon is-small";
|
|
const rowIconGlyph = document.createElement("i");
|
|
rowIconGlyph.className = String(row.icon || "fa-solid fa-square");
|
|
rowIcon.appendChild(rowIconGlyph);
|
|
rowLabel.appendChild(rowIcon);
|
|
const rowLabelText = document.createElement("span");
|
|
rowLabelText.textContent = String(row.label || "");
|
|
rowLabel.appendChild(rowLabelText);
|
|
appendDocDot(
|
|
rowLabel,
|
|
docsTooltip(row.label, row.calculation, row.psychology),
|
|
row.label
|
|
);
|
|
rowHead.appendChild(rowLabel);
|
|
|
|
const rowMeta = document.createElement("p");
|
|
rowMeta.className = "compose-qi-row-meta";
|
|
const points = document.createElement("span");
|
|
points.textContent = String(row.point_count || 0) + " points";
|
|
rowMeta.appendChild(points);
|
|
const trend = row.trend || {};
|
|
const trendNode = document.createElement("span");
|
|
trendNode.className = String(trend.class_name || "");
|
|
const trendIcon = document.createElement("span");
|
|
trendIcon.className = "icon is-small";
|
|
const trendGlyph = document.createElement("i");
|
|
trendGlyph.className = String(trend.icon || "");
|
|
trendIcon.appendChild(trendGlyph);
|
|
trendNode.appendChild(trendIcon);
|
|
const trendText = document.createTextNode(" " + String(row.delta_label || "n/a"));
|
|
trendNode.appendChild(trendText);
|
|
rowMeta.appendChild(trendNode);
|
|
rowHead.appendChild(rowMeta);
|
|
node.appendChild(rowHead);
|
|
|
|
const rowBody = document.createElement("div");
|
|
rowBody.className = "compose-qi-row-body";
|
|
const rowValue = document.createElement("p");
|
|
rowValue.className = "compose-qi-value";
|
|
rowValue.textContent = String(row.display_value || "-");
|
|
rowBody.appendChild(rowValue);
|
|
|
|
const emotion = row.emotion || {};
|
|
const emotionNode = document.createElement("p");
|
|
emotionNode.className = String(emotion.class_name || "");
|
|
emotionNode.style.margin = "0";
|
|
emotionNode.style.fontSize = "0.72rem";
|
|
const emotionIconWrap = document.createElement("span");
|
|
emotionIconWrap.className = "icon is-small";
|
|
const emotionGlyph = document.createElement("i");
|
|
emotionGlyph.className = String(emotion.icon || "");
|
|
emotionIconWrap.appendChild(emotionGlyph);
|
|
emotionNode.appendChild(emotionIconWrap);
|
|
emotionNode.appendChild(
|
|
document.createTextNode(" " + String(emotion.label || "Unknown"))
|
|
);
|
|
rowBody.appendChild(emotionNode);
|
|
node.appendChild(rowBody);
|
|
|
|
list.appendChild(node);
|
|
});
|
|
container.appendChild(list);
|
|
}
|
|
if (docs.length) {
|
|
const docsList = document.createElement("ul");
|
|
docsList.className = "compose-qi-docs";
|
|
docs.forEach(function (item) {
|
|
const li = document.createElement("li");
|
|
li.textContent = String(item || "");
|
|
docsList.appendChild(li);
|
|
});
|
|
container.appendChild(docsList);
|
|
}
|
|
} catch (err) {
|
|
setCardLoading(card, false);
|
|
card.querySelector(".compose-ai-content").textContent =
|
|
"Failed to load quick insights.";
|
|
}
|
|
};
|
|
|
|
const loadEngage = async function (card, preferredSource) {
|
|
card = card || showCard("engage");
|
|
if (!card) {
|
|
return;
|
|
}
|
|
setCardLoading(card, true);
|
|
panelState.engageToken = "";
|
|
const sourceSelect = card.querySelector(".engage-source-select");
|
|
const refreshBtn = card.querySelector(".engage-refresh-btn");
|
|
const sendBtn = card.querySelector(".engage-send-btn");
|
|
const confirm = card.querySelector(".engage-confirm");
|
|
const customWrap = card.querySelector(".compose-engage-custom-wrap");
|
|
const customText = card.querySelector(".engage-custom-text");
|
|
const selectedSource = (
|
|
preferredSource !== undefined
|
|
? preferredSource
|
|
: (sourceSelect ? sourceSelect.value : "")
|
|
);
|
|
const customValue = customText ? String(customText.value || "").trim() : "";
|
|
const showCustom = selectedSource === "custom";
|
|
confirm.checked = false;
|
|
sendBtn.disabled = true;
|
|
if (customWrap) {
|
|
customWrap.classList.toggle("is-hidden", !showCustom);
|
|
}
|
|
if (refreshBtn) {
|
|
refreshBtn.classList.add("is-loading");
|
|
}
|
|
try {
|
|
const params = queryParams();
|
|
if (selectedSource) {
|
|
params.set("source_ref", selectedSource);
|
|
}
|
|
if (showCustom && customValue) {
|
|
params.set("custom_text", customValue);
|
|
}
|
|
const response = await fetch(
|
|
thread.dataset.engagePreviewUrl + "?" + params.toString(),
|
|
{
|
|
method: "GET",
|
|
credentials: "same-origin",
|
|
headers: { Accept: "application/json" }
|
|
}
|
|
);
|
|
const payload = await response.json();
|
|
setCardLoading(card, false);
|
|
if (!payload.ok) {
|
|
card.querySelector(".compose-ai-content").textContent = payload.error || "Failed to load engage preview.";
|
|
panelState.engageToken = "";
|
|
return;
|
|
}
|
|
const options = Array.isArray(payload.options) ? payload.options : [];
|
|
if (sourceSelect) {
|
|
const before = sourceSelect.value;
|
|
sourceSelect.innerHTML = "";
|
|
options.forEach(function (opt) {
|
|
const option = document.createElement("option");
|
|
option.value = String(opt.value || "");
|
|
option.textContent = String(opt.label || "");
|
|
sourceSelect.appendChild(option);
|
|
});
|
|
const payloadSelected = String(payload.selected_source || "");
|
|
if (payloadSelected) {
|
|
sourceSelect.value = payloadSelected;
|
|
} else if (before) {
|
|
sourceSelect.value = before;
|
|
}
|
|
if (!sourceSelect.value && sourceSelect.options.length > 0) {
|
|
sourceSelect.selectedIndex = 0;
|
|
}
|
|
}
|
|
if (customText && payload.custom_text !== undefined) {
|
|
customText.value = String(payload.custom_text || "");
|
|
}
|
|
if (customWrap && sourceSelect) {
|
|
customWrap.classList.toggle("is-hidden", sourceSelect.value !== "custom");
|
|
}
|
|
panelState.engageToken = String(payload.token || "");
|
|
let text = String(payload.preview || "");
|
|
if (payload.artifact) {
|
|
text = text + "\n\nSource: " + String(payload.artifact);
|
|
}
|
|
card.querySelector(".compose-ai-content").textContent = text;
|
|
sendBtn.disabled = !(confirm.checked && panelState.engageToken);
|
|
} catch (err) {
|
|
setCardLoading(card, false);
|
|
card.querySelector(".compose-ai-content").textContent = "Failed to load engage preview.";
|
|
panelState.engageToken = "";
|
|
} finally {
|
|
if (refreshBtn) {
|
|
refreshBtn.classList.remove("is-loading");
|
|
}
|
|
}
|
|
};
|
|
|
|
const bindEngageControls = function (card) {
|
|
const confirm = card.querySelector(".engage-confirm");
|
|
const send = card.querySelector(".engage-send-btn");
|
|
const sourceSelect = card.querySelector(".engage-source-select");
|
|
const refreshBtn = card.querySelector(".engage-refresh-btn");
|
|
const customText = card.querySelector(".engage-custom-text");
|
|
const customWrap = card.querySelector(".compose-engage-custom-wrap");
|
|
let customDebounce = null;
|
|
|
|
const sync = function () {
|
|
send.disabled = !(confirm.checked && panelState.engageToken);
|
|
};
|
|
confirm.addEventListener("change", sync);
|
|
|
|
if (sourceSelect) {
|
|
sourceSelect.addEventListener("change", function () {
|
|
if (customWrap) {
|
|
customWrap.classList.toggle("is-hidden", sourceSelect.value !== "custom");
|
|
}
|
|
loadEngage(card, sourceSelect.value);
|
|
});
|
|
}
|
|
|
|
if (customText) {
|
|
customText.addEventListener("input", function () {
|
|
if (!sourceSelect || sourceSelect.value !== "custom") {
|
|
return;
|
|
}
|
|
if (customDebounce) {
|
|
clearTimeout(customDebounce);
|
|
}
|
|
customDebounce = setTimeout(function () {
|
|
loadEngage(card, "custom");
|
|
}, 260);
|
|
});
|
|
}
|
|
|
|
if (refreshBtn) {
|
|
refreshBtn.addEventListener("click", function () {
|
|
loadEngage(card, sourceSelect ? sourceSelect.value : "");
|
|
});
|
|
}
|
|
|
|
send.addEventListener("click", async function () {
|
|
if (!panelState.engageToken) {
|
|
return;
|
|
}
|
|
const formData = new URLSearchParams();
|
|
formData.set("service", thread.dataset.service || "");
|
|
formData.set("identifier", thread.dataset.identifier || "");
|
|
if (thread.dataset.person) {
|
|
formData.set("person", thread.dataset.person);
|
|
}
|
|
formData.set("engage_token", panelState.engageToken);
|
|
formData.set("failsafe_arm", confirm.checked ? "1" : "0");
|
|
formData.set("failsafe_confirm", confirm.checked ? "1" : "0");
|
|
try {
|
|
const response = await fetch(thread.dataset.engageSendUrl, {
|
|
method: "POST",
|
|
credentials: "same-origin",
|
|
headers: {
|
|
"X-CSRFToken": csrfToken,
|
|
"Content-Type": "application/x-www-form-urlencoded",
|
|
Accept: "application/json"
|
|
},
|
|
body: formData.toString()
|
|
});
|
|
const payload = await response.json();
|
|
if (!payload.ok) {
|
|
flashCompose("is-send-fail");
|
|
setStatus(payload.error || "Engage send failed.", "danger");
|
|
return;
|
|
}
|
|
flashCompose("is-send-success");
|
|
setStatus("", "success");
|
|
hideAllCards();
|
|
poll(true);
|
|
} catch (err) {
|
|
flashCompose("is-send-fail");
|
|
setStatus("Engage send failed.", "danger");
|
|
}
|
|
});
|
|
};
|
|
|
|
panel.querySelectorAll(".js-ai-trigger").forEach(function (button) {
|
|
button.addEventListener("click", function () {
|
|
const kind = button.dataset.kind;
|
|
if (panelState.activePanel === kind) {
|
|
hideAllCards();
|
|
return;
|
|
}
|
|
if (kind === "drafts") {
|
|
loadDrafts();
|
|
} else if (kind === "summary") {
|
|
loadSummary();
|
|
} else if (kind === "quick_insights") {
|
|
loadQuickInsights();
|
|
} else if (kind === "engage") {
|
|
openEngage("auto");
|
|
}
|
|
});
|
|
});
|
|
if (platformSelect) {
|
|
platformSelect.addEventListener("change", function () {
|
|
const selected = platformSelect.options[platformSelect.selectedIndex];
|
|
if (!selected) {
|
|
return;
|
|
}
|
|
const selectedService = selected.value || "";
|
|
const selectedIdentifier = selected.dataset.identifier || "";
|
|
const selectedPerson = selected.dataset.person || thread.dataset.person || "";
|
|
const selectedPageUrl = (
|
|
renderMode === "page"
|
|
? selected.dataset.pageUrl
|
|
: selected.dataset.widgetUrl
|
|
) || "";
|
|
switchThreadContext(
|
|
selectedService,
|
|
selectedIdentifier,
|
|
selectedPerson,
|
|
selectedPageUrl
|
|
);
|
|
});
|
|
}
|
|
if (contactSelect) {
|
|
contactSelect.addEventListener("change", function () {
|
|
const selected = contactSelect.options[contactSelect.selectedIndex];
|
|
if (!selected) {
|
|
return;
|
|
}
|
|
const selectedService = selected.dataset.service || "";
|
|
const selectedIdentifier = selected.dataset.identifier || "";
|
|
const selectedPerson = selected.dataset.person || "";
|
|
const selectedPageUrl = (
|
|
renderMode === "page"
|
|
? selected.dataset.pageUrl
|
|
: selected.dataset.widgetUrl
|
|
) || "";
|
|
switchThreadContext(
|
|
selectedService,
|
|
selectedIdentifier,
|
|
selectedPerson,
|
|
selectedPageUrl
|
|
);
|
|
});
|
|
}
|
|
|
|
panelState.docClickHandler = function (event) {
|
|
if (!panel.contains(event.target)) {
|
|
hideAllCards();
|
|
return;
|
|
}
|
|
const clickedTrigger = event.target.closest(".js-ai-trigger");
|
|
if (clickedTrigger) {
|
|
return;
|
|
}
|
|
if (popover && !popover.classList.contains("is-hidden")) {
|
|
if (!popover.contains(event.target)) {
|
|
hideAllCards();
|
|
}
|
|
}
|
|
};
|
|
if (popoverBackdrop) {
|
|
popoverBackdrop.addEventListener("click", function () {
|
|
hideAllCards();
|
|
});
|
|
}
|
|
if (lightbox) {
|
|
if (lightboxPrev) {
|
|
lightboxPrev.addEventListener("click", function (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
stepLightbox(-1);
|
|
});
|
|
}
|
|
if (lightboxNext) {
|
|
lightboxNext.addEventListener("click", function (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
stepLightbox(1);
|
|
});
|
|
}
|
|
const closeButton = lightbox.querySelector(".compose-lightbox-close");
|
|
if (closeButton) {
|
|
closeButton.addEventListener("click", function (event) {
|
|
event.preventDefault();
|
|
closeLightbox();
|
|
});
|
|
}
|
|
lightbox.addEventListener("click", function (event) {
|
|
if (event.target === lightbox) {
|
|
closeLightbox();
|
|
}
|
|
});
|
|
panelState.lightboxKeyHandler = function (event) {
|
|
if (lightbox.classList.contains("is-hidden")) {
|
|
return;
|
|
}
|
|
if (event.key === "Escape") {
|
|
closeLightbox();
|
|
return;
|
|
}
|
|
if (event.key === "ArrowLeft") {
|
|
event.preventDefault();
|
|
stepLightbox(-1);
|
|
return;
|
|
}
|
|
if (event.key === "ArrowRight") {
|
|
event.preventDefault();
|
|
stepLightbox(1);
|
|
}
|
|
};
|
|
document.addEventListener("keydown", panelState.lightboxKeyHandler);
|
|
}
|
|
panelState.resizeHandler = function () {
|
|
if (!popover || popover.classList.contains("is-hidden")) {
|
|
return;
|
|
}
|
|
positionPopover(panelState.activePanel);
|
|
};
|
|
window.addEventListener("resize", panelState.resizeHandler);
|
|
document.addEventListener("mousedown", panelState.docClickHandler);
|
|
textarea.addEventListener("keydown", function (event) {
|
|
if (event.key === "Enter" && !event.shiftKey) {
|
|
event.preventDefault();
|
|
if (sendButton && sendButton.disabled) {
|
|
setStatus("Enable send confirmation before sending.", "warning");
|
|
return;
|
|
}
|
|
form.requestSubmit();
|
|
}
|
|
});
|
|
|
|
form.addEventListener("htmx:afterRequest", function () {
|
|
textarea.focus();
|
|
});
|
|
|
|
panelState.eventHandler = function (event) {
|
|
const detail = (event && event.detail) || {};
|
|
const sourcePanelId = String(detail.panel_id || "");
|
|
if (!sourcePanelId || sourcePanelId !== panelId) {
|
|
return;
|
|
}
|
|
poll(true);
|
|
};
|
|
document.body.addEventListener("composeMessageSent", panelState.eventHandler);
|
|
|
|
panelState.sendResultHandler = function (event) {
|
|
const detail = (event && event.detail) || {};
|
|
const sourcePanelId = String(detail.panel_id || "");
|
|
if (!sourcePanelId || sourcePanelId !== panelId) {
|
|
return;
|
|
}
|
|
const ok = !!detail.ok;
|
|
if (ok) {
|
|
flashCompose("is-send-success");
|
|
setStatus("", "success");
|
|
textarea.value = "";
|
|
autosize();
|
|
poll(true);
|
|
} else {
|
|
flashCompose("is-send-fail");
|
|
if (detail.message) {
|
|
setStatus(detail.message, detail.level || "danger");
|
|
}
|
|
}
|
|
textarea.focus();
|
|
};
|
|
document.body.addEventListener("composeSendResult", panelState.sendResultHandler);
|
|
|
|
hydrateBodyUrlsAsImages(thread);
|
|
scrollToBottom(true);
|
|
setupWebSocket();
|
|
panelState.timer = setInterval(function () {
|
|
if (!document.getElementById(panelId)) {
|
|
clearInterval(panelState.timer);
|
|
document.body.removeEventListener("composeMessageSent", panelState.eventHandler);
|
|
document.body.removeEventListener("composeSendResult", panelState.sendResultHandler);
|
|
document.removeEventListener("mousedown", panelState.docClickHandler);
|
|
if (panelState.lightboxKeyHandler) {
|
|
document.removeEventListener("keydown", panelState.lightboxKeyHandler);
|
|
}
|
|
if (panelState.socket) {
|
|
try {
|
|
panelState.socket.close();
|
|
} catch (err) {
|
|
// Ignore.
|
|
}
|
|
}
|
|
if (lightbox && lightbox.parentElement === document.body) {
|
|
lightbox.remove();
|
|
}
|
|
delete window.giaComposePanels[panelId];
|
|
return;
|
|
}
|
|
poll(false);
|
|
}, 4000);
|
|
})();
|
|
</script>
|