@autobe/ui 0.20.0 → 0.22.0

package/src/components/upload/AutoBeChatUploadBox.tsx

@@ -0,0 +1,374 @@
+import { AutoBeUserMessageContent } from "@autobe/interface";
+import {
+  AutoBeUserMessageAudioContent,
+  AutoBeUserMessageFileContent,
+  AutoBeUserMessageImageContent,
+} from "@autobe/interface";
+import { ReactNode, RefObject, useEffect, useRef, useState } from "react";
+
+import {
+  AutoBeChatUploadSendButton,
+  AutoBeFileUploadBox,
+  AutoBeVoiceRecoderButton,
+} from ".";
+import { useMediaQuery } from "../../hooks/useMediaQuery";
+import { AutoBeFileUploader } from "../../utils";
+
+export interface IAutoBeBucket {
+  file: File;
+  content:
+    | AutoBeUserMessageAudioContent
+    | AutoBeUserMessageFileContent
+    | AutoBeUserMessageImageContent;
+}
+
+export interface IAutoBeChatUploadConfig {
+  supportAudio?: boolean;
+  file?: (file: File) => Promise<{ id: string }>;
+  image?: (file: File) => Promise<{ url: string }>;
+}
+
+export const AutoBeChatUploadBox = (props: AutoBeChatUploadBox.IProps) => {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [dragging, setDragging] = useState(false);
+  const [enabled, setEnabled] = useState(true);
+  const [text, setText] = useState("");
+  const [buckets, setBuckets] = useState<IAutoBeBucket[]>([]);
+  const [extensionError, setExtensionError] = useState<ReactNode | null>(null);
+
+  const [emptyText, setEmptyText] = useState(false);
+
+  const removeFile = (index: number) => {
+    setBuckets(buckets.filter((_, i) => i !== index));
+  };
+
+  const conversate = async () => {
+    if (enabled === false) return;
+
+    if (text.trim().length === 0 && buckets.length === 0) {
+      setEmptyText(true);
+      return;
+    }
+
+    const messages = [
+      {
+        type: "text",
+        text: text.trim(),
+      },
+      ...buckets.map(({ content }) => content),
+    ] as AutoBeUserMessageContent[];
+
+    setEnabled(false);
+    setEmptyText(false);
+    setText("");
+    setBuckets([]);
+
+    try {
+      await props.conversate(messages);
+    } catch (error) {
+      props.setError(
+        error instanceof Error ? error : new Error("Unknown error"),
+      );
+    }
+    setEnabled(true);
+  };
+
+  const handleFileSelect = async (fileList: FileList | null) => {
+    if (!fileList) return;
+
+    setEnabled(false);
+    setExtensionError(null);
+
+    const newFiles: IAutoBeBucket[] = [];
+    const errorFileNames: string[] = [];
+
+    for (const file of fileList) {
+      try {
+        newFiles.push(
+          await AutoBeFileUploader.compose(props.uploadConfig ?? {}, file),
+        );
+      } catch (error) {
+        errorFileNames.push(file.name);
+      }
+    }
+    if (errorFileNames.length > 0) {
+      const extensions: string[] = Array.from(
+        new Set(errorFileNames.map((n) => n.split(".").pop() ?? "unknown")),
+      ).sort();
+      setExtensionError(
+        <>
+          <h2>
+            Unsupported extension{extensions.length > 1 ? "s" : ""}: (
+            {extensions.join(", ")})
+          </h2>
+          <ul>
+            {errorFileNames.map((name) => (
+              <li key={name}>{name}</li>
+            ))}
+          </ul>
+        </>,
+      );
+      setTimeout(() => setExtensionError(null), 5_000);
+    }
+    setBuckets((o) => [...o, ...newFiles]);
+    setEnabled(true);
+  };
+
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // Only set dragging to false if we're leaving the entire container
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX;
+    const y = e.clientY;
+    if (x < rect.left || x >= rect.right || y < rect.top || y >= rect.bottom) {
+      setDragging(false);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragging(false);
+
+    const files = e.dataTransfer.files;
+    await handleFileSelect(files);
+  };
+
+  useEffect(() => {
+    if (!props.listener?.current) return;
+    props.listener.current.handleDragEnter = handleDragEnter;
+    props.listener.current.handleDragLeave = handleDragLeave;
+    props.listener.current.handleDrop = handleDrop;
+    props.listener.current.handleDragOver = handleDragOver;
+  }, [props.listener]);
+
+  return (
+    <div
+      style={{
+        maxWidth: useMediaQuery.WIDTH_MD,
+        margin: "0 auto",
+        padding: "12px",
+        borderRadius: "16px",
+        border: dragging ? "3px solid #1976d2" : "2px solid #e0e0e0",
+        backgroundColor: dragging
+          ? "rgba(25, 118, 210, 0.04)"
+          : "rgba(255, 255, 255, 0.95)",
+        backdropFilter: "blur(10px)",
+        transition: "all 0.2s",
+        position: "relative",
+        boxShadow: "0px 8px 24px rgba(0, 0, 0, 0.12)",
+      }}
+    >
+      {dragging ? (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: "120px",
+            paddingTop: "32px",
+            paddingBottom: "32px",
+          }}
+        >
+          <h6
+            style={{
+              color: "#1976d2",
+              fontWeight: "bold",
+              textAlign: "center",
+              fontSize: "1.25rem",
+              margin: 0,
+            }}
+          >
+            Drop files here to upload
+          </h6>
+        </div>
+      ) : null}
+
+      <div
+        style={{
+          display: dragging ? "none" : "flex",
+          flexDirection: "column",
+          gap: "8px",
+        }}
+      >
+        {buckets.length > 0 && (
+          <div
+            style={{
+              display: "flex",
+              flexWrap: "wrap",
+              gap: "4px",
+            }}
+          >
+            {buckets.map(({ file }, index) => (
+              <div
+                key={index}
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  backgroundColor: "#f5f5f5",
+                  borderRadius: "16px",
+                  padding: "4px 8px",
+                  fontSize: "0.875rem",
+                  maxWidth: "200px",
+                  border: "1px solid #e0e0e0",
+                }}
+              >
+                <span
+                  style={{
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    marginRight: "4px",
+                  }}
+                >
+                  {file.name}
+                </span>
+                <button
+                  style={{
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    padding: "2px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "50%",
+                    width: "16px",
+                    height: "16px",
+                  }}
+                  onClick={() => removeFile(index)}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.backgroundColor = "#f0f0f0";
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                  }}
+                >
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                  >
+                    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+                  </svg>
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <textarea
+          ref={inputRef}
+          style={{
+            width: "100%",
+            minHeight: "40px",
+            maxHeight: "192px",
+            padding: "8px 12px",
+            border: `2px solid ${emptyText ? "#f44336" : dragging ? "#1976d2" : "#e0e0e0"}`,
+            borderRadius: "8px",
+            fontSize: "0.95rem",
+            fontFamily: "inherit",
+            resize: "none",
+            outline: "none",
+            color: dragging ? "#1976d2" : "inherit",
+            backgroundColor: "transparent",
+            transition: "border-color 0.2s",
+          }}
+          placeholder={
+            emptyText
+              ? "Cannot send empty message"
+              : dragging
+                ? "Drop files here..."
+                : "Conversate with AI Chatbot"
+          }
+          value={text}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              if (enabled) void conversate();
+            }
+          }}
+          onChange={(e) => setText(e.target.value)}
+          onFocus={(e) => {
+            e.currentTarget.style.borderColor = "#1976d2";
+          }}
+          onBlur={(e) => {
+            e.currentTarget.style.borderColor = emptyText
+              ? "#f44336"
+              : "#e0e0e0";
+          }}
+        />
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          accept={AutoBeFileUploader.getAcceptAttribute(
+            props.uploadConfig?.supportAudio ?? false,
+            !!props.uploadConfig?.file,
+          )}
+          style={{ display: "none" }}
+          onChange={(e) => {
+            void handleFileSelect(e.target.files);
+            // Reset input to allow selecting the same file again
+            if (fileInputRef.current) fileInputRef.current.value = "";
+          }}
+        />
+
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <AutoBeFileUploadBox
+            extensionError={extensionError}
+            onClick={() => fileInputRef.current?.click()}
+            enabled={enabled}
+          />
+          {props.uploadConfig?.supportAudio === true ? (
+            <AutoBeVoiceRecoderButton
+              enabled={enabled}
+              onComplete={(content) => setBuckets((o) => [...o, content])}
+            />
+          ) : null}
+          <AutoBeChatUploadSendButton
+            onClick={() => conversate()}
+            enabled={enabled}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export namespace AutoBeChatUploadBox {
+  export interface IProps {
+    listener: RefObject<IListener>;
+    uploadConfig?: IAutoBeChatUploadConfig;
+    conversate: (messages: AutoBeUserMessageContent[]) => Promise<void>;
+    setError: (error: Error) => void;
+  }
+  export interface IListener {
+    handleDragEnter: (event: React.DragEvent) => void;
+    handleDragLeave: (event: React.DragEvent) => void;
+    handleDragOver: (event: React.DragEvent) => void;
+    handleDrop: (event: React.DragEvent) => void;
+  }
+}

package/src/{AutoBeFileUploadBox.tsx → components/upload/AutoBeFileUploadBox.tsx}

@@ -1,6 +1,12 @@
 import { ReactNode, useState } from "react";
 
-export const AutoBeFileUploadBox = (props: AutoBeFileUploadBox.IProps) => {
+export interface IAutoBeFileUploadBoxProps {
+  extensionError: ReactNode | null;
+  onClick: () => void;
+  enabled: boolean;
+}
+
+export const AutoBeFileUploadBox = (props: IAutoBeFileUploadBoxProps) => {
   const [isHovered, setIsHovered] = useState(false);
 
   const hasError = !!props.extensionError;
@@ -115,10 +121,3 @@ export const AutoBeFileUploadBox = (props: AutoBeFileUploadBox.IProps) => {
 };
 
 export default AutoBeFileUploadBox;
-export namespace AutoBeFileUploadBox {
-  export interface IProps {
-    extensionError: ReactNode | null;
-    onClick: () => void;
-    enabled: boolean;
-  }
-}

package/src/components/upload/AutoBeUploadConfig.ts

@@ -0,0 +1,5 @@
+export interface IAutoBeUploadConfig {
+  supportAudio?: boolean;
+  file?: (file: File) => Promise<{ id: string }>;
+  image?: (file: File) => Promise<{ url: string }>;
+}

package/src/{AutoBeVoiceRecoderButton.tsx → components/upload/AutoBeVoiceRecoderButton.tsx}

@@ -1,7 +1,7 @@
 import { AutoBeUserMessageAudioContent } from "@autobe/interface";
 import { useState } from "react";
 
-import { AutoBeVoiceRecorder } from "./utils/AutoBeVoiceRecorder";
+import { AutoBeVoiceRecorder } from "../../utils/AutoBeVoiceRecorder";
 
 export const AutoBeVoiceRecoderButton = (
   props: AutoBeVoiceRecoderButton.IProps,
@@ -82,7 +82,7 @@ export const AutoBeVoiceRecoderButton = (
           fill="currentColor"
           style={{ display: "block" }}
         >
-          <path d="M12 2c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2s-2-.9-2-2V4c0-1.1.9-2 2-2zm5.3 6.7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-1.9 1.9c.03.33.05.66.05 1v.5c0 2.8-2.2 5-5 5s-5-2.2-5-5v-.5c0-.34.02-.67.05-1L4.9 10.1c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l1.9 1.9c1.8-1.6 4.3-1.6 6.1 0l1.9-1.9zM19 10.5v.5c0 3.9-3.1 7-7 7s-7-3.1-7-7v-.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5v.5c0 2.2 1.8 4 4 4s4-1.8 4-4v-.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5z" />
+          <path d="M12 2C13.1 2 14 2.9 14 4V10C14 11.1 13.1 12 12 12C10.9 12 10 11.1 10 10V4C10 2.9 10.9 2 12 2ZM19 10V12C19 15.866 15.866 19 12 19C8.134 19 5 15.866 5 12V10H7V12C7 14.761 9.239 17 12 17C14.761 17 17 14.761 17 12V10H19ZM11 20V22H13V20H16V22H8V20H11Z" />
         </svg>
       )}
     </button>

package/src/components/upload/index.ts

@@ -0,0 +1,5 @@
+export * from "./AutoBeFileUploadBox";
+export * from "./AutoBeVoiceRecoderButton";
+export * from "./AutoBeChatUploadBox";
+export * from "./AutoBeChatUploadSendButton";
+export * from "./AutoBeUploadConfig";

package/src/constant/color.ts

@@ -0,0 +1,28 @@
+/** Color tokens for consistent styling */
+export const COLORS = {
+  // Gray scale
+  GRAY_BORDER: "#d1d5db",
+  GRAY_BACKGROUND: "#f9fafb",
+  GRAY_BORDER_LIGHT: "#e5e7eb",
+  GRAY_TEXT_DARK: "#1f2937",
+  GRAY_TEXT_MEDIUM: "#4b5563",
+
+  // Token value colors
+  TOKEN_INPUT: "#2563eb", // Blue
+  TOKEN_OUTPUT: "#16a34a", // Green
+  TOKEN_TOTAL: "#9333ea", // Purple
+
+  // Table colors
+  TABLE_BORDER: "#eee",
+  TABLE_BORDER_THICK: "#ddd",
+  TABLE_HEADER_BG: "#f5f5f5",
+} as const;
+
+/** Shadow styles */
+export const SHADOWS = {
+  CARD: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+  BANNER: "0 1px 2px 0 rgba(0, 0, 0, 0.1)",
+  STRONG: "0 4px 12px 0 rgba(0, 0, 0, 0.15)",
+  BUTTON: "0 2px 8px 0 rgba(0, 0, 0, 0.12)",
+  BUTTON_HOVER: "0 4px 16px 0 rgba(0, 0, 0, 0.2)",
+} as const;

package/src/context/AutoBeAgentContext.tsx

@@ -0,0 +1,79 @@
+import {
+  IAutoBePlaygroundHeader,
+  IAutoBeRpcService,
+  IAutoBeTokenUsageJson,
+} from "@autobe/interface";
+import { ILlmSchema } from "@samchon/openapi";
+import { ReactNode, createContext, useContext, useState } from "react";
+import { useEffect } from "react";
+
+import {
+  AutoBeListener,
+  AutoBeListenerState,
+  IAutoBeEventGroup,
+} from "../structure";
+
+interface AutoBeAgentContextType {
+  eventGroups: IAutoBeEventGroup[];
+  tokenUsage: IAutoBeTokenUsageJson | null;
+  state: AutoBeListenerState;
+  header: IAutoBePlaygroundHeader<ILlmSchema.Model>;
+  service: IAutoBeRpcService;
+  listener: AutoBeListener;
+}
+
+const AutoBeAgentContext = createContext<AutoBeAgentContextType | null>(null);
+
+export function AutoBeAgentProvider({
+  children,
+  listener,
+  service,
+  header,
+}: {
+  listener: AutoBeListener;
+  service: IAutoBeRpcService;
+  header: IAutoBePlaygroundHeader<ILlmSchema.Model>;
+  children: ReactNode;
+}) {
+  const [tokenUsage, setTokenUsage] = useState<IAutoBeTokenUsageJson | null>(
+    null,
+  );
+  const [eventGroups, setEventGroups] = useState<IAutoBeEventGroup[]>([]);
+
+  useEffect(() => {
+    listener.on(async (e) => {
+      service
+        .getTokenUsage()
+        .then(setTokenUsage)
+        .catch(() => {});
+      setEventGroups(e);
+    });
+    service
+      .getTokenUsage()
+      .then(setTokenUsage)
+      .catch(() => {});
+  }, []);
+
+  return (
+    <AutoBeAgentContext.Provider
+      value={{
+        eventGroups,
+        tokenUsage,
+        state: listener.getState(),
+        header,
+        service,
+        listener,
+      }}
+    >
+      {children}
+    </AutoBeAgentContext.Provider>
+  );
+}
+
+export function useAutoBeAgent() {
+  const context = useContext(AutoBeAgentContext);
+  if (!context) {
+    throw new Error("useAutoBeAgent must be used within a AutoBeAgentProvider");
+  }
+  return context;
+}

package/src/hooks/index.ts

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

package/src/hooks/useEscapeKey.ts

@@ -0,0 +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]);
+};

package/src/hooks/useIsomorphicLayoutEffect.ts

@@ -0,0 +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;

package/src/hooks/useMediaQuery.ts

@@ -0,0 +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})`;
+}