@autobe/ui 0.29.2 → 0.30.0-dev.20260315

package/src/context/SearchParamsContext.tsx

@@ -1,49 +1,49 @@
-import {
-  ReactNode,
-  createContext,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
-
-interface SearchParamsContextType {
-  searchParams: URLSearchParams;
-  setSearchParams: React.Dispatch<React.SetStateAction<URLSearchParams>>;
-}
-
-const SearchParamsContext = createContext<SearchParamsContextType | null>(null);
-
-export function SearchParamsProvider({ children }: { children: ReactNode }) {
-  const [searchParams, setSearchParams] = useState<URLSearchParams>(
-    new URLSearchParams(window.location.search),
-  );
-
-  useEffect(() => {
-    const url = new URL(`${window.location.origin}${window.location.pathname}`);
-    searchParams.forEach((value, key) => {
-      url.searchParams.set(key, value);
-    });
-    window.history.pushState({}, "", url);
-  }, [searchParams]);
-
-  return (
-    <SearchParamsContext
-      value={{
-        searchParams,
-        setSearchParams,
-      }}
-    >
-      {children}
-    </SearchParamsContext>
-  );
-}
-
-export function useSearchParams() {
-  const context = useContext(SearchParamsContext);
-  if (!context) {
-    throw new Error(
-      "useSearchParams must be used within a SearchParamsProvider",
-    );
-  }
-  return context;
-}
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+interface SearchParamsContextType {
+  searchParams: URLSearchParams;
+  setSearchParams: React.Dispatch<React.SetStateAction<URLSearchParams>>;
+}
+
+const SearchParamsContext = createContext<SearchParamsContextType | null>(null);
+
+export function SearchParamsProvider({ children }: { children: ReactNode }) {
+  const [searchParams, setSearchParams] = useState<URLSearchParams>(
+    new URLSearchParams(window.location.search),
+  );
+
+  useEffect(() => {
+    const url = new URL(`${window.location.origin}${window.location.pathname}`);
+    searchParams.forEach((value, key) => {
+      url.searchParams.set(key, value);
+    });
+    window.history.pushState({}, "", url);
+  }, [searchParams]);
+
+  return (
+    <SearchParamsContext
+      value={{
+        searchParams,
+        setSearchParams,
+      }}
+    >
+      {children}
+    </SearchParamsContext>
+  );
+}
+
+export function useSearchParams() {
+  const context = useContext(SearchParamsContext);
+  if (!context) {
+    throw new Error(
+      "useSearchParams must be used within a SearchParamsProvider",
+    );
+  }
+  return context;
+}

package/src/hooks/index.ts

@@ -1,3 +1,3 @@
-export * from "./useEscapeKey";
-export * from "./useIsomorphicLayoutEffect";
-export * from "./useMediaQuery";
+export * from "./useEscapeKey";
+export * from "./useIsomorphicLayoutEffect";
+export * from "./useMediaQuery";

package/src/hooks/useEscapeKey.ts

@@ -1,24 +1,24 @@
-import { useEffect } from "react";
-
-/**
- * Hook to handle ESC key press to close modal or overlay
- *
- * @param isOpen - Whether the modal/overlay is open
- * @param onClose - Callback function to close the modal/overlay
- */
-export const useEscapeKey = (isOpen: boolean, onClose: () => void): void => {
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape" && isOpen) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener("keydown", handleKeyDown);
-      return () => {
-        document.removeEventListener("keydown", handleKeyDown);
-      };
-    }
-  }, [isOpen, onClose]);
-};
+import { useEffect } from "react";
+
+/**
+ * Hook to handle ESC key press to close modal or overlay
+ *
+ * @param isOpen - Whether the modal/overlay is open
+ * @param onClose - Callback function to close the modal/overlay
+ */
+export const useEscapeKey = (isOpen: boolean, onClose: () => void): void => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [isOpen, onClose]);
+};

package/src/hooks/useIsomorphicLayoutEffect.ts

@@ -1,8 +1,8 @@
-/**
- * From usehooks-ts
- * https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
- */
-import { useEffect, useLayoutEffect } from "react";
-
-export const useIsomorphicLayoutEffect =
-  typeof window !== "undefined" ? useLayoutEffect : useEffect;
+/**
+ * From usehooks-ts
+ * https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
+ */
+import { useEffect, useLayoutEffect } from "react";
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;

package/src/hooks/useMediaQuery.ts

@@ -1,73 +1,73 @@
-/** From usehooks-ts https://usehooks-ts.com/react-hook/use-media-query */
-import { useState } from "react";
-
-import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
-
-type UseMediaQueryOptions = {
-  defaultValue?: boolean;
-  initializeWithValue?: boolean;
-};
-
-const IS_SERVER = typeof window === "undefined";
-
-export function useMediaQuery(
-  query: string,
-  {
-    defaultValue = false,
-    initializeWithValue = true,
-  }: UseMediaQueryOptions = {},
-): boolean {
-  const getMatches = (query: string): boolean => {
-    if (IS_SERVER) {
-      return defaultValue;
-    }
-    return window.matchMedia(query).matches;
-  };
-
-  const [matches, setMatches] = useState<boolean>(() => {
-    if (initializeWithValue) {
-      return getMatches(query);
-    }
-    return defaultValue;
-  });
-
-  // Handles the change event of the media query.
-  function handleChange() {
-    setMatches(getMatches(query));
-  }
-
-  useIsomorphicLayoutEffect(() => {
-    const matchMedia = window.matchMedia(query);
-
-    // Triggered at the first client-side load and if query changes
-    handleChange();
-
-    // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
-    if (matchMedia.addListener) {
-      matchMedia.addListener(handleChange);
-    } else {
-      matchMedia.addEventListener("change", handleChange);
-    }
-
-    return () => {
-      if (matchMedia.removeListener) {
-        matchMedia.removeListener(handleChange);
-      } else {
-        matchMedia.removeEventListener("change", handleChange);
-      }
-    };
-  }, [query]);
-
-  return matches;
-}
-
-export namespace useMediaQuery {
-  export const WIDTH_XL = "80rem";
-  export const WIDTH_LG = "64rem";
-  export const WIDTH_MD = "48rem";
-  export const WIDTH_SM = "40rem";
-  export const MIN_WIDTH_XL = `(min-width: ${WIDTH_XL})`;
-  export const MIN_WIDTH_LG = `(min-width: ${WIDTH_LG})`;
-  export const MIN_WIDTH_MD = `(min-width: ${WIDTH_MD})`;
-  export const MIN_WIDTH_SM = `(min-width: ${WIDTH_SM})`;
-}
+/** From usehooks-ts https://usehooks-ts.com/react-hook/use-media-query */
+import { useState } from "react";
+
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+
+type UseMediaQueryOptions = {
+  defaultValue?: boolean;
+  initializeWithValue?: boolean;
+};
+
+const IS_SERVER = typeof window === "undefined";
+
+export function useMediaQuery(
+  query: string,
+  {
+    defaultValue = false,
+    initializeWithValue = true,
+  }: UseMediaQueryOptions = {},
+): boolean {
+  const getMatches = (query: string): boolean => {
+    if (IS_SERVER) {
+      return defaultValue;
+    }
+    return window.matchMedia(query).matches;
+  };
+
+  const [matches, setMatches] = useState<boolean>(() => {
+    if (initializeWithValue) {
+      return getMatches(query);
+    }
+    return defaultValue;
+  });
+
+  // Handles the change event of the media query.
+  function handleChange() {
+    setMatches(getMatches(query));
+  }
+
+  useIsomorphicLayoutEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    // Triggered at the first client-side load and if query changes
+    handleChange();
+
+    // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange);
+    } else {
+      matchMedia.addEventListener("change", handleChange);
+    }
+
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange);
+      } else {
+        matchMedia.removeEventListener("change", handleChange);
+      }
+    };
+  }, [query]);
+
+  return matches;
+}
+
+export namespace useMediaQuery {
+  export const WIDTH_XL = "80rem";
+  export const WIDTH_LG = "64rem";
+  export const WIDTH_MD = "48rem";
+  export const WIDTH_SM = "40rem";
+  export const MIN_WIDTH_XL = `(min-width: ${WIDTH_XL})`;
+  export const MIN_WIDTH_LG = `(min-width: ${WIDTH_LG})`;
+  export const MIN_WIDTH_MD = `(min-width: ${WIDTH_MD})`;
+  export const MIN_WIDTH_SM = `(min-width: ${WIDTH_SM})`;
+}

package/src/hooks/useSessionStorage.ts

@@ -0,0 +1,10 @@
+export const useSessionStorage = () => {
+  return {
+    getItem: (key: string): string => {
+      return sessionStorage.getItem(key) ?? "";
+    },
+    setItem: (key: string, value: string): void => {
+      sessionStorage.setItem(key, value);
+    },
+  };
+};

package/src/icons/Receipt.tsx

@@ -1,74 +1,74 @@
-import { COLORS } from "../constant/color";
-
-/** Props interface for ReceiptIcon component */
-interface IReceiptIconProps {
-  /** Width of the icon */
-  width?: number;
-  /** Height of the icon */
-  height?: number;
-  /** Color of the icon */
-  color?: string;
-}
-
-/** Receipt SVG icon component */
-export const ReceiptIcon = ({
-  width = 24,
-  height = 30,
-  color = COLORS.GRAY_TEXT_DARK,
-}: IReceiptIconProps) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 24 30"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    {/* Receipt Body */}
-    <path
-      d="M2 2H22V24L20 22L18 24L16 22L14 24L12 22L10 24L8 22L6 24L4 22L2 24V2Z"
-      fill={color}
-      fillOpacity="0.1"
-      stroke={color}
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    {/* Receipt Lines */}
-    <line
-      x1="6"
-      y1="7"
-      x2="18"
-      y2="7"
-      stroke={color}
-      strokeWidth="1"
-      strokeLinecap="round"
-    />
-    <line
-      x1="6"
-      y1="11"
-      x2="18"
-      y2="11"
-      stroke={color}
-      strokeWidth="1"
-      strokeLinecap="round"
-    />
-    <line
-      x1="6"
-      y1="15"
-      x2="14"
-      y2="15"
-      stroke={color}
-      strokeWidth="1"
-      strokeLinecap="round"
-    />
-    <line
-      x1="6"
-      y1="19"
-      x2="16"
-      y2="19"
-      stroke={color}
-      strokeWidth="1"
-      strokeLinecap="round"
-    />
-  </svg>
-);
+import { COLORS } from "../constant/color";
+
+/** Props interface for ReceiptIcon component */
+interface IReceiptIconProps {
+  /** Width of the icon */
+  width?: number;
+  /** Height of the icon */
+  height?: number;
+  /** Color of the icon */
+  color?: string;
+}
+
+/** Receipt SVG icon component */
+export const ReceiptIcon = ({
+  width = 24,
+  height = 30,
+  color = COLORS.GRAY_TEXT_DARK,
+}: IReceiptIconProps) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 24 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    {/* Receipt Body */}
+    <path
+      d="M2 2H22V24L20 22L18 24L16 22L14 24L12 22L10 24L8 22L6 24L4 22L2 24V2Z"
+      fill={color}
+      fillOpacity="0.1"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    {/* Receipt Lines */}
+    <line
+      x1="6"
+      y1="7"
+      x2="18"
+      y2="7"
+      stroke={color}
+      strokeWidth="1"
+      strokeLinecap="round"
+    />
+    <line
+      x1="6"
+      y1="11"
+      x2="18"
+      y2="11"
+      stroke={color}
+      strokeWidth="1"
+      strokeLinecap="round"
+    />
+    <line
+      x1="6"
+      y1="15"
+      x2="14"
+      y2="15"
+      stroke={color}
+      strokeWidth="1"
+      strokeLinecap="round"
+    />
+    <line
+      x1="6"
+      y1="19"
+      x2="16"
+      y2="19"
+      stroke={color}
+      strokeWidth="1"
+      strokeLinecap="round"
+    />
+  </svg>
+);

package/src/index.ts

@@ -1,8 +1,9 @@
-export * from "./components";
-export * from "./hooks";
-export * from "./utils";
-export * from "./structure";
-export * from "./types";
-export * from "./context/AutoBeAgentContext";
-export * from "./context/AutoBeAgentSessionList";
-export * from "./context/SearchParamsContext";
+export * from "./components";
+export * from "./hooks";
+export * from "./utils";
+export * from "./structure";
+export * from "./types";
+export * from "./context/AutoBeAgentContext";
+export * from "./context/AutoBeAgentSessionList";
+export * from "./context/SearchParamsContext";
+export * from "./strategy/AutoBeAgentSessionStorageStrategy";

package/src/strategy/AutoBeAgentSessionStorageStrategy.ts

@@ -0,0 +1,127 @@
+import { AutoBeEventSnapshot } from "@autobe/interface";
+
+import { useSessionStorage } from "../hooks/useSessionStorage";
+import {
+  IAutoBeAgentSession,
+  IAutoBeAgentSessionStorageStrategy,
+} from "../structure";
+
+const SESSION_KEY = "autobe_session_list";
+
+export class AutoBeAgentSessionStorageStrategy implements IAutoBeAgentSessionStorageStrategy {
+  appendEvent(): Promise<void> {
+    return Promise.resolve();
+  }
+  setTokenUsage(): Promise<void> {
+    return Promise.resolve();
+  }
+
+  async getSession(
+    props: Pick<IAutoBeAgentSession, "id">,
+  ): Promise<IAutoBeAgentSession> {
+    const { getItem } = useSessionStorage();
+
+    const session = getItem(SESSION_KEY);
+    if (!session) {
+      throw new Error("Session not found");
+    }
+
+    const sessionList = JSON.parse(session);
+
+    if (sessionList instanceof Array === false) {
+      throw new Error("Session list is not an array");
+    }
+
+    const result = sessionList.find(
+      (s: IAutoBeAgentSession) => s.id === props.id,
+    );
+
+    return {
+      id: result.id,
+      title: result.participant.name,
+      history: result.histories,
+      tokenUsage: result.token_usage,
+      createdAt: new Date(result.created_at),
+      updatedAt: new Date(result.completed_at ?? result.created_at),
+      events: result.event_snapshots.map((event: AutoBeEventSnapshot) => ({
+        type: event.event.type,
+        events: [event.event],
+      })),
+    };
+  }
+
+  async getSessionList(): Promise<IAutoBeAgentSession[]> {
+    const { getItem } = useSessionStorage();
+    const sessionList = getItem(SESSION_KEY);
+    if (!sessionList) {
+      throw new Error("Session list not found");
+    }
+
+    const result = JSON.parse(sessionList);
+    if (result instanceof Array === false) {
+      throw new Error("Session list is not an array");
+    }
+
+    return result.map((session) => ({
+      id: session.id,
+      title: session.title ?? "Untitled",
+      history: [],
+      tokenUsage: session.token_usage,
+      createdAt: new Date(session.created_at),
+      updatedAt: new Date(session.completed_at ?? session.created_at),
+      completedAt: session.completed_at,
+      events: [],
+      phase: session.phase,
+      model: session.model,
+    }));
+  }
+
+  async deleteSession(props: Pick<IAutoBeAgentSession, "id">): Promise<void> {
+    const { getItem, setItem } = useSessionStorage();
+
+    const sessionList = getItem(SESSION_KEY);
+    if (!sessionList) {
+      throw new Error("Session list not found");
+    }
+
+    const result = JSON.parse(sessionList);
+    if (result instanceof Array === false) {
+      throw new Error("Session list is not an array");
+    }
+
+    setItem(
+      SESSION_KEY,
+      JSON.stringify(
+        result.filter((s: IAutoBeAgentSession) => s.id !== props.id),
+      ),
+    );
+  }
+
+  async appendHistory(): Promise<void> {
+    return Promise.resolve();
+  }
+
+  async editSessionTitle(
+    props: Pick<IAutoBeAgentSession, "id" | "title">,
+  ): Promise<void> {
+    const { getItem, setItem } = useSessionStorage();
+
+    const sessionList = getItem(SESSION_KEY);
+    if (!sessionList) {
+      throw new Error("Session list not found");
+    }
+
+    const result = JSON.parse(sessionList);
+    if (result instanceof Array === false) {
+      throw new Error("Session list is not an array");
+    }
+
+    const session = result.find((s: IAutoBeAgentSession) => s.id === props.id);
+    if (!session) {
+      throw new Error("Session not found");
+    }
+
+    session.title = props.title;
+    setItem(SESSION_KEY, JSON.stringify(result));
+  }
+}