agent-starter-pack 0.0.1b0__py3-none-any.whl

src/frontends/live_api_react/frontend/src/components/logger/logger.scss

@@ -0,0 +1,133 @@
+/**
+ * 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 */
+.logger {
+  color: var(--gray-300);
+  width: 100%;
+  max-width: 100%;
+  display: block;
+
+  .logger-list {
+    padding: 0 0px 0 25px;
+    overflow-x: hidden;
+    width: calc(100% - 45px);
+  }
+
+  .user h4 {
+    color: var(--Green-500);
+  }
+
+  .model h4 {
+    color: var(--Blue-500);
+  }
+
+  .rich-log {
+    display: flex;
+    justify-content: center;
+    gap: 4px;
+
+    pre {
+      overflow-x: auto;
+    }
+
+    display: block;
+
+    h4 {
+      font-size: 14px;
+      text-transform: uppercase;
+      padding: 8px 0;
+      margin: 0;
+    }
+
+    h5 {
+      margin: 0;
+      padding-bottom: 8px;
+      border-bottom: 1px solid var(--Neutral-20);
+    }
+
+    .part {
+      background: var(--Neutral-5);
+      padding: 14px;
+      margin-bottom: 4px;
+      color: var(--Neutral-90);
+      border-radius: 8px;
+    }
+  }
+
+  .plain-log {
+    & > * {
+      padding-right: 4px;
+    }
+  }
+
+  .inline-code:not(:last-child) {
+    font-style: italic;
+
+    &::after {
+      content: ", ";
+    }
+  }
+}
+
+.logger li {
+  display: block;
+  padding: 8px 0;
+  color: var(--Neutral-50, #707577);
+  font-family: "Space Mono";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.logger li .timestamp {
+  width: 70px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  color: var(--Neutral-50);
+}
+
+.logger li .source {
+  flex-shrink: 0;
+  font-weight: bold;
+}
+
+.logger li.source-server,
+.logger li.receive {
+  color: var(--Blue-500);
+}
+
+.logger li.source-client,
+.logger li.send:not(.source-server) {
+  color: var(--Green-500);
+}
+
+.logger li .count {
+  background-color: var(--Neutral-5);
+  font-size: x-small;
+  padding: 0em 0.6em;
+  padding: 0.3em 0.5em;
+  line-height: 1em;
+  vertical-align: middle;
+  border-radius: 8px;
+  color: var(--Blue-500);
+}
+
+.logger li .message {
+  flex-grow: 1;
+  color: var(--Neutral-50);
+}

src/frontends/live_api_react/frontend/src/components/logger/mock-logs.ts

@@ -0,0 +1,151 @@
+/**
+ * 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.
+ */
+
+/**
+ * this module is just mock data, intended to make it easier to develop and style the logger
+ */
+import type { StreamingLog } from "../../multimodal-live-types";
+
+const soundLogs = (n: number): StreamingLog[] =>
+  new Array(n).fill(0).map(
+    (): StreamingLog => ({
+      date: new Date(),
+      type: "server.audio",
+      message: "buffer (11250)",
+    }),
+  );
+//
+const realtimeLogs = (n: number): StreamingLog[] =>
+  new Array(n).fill(0).map(
+    (): StreamingLog => ({
+      date: new Date(),
+      type: "client.realtimeInput",
+      message: "audio",
+    }),
+  );
+
+export const mockLogs: StreamingLog[] = [
+  {
+    date: new Date(),
+    type: "client.open",
+    message: "connected to socket",
+  },
+  ...realtimeLogs(10),
+  ...soundLogs(10),
+  {
+    date: new Date(),
+    type: "receive.content",
+    message: {
+      serverContent: {
+        interrupted: true,
+      },
+    },
+  },
+  {
+    date: new Date(),
+    type: "receive.content",
+    message: {
+      serverContent: {
+        turnComplete: true,
+      },
+    },
+  },
+  //this one is just a string
+  // {
+  //   date: new Date(),
+  //   type: "server.send",
+  //   message: {
+  //     serverContent: {
+  //       turnComplete: true,
+  //     },
+  //   },
+  // },
+  ...realtimeLogs(10),
+  ...soundLogs(20),
+  {
+    date: new Date(),
+    type: "receive.content",
+    message: {
+      serverContent: {
+        modelTurn: {
+          parts: [{ text: "Hey its text" }, { text: "more" }],
+        },
+      },
+    },
+  },
+  {
+    date: new Date(),
+    type: "client.send",
+    message: {
+      clientContent: {
+        turns: [
+          {
+            role: "User",
+            parts: [
+              {
+                text: "How much wood could a woodchuck chuck if a woodchuck could chuck wood",
+              },
+            ],
+          },
+        ],
+        turnComplete: true,
+      },
+    },
+  },
+  {
+    date: new Date(),
+    type: "server.toolCall",
+    message: {
+      toolCall: {
+        functionCalls: [
+          {
+            id: "akadjlasdfla-askls",
+            name: "take_photo",
+            args: {},
+          },
+          {
+            id: "akldjsjskldsj-102",
+            name: "move_camera",
+            args: { x: 20, y: 4 },
+          },
+        ],
+      },
+    },
+  },
+  {
+    date: new Date(),
+    type: "server.toolCallCancellation",
+    message: {
+      toolCallCancellation: {
+        ids: ["akladfjadslfk", "adkafsdljfsdk"],
+      },
+    },
+  },
+  {
+    date: new Date(),
+    type: "client.toolResponse",
+    message: {
+      toolResponse: {
+        functionResponses: [
+          {
+            response: { success: true },
+            id: "akslaj-10102",
+          },
+        ],
+      },
+    },
+  },
+];

src/frontends/live_api_react/frontend/src/components/side-panel/SidePanel.tsx

@@ -0,0 +1,161 @@
+/**
+ * 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 cn from "classnames";
+import { useEffect, useRef, useState } from "react";
+import { RiSidebarFoldLine, RiSidebarUnfoldLine } from "react-icons/ri";
+import Select from "react-select";
+import { useLiveAPIContext } from "../../contexts/LiveAPIContext";
+import { useLoggerStore } from "../../utils/store-logger";
+import Logger, { LoggerFilterType } from "../logger/Logger";
+import "./side-panel.scss";
+
+const filterOptions = [
+  { value: "conversations", label: "Conversations" },
+  { value: "tools", label: "Tool Use" },
+  { value: "none", label: "All" },
+];
+
+export default function SidePanel() {
+  const { connected, client } = useLiveAPIContext();
+  const [open, setOpen] = useState(true);
+  const loggerRef = useRef<HTMLDivElement>(null);
+  const loggerLastHeightRef = useRef<number>(-1);
+  const { log, logs } = useLoggerStore();
+
+  const [textInput, setTextInput] = useState("");
+  const [selectedOption, setSelectedOption] = useState<{
+    value: string;
+    label: string;
+  } | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  //scroll the log to the bottom when new logs come in
+  useEffect(() => {
+    if (loggerRef.current) {
+      const el = loggerRef.current;
+      const scrollHeight = el.scrollHeight;
+      if (scrollHeight !== loggerLastHeightRef.current) {
+        el.scrollTop = scrollHeight;
+        loggerLastHeightRef.current = scrollHeight;
+      }
+    }
+  }, [logs]);
+
+  // listen for log events and store them
+  useEffect(() => {
+    client.on("log", log);
+    return () => {
+      client.off("log", log);
+    };
+  }, [client, log]);
+
+  const handleSubmit = () => {
+    client.send([{ text: textInput }]);
+
+    setTextInput("");
+    if (inputRef.current) {
+      inputRef.current.innerText = "";
+    }
+  };
+
+  return (
+    <div className={`side-panel ${open ? "open" : ""}`}>
+      <header className="top">
+        <h2>Console</h2>
+        {open ? (
+          <button className="opener" onClick={() => setOpen(false)}>
+            <RiSidebarFoldLine color="#b4b8bb" />
+          </button>
+        ) : (
+          <button className="opener" onClick={() => setOpen(true)}>
+            <RiSidebarUnfoldLine color="#b4b8bb" />
+          </button>
+        )}
+      </header>
+      <section className="indicators">
+        <Select
+          className="react-select"
+          classNamePrefix="react-select"
+          styles={{
+            control: (baseStyles) => ({
+              ...baseStyles,
+              background: "var(--Neutral-15)",
+              color: "var(--Neutral-90)",
+              minHeight: "33px",
+              maxHeight: "33px",
+              border: 0,
+            }),
+            option: (styles, { isFocused, isSelected }) => ({
+              ...styles,
+              backgroundColor: isFocused
+                ? "var(--Neutral-30)"
+                : isSelected
+                  ? "var(--Neutral-20)"
+                  : undefined,
+            }),
+          }}
+          defaultValue={selectedOption}
+          options={filterOptions}
+          onChange={(e) => {
+            setSelectedOption(e);
+          }}
+        />
+        <div className={cn("streaming-indicator", { connected })}>
+          {connected
+            ? `🔵${open ? " Streaming" : ""}`
+            : `⏸️${open ? " Paused" : ""}`}
+        </div>
+      </section>
+      <div className="side-panel-container" ref={loggerRef}>
+        <Logger
+          filter={(selectedOption?.value as LoggerFilterType) || "none"}
+        />
+      </div>
+      <div className={cn("input-container", { disabled: !connected })}>
+        <div className="input-content">
+          <textarea
+            className="input-area"
+            ref={inputRef}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                e.stopPropagation();
+                handleSubmit();
+              }
+            }}
+            onChange={(e) => setTextInput(e.target.value)}
+            value={textInput}
+          ></textarea>
+          <span
+            className={cn("input-content-placeholder", {
+              hidden: textInput.length,
+            })}
+          >
+            Type&nbsp;something...
+          </span>
+
+          <button
+            className="send-button material-symbols-outlined filled"
+            onClick={handleSubmit}
+          >
+            send
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/frontends/live_api_react/frontend/src/components/side-panel/side-panel.scss

@@ -0,0 +1,285 @@
+/**
+ * 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 */
+.side-panel {
+  .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);
+  width: 40px; /* when closed */
+  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;
+  }
+
+  &.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;
+    }
+
+    .indicators .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;
+    }
+  }
+
+  .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;*/
+  }
+
+  .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.open {
+  width: 400px;
+  height: 100vh;
+}
+
+.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;
+}