agent-starter-pack 0.15.7__py3-none-any.whl → 0.17.0__py3-none-any.whl

{src/frontends/live_api_react → agent_starter_pack/frontends/adk_live_react}/frontend/package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "dependencies": {
     "classnames": "^2.5.1",
-    "dotenv-flow": "^4.1.0",
     "eventemitter3": "^5.0.1",
     "lodash": "^4.17.21",
     "react": "^18.3.1",
@@ -12,9 +11,6 @@
     "react-scripts": "5.0.1",
     "react-select": "^5.8.3",
     "sass": "^1.80.6",
-    "vega": "^5.33.0",
-    "vega-embed": "^6.29.0",
-    "vega-lite": "^5.22.0",
     "web-vitals": "^2.1.4",
     "zustand": "^5.0.1"
   },
@@ -41,13 +37,9 @@
     "@google/generative-ai": "^0.21.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.119",
+    "@types/lodash": "^4.17.13",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@types/lodash": "^4.17.13",
-    "ts-node": "^10.9.2",
     "typescript": "^5.6.3"
   },
   "overrides": {

{src/frontends/live_api_react → agent_starter_pack/frontends/adk_live_react}/frontend/src/App.tsx

@@ -35,7 +35,7 @@ function App() {
     <div className="App">
       <LiveAPIProvider url={serverUrl} userId={userId}>
         <div className="streaming-console">
-          <SidePanel 
+          <SidePanel
             videoRef={videoRef}
             supportsVideo={true}
             onVideoStreamChange={setVideoStream}

{src/frontends/live_api_react → agent_starter_pack/frontends/adk_live_react}/frontend/src/components/logger/Logger.tsx

@@ -115,10 +115,15 @@ const ToolCallLog = ({ message }: Message) => {
   const { toolCall } = message as ToolCallMessage;
   return (
     <div className={cn("rich-log tool-call")}>
-      {toolCall.functionCalls.map((fc, i) => (
+      <h4 className="role-tool">Tool Call</h4>
+      {toolCall.functionCalls.map((fc) => (
         <div key={fc.id} className="part part-functioncall">
-          <h5>Function call: {fc.name}</h5>
-          <pre>{JSON.stringify(fc, null, "  ")}</pre>
+          <h5>Function: {fc.name}</h5>
+          <div className="function-details">
+            <div><strong>ID:</strong> {fc.id}</div>
+            <div><strong>Args:</strong></div>
+            <pre>{JSON.stringify(fc.args, null, 2)}</pre>
+          </div>
         </div>
       ))}
     </div>

{src/frontends/live_api_react → agent_starter_pack/frontends/adk_live_react}/frontend/src/components/logger/logger.scss

@@ -35,6 +35,10 @@
     color: var(--Blue-500);
   }
 
+  .tool-call h4 {
+    color: var(--Orange-500, #ff9800);
+  }
+
   .rich-log {
     display: flex;
     justify-content: center;
@@ -66,6 +70,28 @@
       color: var(--Neutral-90);
       border-radius: 8px;
     }
+
+    .part-functioncall {
+      background: rgba(255, 152, 0, 0.1);
+      border-left: 3px solid var(--Orange-500, #ff9800);
+
+      .function-details {
+        margin-top: 8px;
+        font-size: 13px;
+
+        strong {
+          color: var(--Orange-500, #ff9800);
+        }
+
+        pre {
+          background: var(--Neutral-10);
+          padding: 8px;
+          border-radius: 4px;
+          margin: 4px 0;
+          font-size: 12px;
+        }
+      }
+    }
   }
 
   .plain-log {

{src/frontends/live_api_react → agent_starter_pack/frontends/adk_live_react}/frontend/src/components/side-panel/SidePanel.tsx

@@ -26,6 +26,7 @@ import { useWebcam } from "../../hooks/use-webcam";
 import { AudioRecorder } from "../../utils/audio-recorder";
 import AudioPulse from "../audio-pulse/AudioPulse";
 import Logger, { LoggerFilterType } from "../logger/Logger";
+import TranscriptionPreview from "../transcription-preview/TranscriptionPreview";
 import "./side-panel.scss";
 
 const filterOptions = [
@@ -256,20 +257,22 @@ function SidePanel({
   };
 
   return (
-    <div className={`side-panel ${open ? "open" : ""}`}>
-      <canvas style={{ display: "none" }} ref={renderCanvasRef} />
-      <header className="top">
+    <div className={`console-container ${open ? "open" : ""}`}>
+      <header className="console-header">
         <h2>Console</h2>
         {open ? (
-          <button className="opener" onClick={() => setOpen(false)}>
+          <button className="toggle-button" onClick={() => setOpen(!open)}>
             <RiSidebarFoldLine color="#b4b8bb" />
           </button>
         ) : (
-          <button className="opener" onClick={() => setOpen(true)}>
+          <button className="toggle-button" onClick={() => setOpen(!open)}>
             <RiSidebarUnfoldLine color="#b4b8bb" />
           </button>
         )}
       </header>
+      <div className="console-content">
+        <div className="side-panel">
+          <canvas style={{ display: "none" }} ref={renderCanvasRef} />
       
       {/* Connection Settings Section */}
       <section className="connection-settings">
@@ -503,6 +506,9 @@ function SidePanel({
           </button>
         </div>
       )}
+        </div>
+        <TranscriptionPreview open={open} />
+      </div>
     </div>
   );
 }

{src/frontends/live_api_react → agent_starter_pack/frontends/adk_live_react}/frontend/src/components/side-panel/side-panel.scss

@@ -15,7 +15,153 @@
  */
 
 /* stylelint-disable */
+.console-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  transition: all 0.2s ease-in;
+
+  .console-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 20px;
+    border-bottom: 1px solid var(--Neutral-20);
+    background: var(--Neutral-00);
+    flex-shrink: 0;
+    min-height: 38px;
+
+    h2 {
+      color: var(--Neutral-90, #e1e2e3);
+      font-family: "Google Sans";
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 16px;
+      margin: 0;
+      opacity: 0;
+      display: none;
+      transition: opacity 0.2s ease-in;
+    }
+
+    .toggle-button {
+      background: transparent;
+      border: 0;
+      cursor: pointer;
+      padding: 4px;
+      height: 30px;
+      width: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #b4b8bb;
+      flex-shrink: 0;
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+  }
+
+  .console-content {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &.open {
+    .console-header h2 {
+      display: block;
+      opacity: 1;
+    }
+
+    .side-panel {
+      width: 400px;
+    }
+  }
+
+  &:not(.open) {
+    .console-header {
+      padding: 6px 5px;
+
+      .toggle-button {
+        margin: 0 auto;
+      }
+    }
+
+    .side-panel {
+      width: 40px;
+
+      .side-panel-container {
+        opacity: 0;
+        display: none;
+        transition: all 0.2s ease-in allow-discrete;
+        transition-delay: 0.1s;
+      }
+
+      .connection-settings {
+        opacity: 0;
+        display: none;
+        transition: all 0.2s ease-in allow-discrete;
+      }
+
+      .control-tray {
+        opacity: 0;
+        display: none;
+        transition: all 0.2s ease-in allow-discrete;
+
+        .actions-nav {
+          opacity: 0;
+          display: none;
+        }
+
+        .connection-status {
+          opacity: 0;
+          display: none;
+        }
+      }
+
+      .indicators {
+        .react-select {
+          opacity: 0;
+          display: none;
+          transition: all 0.2s ease-in allow-discrete;
+        }
+
+        .streaming-indicator {
+          width: 30px;
+          opacity: 0;
+        }
+      }
+
+      .input-container {
+        opacity: 0;
+        display: none;
+        transition: all 0.2s ease-in allow-discrete;
+      }
+
+      .audio-pulse-bottom {
+        .pulse-container {
+          .pulse-label {
+            opacity: 0;
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
 .side-panel {
+  width: 400px;
+  transition: width 0.2s ease-in;
+
   .react-select {
     background: var(--Neutral-20);
     color: var(--Neutral-90);
@@ -47,7 +193,6 @@
     }
   }
   background: var(--Neutral-00);
-  width: 40px; /* when closed */
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -65,116 +210,6 @@
     display: none !important;
   }
 
-  &.open {
-    .top {
-      h2 {
-        left: 0%;
-        display: block;
-        opacity: 1;
-      }
-    }
-  }
-
-  .top {
-    display: flex;
-    width: calc(100% - 45px);
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 20px 12px 25px;
-    border-bottom: 1px solid var(--Neutral-20);
-
-    h2 {
-      position: relative;
-      color: var(--Neutral-90, #e1e2e3);
-      font-family: "Google Sans";
-      font-size: 21px;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 16px; /* 100% */
-
-      opacity: 0;
-      display: none;
-      left: -100%;
-      transition:
-        opacity 0.2s ease-in,
-        left 0.2s ease-in,
-        display 0.2s ease-in;
-      transition-behavior: allow-discrete;
-
-      @starting-style {
-        left: 0%;
-        opacity: 1;
-      }
-    }
-  }
-
-  .opener {
-    height: 30px;
-    transition: transform 0.2s ease-in;
-  }
-
-  &:not(.open) {
-    .side-panel-container {
-      opacity: 0;
-      display: none;
-      transition: all 0.2s ease-in allow-discrete;
-      transition-delay: 0.1s;
-    }
-
-    .connection-settings {
-      opacity: 0;
-      display: none;
-      transition: all 0.2s ease-in allow-discrete;
-    }
-
-    .control-tray {
-      opacity: 0;
-      display: none;
-      transition: all 0.2s ease-in allow-discrete;
-      
-      .actions-nav {
-        opacity: 0;
-        display: none;
-      }
-      
-      .connection-status {
-        opacity: 0;
-        display: none;
-      }
-    }
-
-    .indicators {
-      .react-select {
-        opacity: 0;
-        display: none;
-        transition: all 0.2s ease-in allow-discrete;
-      }
-      
-      .streaming-indicator {
-        width: 30px;
-        opacity: 0;
-      }
-    }
-
-    .opener {
-      transform: translate(-50%, 0);
-    }
-
-    .input-container {
-      opacity: 0;
-      display: none;
-      transition: all 0.2s ease-in allow-discrete;
-    }
-
-    .audio-pulse-bottom {
-      .pulse-container {
-        .pulse-label {
-          opacity: 0;
-          display: none;
-        }
-      }
-    }
-  }
 
   .indicators {
     display: flex;
@@ -496,10 +531,6 @@
     }
   }
 }
-.side-panel.open {
-  width: 400px;
-  height: 100vh;
-}
 
 .side-panel-responses,
 .side-panel-requests {

agent_starter_pack/frontends/adk_live_react/frontend/src/components/transcription-preview/TranscriptionPreview.tsx

@@ -0,0 +1,106 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { useLiveAPIContext } from "../../contexts/LiveAPIContext";
+import cn from "classnames";
+import "./transcription-preview.scss";
+
+export type TranscriptionPreviewProps = {
+  open: boolean;
+};
+
+export default function TranscriptionPreview({ open }: TranscriptionPreviewProps) {
+  const { client } = useLiveAPIContext();
+  const [inputTexts, setInputTexts] = useState<string[]>([]);
+  const [outputTexts, setOutputTexts] = useState<string[]>([]);
+  const inputRef = useRef<HTMLDivElement>(null);
+  const outputRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleInputTranscription = (text: string) => {
+      setInputTexts((prev) => [...prev, text]);
+      // Auto-scroll to bottom
+      setTimeout(() => {
+        if (inputRef.current) {
+          inputRef.current.scrollTop = inputRef.current.scrollHeight;
+        }
+      }, 0);
+    };
+
+    const handleOutputTranscription = (text: string) => {
+      setOutputTexts((prev) => [...prev, text]);
+      // Auto-scroll to bottom
+      setTimeout(() => {
+        if (outputRef.current) {
+          outputRef.current.scrollTop = outputRef.current.scrollHeight;
+        }
+      }, 0);
+    };
+
+    client.on("inputtranscription", handleInputTranscription);
+    client.on("outputtranscription", handleOutputTranscription);
+
+    return () => {
+      client.off("inputtranscription", handleInputTranscription);
+      client.off("outputtranscription", handleOutputTranscription);
+    };
+  }, [client]);
+
+  return (
+    <div className={cn("transcription-preview", { open })}>
+      <div className="transcription-section input-section">
+        <div className="transcription-header">
+          <span className="material-symbols-outlined">mic</span>
+          <h3>Input</h3>
+        </div>
+        <div className="transcription-content" ref={inputRef}>
+          {inputTexts.length > 0 ? (
+            <>
+              {inputTexts.map((text, index) => (
+                <p key={index} className={index === inputTexts.length - 1 ? "current" : "previous"}>
+                  {text}
+                </p>
+              ))}
+            </>
+          ) : (
+            <p className="placeholder">Listening...</p>
+          )}
+        </div>
+      </div>
+
+      <div className="transcription-section output-section">
+        <div className="transcription-header">
+          <span className="material-symbols-outlined">volume_up</span>
+          <h3>Output</h3>
+        </div>
+        <div className="transcription-content" ref={outputRef}>
+          {outputTexts.length > 0 ? (
+            <>
+              {outputTexts.map((text, index) => (
+                <p key={index} className={index === outputTexts.length - 1 ? "current" : "previous"}>
+                  {text}
+                </p>
+              ))}
+            </>
+          ) : (
+            <p className="placeholder">Waiting for response...</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

agent_starter_pack/frontends/adk_live_react/frontend/src/components/transcription-preview/transcription-preview.scss

@@ -0,0 +1,150 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.transcription-preview {
+  width: 0;
+  height: 100%;
+  background: var(--Neutral-00);
+  border-left: 1px solid var(--Neutral-20);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
+  transition: width 0.2s ease-in-out;
+  flex-shrink: 0;
+
+  &.open {
+    width: 300px;
+  }
+
+  .transcription-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out 0.1s;
+
+    &:first-child {
+      border-bottom: 1px solid var(--Neutral-20);
+    }
+
+    .transcription-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 20px;
+      background: var(--Neutral-05);
+      border-bottom: 1px solid var(--Neutral-20);
+      flex-shrink: 0;
+
+      .material-symbols-outlined {
+        font-size: 20px;
+        color: var(--Neutral-70);
+      }
+
+      h3 {
+        margin: 0;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--Neutral-90);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+    }
+
+    .transcription-content {
+      flex: 1;
+      padding: 12px 16px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      word-wrap: break-word;
+
+      p {
+        margin: 0 0 12px 0;
+        color: var(--Neutral-90);
+        font-size: 13px;
+        line-height: 1.5;
+        white-space: pre-wrap;
+        word-break: break-word;
+        font-family: var(--font-family);
+
+        &.placeholder {
+          color: var(--Neutral-50);
+          font-style: italic;
+        }
+
+        &.previous {
+          color: var(--Neutral-60);
+          opacity: 0.7;
+        }
+
+        &.current {
+          color: var(--Neutral-90);
+          font-weight: 500;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  &.open .transcription-section {
+    opacity: 1;
+  }
+
+  .input-section {
+    .transcription-header {
+      .material-symbols-outlined {
+        color: var(--Green-500);
+      }
+
+      h3 {
+        color: var(--Green-500);
+      }
+    }
+
+    .transcription-content {
+      background: linear-gradient(
+        to bottom,
+        rgba(0, 200, 100, 0.02),
+        transparent
+      );
+    }
+  }
+
+  .output-section {
+    .transcription-header {
+      .material-symbols-outlined {
+        color: var(--Blue-500);
+      }
+
+      h3 {
+        color: var(--Blue-500);
+      }
+    }
+
+    .transcription-content {
+      background: linear-gradient(
+        to bottom,
+        rgba(0, 100, 255, 0.02),
+        transparent
+      );
+    }
+  }
+}