feat: shows the hydrated conversation from the client in WebRTC SDK

Author: activescott

apps/browser-example/src/components/ConversationView.tsx

@@ -4,16 +4,12 @@ import type {
   RealtimeConversationItem,
   RealtimeConversationItemContent,
 } from "@tsorta/browser/openai"
-import {
-  DefinedRole,
-  RealtimeConversationItemSimple,
-  simplifyItem,
-} from "./simpleConversation"
+import { DefinedRole, simplifyItem } from "./simpleConversation"
 
 const log = console
 
 export interface ConversationProps {
-  conversation: RealtimeConversationItemSimple[]
+  conversation: RealtimeConversationItem[]
 }
 
 export const ConversationView = ({
@@ -93,7 +89,8 @@ const ConversationItem = ({
 
       <div
         key={id}
-        className={`mb-5 p-3 rounded-pill ${RoleBgColorMap[role]} ${RoleTextColorMap[role]}`}
+        className={`mb-5 ${RoleBgColorMap[role]} ${RoleTextColorMap[role]}`}
+        style={{ padding: "1.5rem 1.5rem", borderRadius: "5rem" }}
       >
         <div className="my-content">
           {content.map((contentItem, index) => (

apps/browser-example/src/components/RealtimeSessionView.tsx

@@ -2,7 +2,10 @@ import { ReactNode, useState } from "react"
 import { BootstrapIcon } from "./BootstrapIcon"
 import { EventList } from "./EventList"
 import { useModal } from "../hooks/useModal"
-import { RealtimeSessionCreateRequest } from "@tsorta/browser/openai"
+import {
+  RealtimeConversationItem,
+  RealtimeSessionCreateRequest,
+} from "@tsorta/browser/openai"
 import { ConversationView } from "./ConversationView"
 
 type PartialSessionRequestWithModel = Partial<RealtimeSessionCreateRequest> &
@@ -16,13 +19,15 @@ interface RealtimeSessionViewProps {
   stopSession: () => Promise<void>
   sessionStatus: "unavailable" | "stopped" | "recording"
   events: { type: string }[]
+  conversation?: RealtimeConversationItem[]
 }
 
 export function RealtimeSessionView({
   startSession,
   stopSession,
   sessionStatus,
   events,
+  conversation,
 }: RealtimeSessionViewProps): ReactNode {
   // TODO: allow user to select the model
   const model = "gpt-4o-realtime-preview-2024-12-17"
@@ -31,6 +36,10 @@ export function RealtimeSessionView({
     undefined
   )
 
+  const [activeTab, setActiveTab] = useState<"events" | "conversation">(
+    "events"
+  )
+
   const modal = useModal({
     title: "Edit Instructions",
     children: (
@@ -132,56 +141,66 @@ export function RealtimeSessionView({
         </li>
       </ul>
 
-      <ul className="nav nav-tabs mb-3" role="tablist">
+      <ul className="nav nav-tabs mt-3" role="tablist">
         <li className="nav-item" role="presentation">
           <button
-            className="nav-link active"
+            className={`nav-link ${activeTab === "events" ? "active" : ""}`}
             id="events-tab"
-            data-bs-toggle="tab"
-            data-bs-target="#events"
             type="button"
             role="tab"
             aria-controls="events"
-            aria-selected="true"
+            aria-selected={activeTab === "conversation"}
+            onClick={() => setActiveTab("events")}
           >
             Events
           </button>
         </li>
         <li className="nav-item" role="presentation">
           <button
-            className="nav-link"
+            className={`nav-link ${
+              activeTab === "conversation" ? "active" : ""
+            }`}
             id="conversation-tab"
-            data-bs-toggle="tab"
-            data-bs-target="#conversation"
             type="button"
             role="tab"
             aria-controls="conversation"
-            aria-selected="false"
+            aria-selected={activeTab === "conversation"}
+            onClick={() => setActiveTab("conversation")}
           >
             Conversation
           </button>
         </li>
       </ul>
       <div className="tab-content">
         <div
-          className="tab-pane fade show active"
+          className={`tab-events tab-pane fade ${
+            activeTab === "events" ? "show active" : ""
+          }`}
           id="events"
           role="tabpanel"
           aria-labelledby="events-tab"
         >
           <EventList events={events} />
         </div>
         <div
-          className="tab-pane fade"
+          className={`tab-events tab-pane fade ${
+            activeTab === "conversation" ? "show active" : ""
+          }`}
           id="conversation"
           role="tabpanel"
           aria-labelledby="conversation-tab"
         >
-          <div>TODO</div>
-          {/*<ConversationView conversation={} />*/}
+          {conversation && conversation.length > 0 ? (
+            <ConversationView conversation={conversation} />
+          ) : (
+            <div className="alert alert-info m-2" role="alert">
+              {conversation !== undefined
+                ? "Conversation data not yet available. Start a session and talk and they should appear."
+                : "Conversations not available in this SDK"}
+            </div>
+          )}
         </div>
       </div>
-      <EventList events={events} />
     </div>
   )
 }

apps/browser-example/src/pages/WebRTCExample.tsx

@@ -94,6 +94,7 @@ export function WebRTCExample({
         stopSession={stopSession}
         sessionStatus={sessionStatus}
         events={events}
+        conversation={conversation}
       />
     </div>
   )