agent-starter-pack 0.3.3__py3-none-any.whl → 0.21.0__py3-none-any.whl

agent_starter_pack/frontends/adk_live_react/frontend/src/components/side-panel/side-panel.scss

@@ -0,0 +1,563 @@
+/**
+ * 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.
+ */
+
+/* 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);
+    width: 193px;
+    height: 30px;
+
+    .react-select__single-value {
+      color: var(--Neutral-90);
+    }
+
+    .react-select__menu {
+      background: var(--Neutral-20);
+      color: var(--Neutral-90);
+    }
+
+    .react-select__option {
+    }
+    .react-select__value-container {
+    }
+    .react-select__indicators {
+    }
+    .react-select__option:hover,
+    .react-select__option:focus,
+    .react-select_option:focus-within {
+      background: var(--Neutral-30);
+    }
+    .react-select__option--is-focused: {
+      background: var(--Neutral-30);
+    }
+  }
+  background: var(--Neutral-00);
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  transition: all 0.2s ease-in;
+  font-family: Arial, sans-serif;
+  border-right: 1px solid var(--gray-600);
+  color: var(--Neutral-90, #e1e2e3);
+  font-family: var(--font-family);
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%; /* 20.8px */
+
+  .hidden {
+    display: none !important;
+  }
+
+
+  .indicators {
+    display: flex;
+    padding: 24px 25px;
+    justify-content: flex-end;
+    gap: 21px;
+    .streaming-indicator {
+      user-select: none;
+      border-radius: 4px;
+      border: 1px solid var(--Neutral-20, #2a2f31);
+      background: var(--Neutral-10, #1c1f21);
+      display: flex;
+      width: 136px;
+      height: 30px;
+      padding-left: 4px;
+      justify-content: center;
+      align-items: center;
+      gap: 6px;
+      flex-shrink: 0;
+      text-align: center;
+      font-family: "Space Mono";
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      transition: width 0.2s ease-in;
+
+      &.connected {
+        color: var(--Blue-500, #0d9c53);
+      }
+    }
+  }
+
+  .side-panel-container {
+    align-self: flex-end;
+    width: 400px;
+    flex-grow: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    /*scrollbar-gutter: stable both-edges;*/
+  }
+
+  .connection-settings {
+    border-bottom: 1px solid var(--Neutral-20);
+    
+    .connection-expander {
+      background: var(--Neutral-10);
+      border: none;
+      color: var(--Neutral-90);
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      padding: 12px 25px;
+      width: 100%;
+      text-align: left;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      &:hover {
+        background: var(--Neutral-15);
+      }
+      
+      span {
+        font-size: 12px;
+      }
+    }
+    
+    .connection-content {
+      padding: 0 25px 12px;
+      background: var(--Neutral-05);
+      
+      .setting-group {
+        margin-bottom: 12px;
+        
+        label {
+          display: block;
+          color: var(--Neutral-80);
+          font-size: 13px;
+          margin-bottom: 4px;
+        }
+        
+        .setting-input {
+          width: 100%;
+          background: var(--Neutral-15);
+          border: 1px solid var(--Neutral-20);
+          border-radius: 4px;
+          color: var(--Neutral-90);
+          font-size: 13px;
+          padding: 8px 12px;
+          
+          &:focus {
+            outline: none;
+            border-color: var(--Blue-500);
+          }
+        }
+      }
+      
+      .feedback-button {
+        background: var(--Neutral-20);
+        border: 1px solid var(--Neutral-30);
+        border-radius: 4px;
+        color: var(--Neutral-90);
+        cursor: pointer;
+        font-size: 13px;
+        padding: 8px 16px;
+        
+        &:hover {
+          background: var(--Neutral-25);
+        }
+      }
+    }
+  }
+
+  .control-tray {
+    border-bottom: 1px solid var(--Neutral-20);
+    padding: 12px 25px;
+
+    .actions-nav {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      margin-bottom: 8px;
+
+      .action-button {
+        background: var(--Neutral-15);
+        border: 1px solid var(--Neutral-20);
+        border-radius: 8px;
+        color: var(--Neutral-70);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 40px;
+        width: 40px;
+        transition: all 0.2s ease;
+
+        &:hover {
+          background: var(--Neutral-20);
+          color: var(--Neutral-90);
+        }
+
+        &.connect-toggle {
+          background: var(--Blue-600);
+          border-color: var(--Blue-600);
+          color: white;
+          
+          &:hover {
+            background: var(--Blue-700);
+          }
+          
+          &.connected {
+            background: var(--Red-600);
+            border-color: var(--Red-600);
+            
+            &:hover {
+              background: var(--Red-700);
+            }
+          }
+        }
+
+        &.mic-button {
+          &:hover {
+            color: var(--Blue-500);
+          }
+        }
+
+        // Active state for buttons when they're "on"
+        &.active {
+          background: var(--Blue-600) !important;
+          border-color: var(--Blue-600) !important;
+          color: white !important;
+          
+          &:hover {
+            background: var(--Blue-700) !important;
+            border-color: var(--Blue-700) !important;
+          }
+        }
+
+        &.no-action {
+          cursor: default;
+          border-style: dashed;
+          
+          &:hover {
+            background: var(--Neutral-15);
+            color: var(--Neutral-70);
+          }
+        }
+
+        .material-symbols-outlined {
+          font-size: 20px;
+        }
+      }
+
+      &.disabled .action-button:not(.connect-toggle) {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+        
+        &:hover {
+          background: var(--Neutral-15);
+          color: var(--Neutral-70);
+        }
+      }
+      
+      // Ensure connect button is always clickable
+      .action-button.connect-toggle {
+        pointer-events: auto !important;
+        cursor: pointer !important;
+      }
+    }
+
+    .connection-status {
+      display: flex;
+      justify-content: center;
+
+      .text-indicator {
+        color: var(--Neutral-60);
+        font-size: 12px;
+        font-weight: 500;
+        
+        &.connected {
+          color: var(--Blue-500);
+        }
+      }
+    }
+  }
+
+  .audio-pulse-bottom {
+    border-top: 1px solid var(--Neutral-20);
+    padding: 12px 25px;
+    flex-shrink: 0;
+    background: var(--Neutral-05);
+
+    .pulse-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+
+      .pulse-label {
+        color: var(--Neutral-80);
+        font-size: 12px;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+    }
+  }
+
+  .input-container {
+    height: 50px;
+    flex-grow: 0;
+    flex-shrink: 0;
+    border-top: 1px solid var(--Neutral-20);
+    padding: 14px 25px;
+    overflow: hidden;
+
+    .input-content {
+      position: relative;
+      background: var(--Neutral-10);
+      border: 1px solid var(--Neutral-15);
+      height: 22px;
+      border-radius: 10px;
+      padding: 11px 18px;
+
+      .send-button {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translate(0, -50%);
+        background: none;
+        border: 0;
+        color: var(--Neutral-20);
+        cursor: pointer;
+        transition: color 0.1s ease-in;
+        z-index: 2;
+
+        &:hover {
+          color: var(--Neutral-60);
+        }
+      }
+
+      .input-area {
+        background: none;
+        color: var(--Neutral-90);
+        field-sizing: content;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        display: inline-block;
+        width: calc(100% - 72px);
+        max-height: 20px;
+        outline: none;
+        --webkit-box-flex: 1;
+        flex: 1;
+        word-break: break-word;
+        overflow: auto;
+        padding: 14px 18px;
+        border: 0;
+        resize: none;
+      }
+
+      .input-content-placeholder {
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: flex;
+        align-items: center;
+        z-index: 1;
+        height: 100%;
+        width: 100%;
+        pointer-events: none;
+        user-select: none;
+        padding: 0px 18px;
+        white-space: pre-wrap;
+      }
+    }
+  }
+}
+
+.side-panel-responses,
+.side-panel-requests {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+  display: block;
+  margin-left: 8px;
+}
+
+.top {
+  width: 100%;
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: 30px;
+  display: flex;
+  align-self: flex-end;
+  align-items: center;
+  transition: all 0.2s ease-in;
+}
+.top button {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  padding: 4px;
+}

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>
+  );
+}