Jul 10 - Update codes to catch up with the single tenant project (Medium)

app/templates/support/conversation_detail.html

@@ -0,0 +1,78 @@
+{% extends "base.html" %}
+{% block title %}Conversation #{{ chat_session.id }}{% endblock %}
+
+{% block extra_css %}
+<style>
+  .msg-bubble {
+    max-width: 80%;
+    padding: .6rem .9rem;
+    border-radius: 1rem;
+    font-size: .9rem;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .msg-user { background:#0d6efd; color:#fff; border-bottom-right-radius:.25rem; align-self:flex-end; }
+  .msg-ai   { background:#f8f9fa; border:1px solid #dee2e6; border-bottom-left-radius:.25rem; align-self:flex-start; }
+  .msg-row  { display:flex; flex-direction:column; gap:.75rem; }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="mb-3">
+  {% if is_admin %}
+  <a href="{{ url_for('support.admin_conversations') }}" class="btn btn-sm btn-outline-secondary">
+    <i class="bi bi-arrow-left me-1"></i>All Conversations
+  </a>
+  {% else %}
+  <a href="{{ url_for('support.my_conversations') }}" class="btn btn-sm btn-outline-secondary">
+    <i class="bi bi-arrow-left me-1"></i>My Conversations
+  </a>
+  {% endif %}
+</div>
+
+<div class="row g-4">
+  <div class="col-lg-8">
+    <div class="card shadow-sm">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <strong>{{ chat_session.title or 'Conversation #' ~ chat_session.id }}</strong>
+        <small class="text-muted">{{ messages | length }} messages</small>
+      </div>
+      <div class="card-body">
+        {% if messages %}
+        <div class="msg-row">
+          {% for msg in messages %}
+          <div class="msg-bubble msg-{{ msg.role }}">
+            {{ msg.content }}
+          </div>
+          {% endfor %}
+        </div>
+        {% else %}
+        <div class="text-muted text-center py-3">No messages in this conversation.</div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-4">
+    <div class="card shadow-sm">
+      <div class="card-header"><i class="bi bi-info-circle me-2"></i>Details</div>
+      <div class="card-body small">
+        {% if is_admin and chat_session.customer %}
+        <p class="mb-1"><strong>Customer:</strong> {{ chat_session.customer.display_name }}</p>
+        <p class="mb-2 text-muted">{{ chat_session.customer.email }}</p>
+        <hr class="my-2">
+        {% endif %}
+        <p class="mb-1"><strong>Started:</strong> {{ chat_session.created_at.strftime('%b %d, %Y %I:%M %p') }}</p>
+        <p class="mb-2"><strong>Last message:</strong> {{ chat_session.last_msg_at.strftime('%b %d, %Y %I:%M %p') }}</p>
+        {% if not is_admin %}
+        <a href="{{ url_for('support.chat', session_id=chat_session.id) }}"
+           class="btn btn-primary btn-sm w-100 mt-2">
+          <i class="bi bi-chat me-1"></i>Continue This Chat
+        </a>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}