Merge branch 'phone-interface'

2025-12-17 11:36:58 +08:00 · 2025-12-17 11:36:58 +08:00 · a6b98e4100
commit a6b98e4100
parent 48cb450208 800aa700f9
5 changed files with 104 additions and 65 deletions
--- a/agents/my_basic_agent_1_2_9.py
+++ b/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(
--- a/src/components/playground/PhoneSimulator.tsx
+++ b/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>
          )
--- a/src/components/playground/Playground.tsx
+++ b/src/components/playground/Playground.tsx
@ -479,21 +479,34 @@ 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"
-        style={{ minHeight: "80px" }}
-        rows={3}
-        placeholder="Enter system instructions for the agent..."
-        value={config.settings.instructions}
-        onChange={(e) => {
-          const newSettings = { ...config.settings };
-          newSettings.instructions = e.target.value;
-          setUserSettings(newSettings);
-        }}
-        disabled={roomState !== ConnectionState.Disconnected}
-      />
-    </ConfigurationPanelItem>
+    <>
+      <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"
+          style={{ minHeight: "80px" }}
+          rows={3}
+          placeholder="Enter system instructions for the agent..."
+          value={config.settings.instructions}
+          onChange={(e) => {
+            const newSettings = { ...config.settings };
+            newSettings.instructions = e.target.value;
+            setUserSettings(newSettings);
+          }}
+          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>
    </>
  );
--- a/src/components/playground/PlaygroundTile.tsx
+++ b/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>
  );
--- a/src/transcriptions/TranscriptionTile.tsx
+++ b/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) =>
-        transcripts.set(
+      agentMessages.segments.forEach((s) => {
+        const existing = transcriptMap.get(s.id);
+        transcriptMap.set(
          s.id,
          segmentToChatMessage(
            s,
-            transcripts.get(s.id),
+            existing,
            agentAudioTrack.participant,
          ),
-        ),
-      );
+        );
+      });
    }

-    localMessages.segments.forEach((s) =>
-      transcripts.set(
+    // Process local segments - update existing or add new
+    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,