Merge branch 'phone-interface'

agents/my_basic_agent_1_2_9.py

@@ -103,7 +103,7 @@ DEFAULT_INSTRUCTIONS = """# 角色
 - 一次询问一个问题
 - 不要在你的回复中使用 emojis, asterisks, markdown, 或其他特殊字符
 - 不同阶段直接的过渡语句自然
-- 你已经说过下面的开场白所以不需要重复说：“您好，这里是无锡交警，我将为您远程处理交通事故。请将人员撤离至路侧安全区域，开启危险报警双闪灯、放置三角警告牌、做好安全防护，谨防二次事故伤害。若您已经准备好了，请点击继续办理，如需人工服务，请说转人工。”
+- 你已经说过下面的开场白，用户点击继续办理说明已经认可，所以不需要重复说：“您好，这里是无锡交警，我将为您远程处理交通事故。请将人员撤离至路侧安全区域，开启危险报警双闪灯、放置三角警告牌、做好安全防护，谨防二次事故伤害。若您已经准备好了，请点击继续办理，如需人工服务，请说转人工。” 
 """
 
 DEFAULT_TALKING_MODE = 'push_to_talk'
@@ -1030,6 +1030,7 @@ async def entrypoint(ctx: JobContext, avatar_dispatcher_url: str = None, vision_
         logger.info("Using default DeepSeek backend")
         llm = openai.LLM.with_deepseek(
             model='deepseek-chat',
+            temperature=0.1
         )
 
     session = AgentSession(

src/components/playground/PhoneSimulator.tsx

@@ -715,7 +715,7 @@ export function PhoneSimulator({
                   >
                       <PhoneIcon className="w-8 h-8" />
                   </div>
-                  <span className="font-medium text-white">Call Agent</span>
+                  <span className="font-medium text-white">呼叫智能体</span>
               </button>
 
               <div className="relative">
@@ -725,7 +725,7 @@ export function PhoneSimulator({
                 >
                   <VoiceIcon className="w-3 h-3" />
                   <span>
-                    {currentVoiceId === "BV001_streaming" ? "Female Voice" : "Male Voice"}
+                    {currentVoiceId === "BV001_streaming" ? "女性声音" : "男性声音"}
                   </span>
                 </button>
                 {showVoiceMenu && (
@@ -745,7 +745,7 @@ export function PhoneSimulator({
                           : "text-white"
                       }`}
                     >
-                      <span>Female Voice</span>
+                      <span>女性声音</span>
                       {currentVoiceId === "BV001_streaming" && <CheckIcon />}
                     </button>
                     <button
@@ -760,7 +760,7 @@ export function PhoneSimulator({
                           : "text-white"
                       }`}
                     >
-                      <span>Male Voice</span>
+                      <span>男性声音</span>
                       {currentVoiceId === "BV002_streaming" && (
                         <CheckIcon />
                       )}
@@ -1198,6 +1198,20 @@ export function PhoneSimulator({
                   </button>
                 </div>
               )}
+
+              {/* Fallback: Show End Call Button when in push-to-talk mode but no agent/audio */}
+              {phoneMode === "normal" && 
+               isPushToTalkMode && 
+               !voiceAssistant.agent && (
+                <div className="w-full flex items-center justify-center">
+                  <button
+                    className="p-4 rounded-full bg-red-500 text-white hover:bg-red-600 transition-colors"
+                    onClick={handleDisconnect}
+                  >
+                    <PhoneOffIcon className="w-6 h-6" />
+                  </button>
+                </div>
+              )}
             </div>
             </div>
           )

src/components/playground/Playground.tsx

@@ -479,6 +479,7 @@ export default function Playground({
   ]);
 
   const instructionsContent = (
+    <>
       <ConfigurationPanelItem title="Instructions">
         <textarea
           className="w-full bg-gray-950 text-white text-sm p-3 rounded-md border border-gray-800 focus:border-gray-600 focus:outline-none transition-colors resize-none disabled:opacity-50 disabled:cursor-not-allowed"
@@ -494,6 +495,18 @@ export default function Playground({
           disabled={roomState !== ConnectionState.Disconnected}
         />
       </ConfigurationPanelItem>
+      <ConfigurationPanelItem title="Color">
+        <ColorPicker
+          colors={themeColors}
+          selectedColor={config.settings.theme_color}
+          onSelect={(color) => {
+            const userSettings = { ...config.settings };
+            userSettings.theme_color = color;
+            setUserSettings(userSettings);
+          }}
+        />
+      </ConfigurationPanelItem>
+    </>
   );
 
   const handleRpcCall = useCallback(async () => {
@@ -516,13 +529,13 @@ export default function Playground({
   const settingsTileContent = useMemo(() => {
     return (
       <div className="flex flex-col h-full w-full items-start overflow-y-auto">
-        {config.description && (
+        {/* {config.description && (
           <ConfigurationPanelItem title="Description">
             {config.description}
           </ConfigurationPanelItem>
-        )}
+        )} */}
 
-        <ConfigurationPanelItem title="Room">
+        {/* <ConfigurationPanelItem title="Room">
           <div className="flex flex-col gap-2">
             <EditableNameValueRow
               name="Room name"
@@ -556,9 +569,9 @@ export default function Playground({
               }
             />
           </div>
-        </ConfigurationPanelItem>
+        </ConfigurationPanelItem> */}
 
-        <ConfigurationPanelItem title="Agent">
+        {/* <ConfigurationPanelItem title="Agent">
           <div className="flex flex-col gap-2">
             <EditableNameValueRow
               name="Agent name"
@@ -621,9 +634,9 @@ export default function Playground({
               .
             </p>
           </div>
-        </ConfigurationPanelItem>
+        </ConfigurationPanelItem> */}
 
-        <ConfigurationPanelItem title="User">
+        {/* <ConfigurationPanelItem title="User">
           <div className="flex flex-col gap-2">
             <EditableNameValueRow
               name="Name"
@@ -675,7 +688,7 @@ export default function Playground({
               connectionState={roomState}
             />
           </div>
-        </ConfigurationPanelItem>
+        </ConfigurationPanelItem> */}
 
         {roomState === ConnectionState.Connected &&
           config.settings.inputs.screen && (
@@ -725,19 +738,6 @@ export default function Playground({
             <AudioInputTile trackRef={localMicTrack} />
           </ConfigurationPanelItem>
         )}
-        <div className="w-full">
-          <ConfigurationPanelItem title="Color">
-            <ColorPicker
-              colors={themeColors}
-              selectedColor={config.settings.theme_color}
-              onSelect={(color) => {
-                const userSettings = { ...config.settings };
-                userSettings.theme_color = color;
-                setUserSettings(userSettings);
-              }}
-            />
-          </ConfigurationPanelItem>
-        </div>
         {config.show_qr && (
           <div className="w-full">
             <ConfigurationPanelItem title="QR Code">
@@ -748,7 +748,6 @@ export default function Playground({
       </div>
     );
   }, [
-    config.description,
     config.settings,
     config.show_qr,
     localParticipant,
@@ -842,7 +841,7 @@ export default function Playground({
 
   return (
     <>
-      <PlaygroundHeader
+      {/* <PlaygroundHeader
         title={config.title}
         logo={logo}
         githubLink={config.github_link}
@@ -856,10 +855,10 @@ export default function Playground({
             handleDisconnect();
           }
         }}
-      />
+      /> */}
       <div
         className={`flex gap-4 py-4 grow w-full selection:bg-${config.settings.theme_color}-900`}
-        style={{ height: `calc(100% - ${headerHeight}px)` }}
+        style={{ height: `100%` }}
       >
         <div className="flex flex-col grow basis-1/2 gap-4 h-full lg:hidden">
           <PlaygroundTabbedTile
@@ -926,14 +925,14 @@ export default function Playground({
             </PlaygroundTile>
           </div>
         )}
-        <PlaygroundTile
+        {/* <PlaygroundTile
           padding={false}
           backgroundColor="gray-950"
           className="h-full w-full basis-1/4 items-start overflow-y-auto hidden max-w-[480px] lg:flex"
           childrenClassName="h-full grow items-start"
         >
           {settingsTileContent}
-        </PlaygroundTile>
+        </PlaygroundTile> */}
       </div>
     </>
   );

src/components/playground/PlaygroundTile.tsx

@@ -100,7 +100,18 @@ export const PlaygroundTabbedTile: React.FC<PlaygroundTabbedTileProps> = ({
           padding: `${contentPadding * 4}px`,
         }}
       >
-        {tabs[activeTab].content}
+        {tabs.map((tab, index) => (
+          <div
+            key={index}
+            style={{
+              display: index === activeTab ? 'block' : 'none',
+              height: '100%',
+              width: '100%',
+            }}
+          >
+            {tab.content}
+          </div>
+        ))}
       </div>
     </div>
   );

src/transcriptions/TranscriptionTile.tsx

@@ -11,7 +11,7 @@ import {
   Track,
   TranscriptionSegment,
 } from "livekit-client";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 
 export function TranscriptionTile({
   agentAudioTrack,
@@ -30,39 +30,51 @@ export function TranscriptionTile({
     participant: localParticipant.localParticipant,
   });
 
-  const [transcripts, setTranscripts] = useState<Map<string, ChatMessageType>>(
-    new Map(),
-  );
   const [messages, setMessages] = useState<ChatMessageType[]>([]);
   const { chatMessages, send: sendChat } = useChat();
+  const transcriptMapRef = useRef<Map<string, ChatMessageType>>(new Map());
 
-  // store transcripts
+  // Build messages from segments and chat - always rebuild from current state
   useEffect(() => {
+    const transcriptMap = transcriptMapRef.current;
+    
+    // Process agent segments - update existing or add new
     if (agentAudioTrack) {
-      agentMessages.segments.forEach((s) =>
+      agentMessages.segments.forEach((s) => {
-        transcripts.set(
+        const existing = transcriptMap.get(s.id);
+        transcriptMap.set(
           s.id,
           segmentToChatMessage(
             s,
-            transcripts.get(s.id),
+            existing,
             agentAudioTrack.participant,
           ),
-        ),
         );
+      });
     }
 
-    localMessages.segments.forEach((s) =>
+    // Process local segments - update existing or add new
-      transcripts.set(
+    localMessages.segments.forEach((s) => {
+      const existing = transcriptMap.get(s.id);
+      transcriptMap.set(
         s.id,
         segmentToChatMessage(
           s,
-          transcripts.get(s.id),
+          existing,
           localParticipant.localParticipant,
         ),
-      ),
       );
+    });
 
-    const allMessages = Array.from(transcripts.values());
+    // Build all messages
+    const allMessages: ChatMessageType[] = [];
+    
+    // Add all transcript messages
+    transcriptMap.forEach((msg) => {
+      allMessages.push(msg);
+    });
+    
+    // Add chat messages
     for (const msg of chatMessages) {
       const isAgent = agentAudioTrack
         ? msg.from?.identity === agentAudioTrack.participant?.identity
@@ -79,6 +91,7 @@ export function TranscriptionTile({
           name = "Unknown";
         }
       }
+      
       allMessages.push({
         name,
         message: msg.message,
@@ -86,10 +99,11 @@ export function TranscriptionTile({
         isSelf: isSelf,
       });
     }
+    
+    // Sort by timestamp
     allMessages.sort((a, b) => a.timestamp - b.timestamp);
     setMessages(allMessages);
   }, [
-    transcripts,
     chatMessages,
     localParticipant.localParticipant,
     agentAudioTrack?.participant,