feat: Implement structured message parsing and display in MessageViewer component

- Added MessageViewer component to display parsed messages in a chat-like format.
- Introduced new Message table in the database to store individual messages with timestamps, roles, and content.
- Updated Session model to include a relation to parsed messages.
- Created transcript parsing logic to convert raw transcripts into structured messages.
- Enhanced processing scheduler to handle sessions with parsed messages.
- Updated API endpoints to return parsed messages alongside session details.
- Added manual trigger commands for session refresh, transcript parsing, and processing.
- Improved user experience with color-coded message roles and timestamps in the UI.
- Documented the new scheduler workflow and transcript parsing implementation.

components/MessageViewer.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { Message } from "../lib/types";
+
+interface MessageViewerProps {
+  messages: Message[];
+}
+
+/**
+ * Component to display parsed messages in a chat-like format
+ */
+export default function MessageViewer({ messages }: MessageViewerProps) {
+  if (!messages || messages.length === 0) {
+    return (
+      <div className="bg-white p-4 rounded-lg shadow">
+        <h3 className="font-bold text-lg mb-3">Conversation</h3>
+        <p className="text-gray-500 italic">No parsed messages available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white p-4 rounded-lg shadow">
+      <h3 className="font-bold text-lg mb-3">
+        Conversation ({messages.length} messages)
+      </h3>
+
+      <div className="space-y-3 max-h-96 overflow-y-auto">
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            className={`flex ${
+              message.role.toLowerCase() === 'user'
+                ? 'justify-end'
+                : 'justify-start'
+            }`}
+          >
+            <div
+              className={`max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${
+                message.role.toLowerCase() === 'user'
+                  ? 'bg-blue-500 text-white'
+                  : message.role.toLowerCase() === 'assistant'
+                  ? 'bg-gray-200 text-gray-800'
+                  : 'bg-yellow-100 text-yellow-800'
+              }`}
+            >
+              <div className="flex items-center justify-between mb-1">
+                <span className="text-xs font-medium opacity-75 mr-2">
+                  {message.role}
+                </span>
+                <span className="text-xs opacity-75 ml-2">
+                  {new Date(message.timestamp).toLocaleTimeString()}
+                </span>
+              </div>
+              <div className="text-sm whitespace-pre-wrap">
+                {message.content}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-4 pt-3 border-t text-sm text-gray-500">
+        <div className="flex justify-between">
+          <span>
+            First message: {new Date(messages[0].timestamp).toLocaleString()}
+          </span>
+          <span>
+            Last message: {new Date(messages[messages.length - 1].timestamp).toLocaleString()}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}