@autobe/ui 0.22.0 → 0.23.0

package/src/components/events/AutoBeValidateEventMovie.tsx

@@ -78,13 +78,11 @@ function getState(event: IAutoBeValidateEventMovieProps["event"]): IState {
             <br />
             {event.result.errors.length > 0 && (
               <>
-                {event.result.errors
-                  .slice(0, 3)
-                  .map((error: any, idx: number) => (
-                    <div key={idx} style={{ marginTop: "0.25rem" }}>
-                      • {error.message}
-                    </div>
-                  ))}
+                {event.result.errors.slice(0, 3).map((error, idx) => (
+                  <div key={idx} style={{ marginTop: "0.25rem" }}>
+                    • {error.message}
+                  </div>
+                ))}
               </>
             )}
             <br />
@@ -119,7 +117,7 @@ function getState(event: IAutoBeValidateEventMovieProps["event"]): IState {
                 {event.result.type === "failure" &&
                   event.result.diagnostics
                     .slice(0, 3)
-                    .map((diagnostic: any, idx: number) => (
+                    .map((diagnostic, idx) => (
                       <div key={idx} style={{ marginTop: "0.25rem" }}>
                         • {diagnostic.messageText}
                       </div>
@@ -194,7 +192,7 @@ function getState(event: IAutoBeValidateEventMovieProps["event"]): IState {
                 {event.result.type === "failure" &&
                   event.result.diagnostics
                     .slice(0, 2)
-                    .map((diagnostic: any, idx: number) => (
+                    .map((diagnostic, idx) => (
                       <div key={idx} style={{ marginTop: "0.25rem" }}>
                         • {diagnostic.messageText}
                       </div>

package/src/components/events/common/CollapsibleEventGroup.tsx

@@ -4,7 +4,7 @@ import { EventCard } from "./EventCard";
 import { EventContent } from "./EventContent";
 import { EventIcon, EventIconType } from "./EventIcon";
 
-export interface ICollapsibleEventGroupProps<T = any> {
+export interface ICollapsibleEventGroupProps<T = unknown> {
   /** Array of events of the same type */
   events: T[];
   /** Title for the group */

package/src/components/events/groups/ValidateEventGroup.tsx

@@ -11,7 +11,7 @@ import {
 import { AutoBeValidateEventMovie } from "../AutoBeValidateEventMovie";
 import { CollapsibleEventGroup } from "../common/CollapsibleEventGroup";
 
-type ValidateEvent =
+export type ValidateEvent =
   | AutoBePrismaInsufficientEvent
   | AutoBePrismaValidateEvent
   | AutoBeInterfaceOperationsReviewEvent

package/src/components/events/utils/eventGrouper.tsx

@@ -2,6 +2,7 @@ import { AutoBeEvent } from "@autobe/interface";
 import { ReactNode } from "react";
 
 import { ValidateEventGroup } from "../groups";
+import { ValidateEvent } from "../groups/ValidateEventGroup";
 
 /** Configuration for event grouping */
 export interface IEventGrouperConfig {
@@ -71,7 +72,7 @@ export function groupEvents(
 /** Groups events by their category */
 function groupEventsByCategory(events: AutoBeEvent[]) {
   const grouped = {
-    validate: [] as any[],
+    validate: [] as ValidateEvent[],
     other: [] as AutoBeEvent[],
   };
 

package/src/components/index.ts

@@ -1,5 +1,11 @@
+export * from "./AutoBeConfigButton";
+export * from "./AutoBeConfigModal";
+export { createAutoBeConfigFields } from "./AutoBeConfigModal";
+export type { AutoBeConfigKey } from "./AutoBeConfigModal";
+export * from "./AutoBeStatusButton";
 export * from "./AutoBeStatusModal";
 export * from "./AutoBeChatMain";
+export * from "./AutoBeChatSidebar";
 export * from "./AutoBeUserMessageMovie";
 export * from "./AutoBeAssistantMessageMovie";
 export * from "./common";

package/src/components/upload/AutoBeChatUploadBox.tsx

@@ -11,6 +11,7 @@ import {
   AutoBeFileUploadBox,
   AutoBeVoiceRecoderButton,
 } from ".";
+import { useAutoBeAgent } from "../../context/AutoBeAgentContext";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
 import { AutoBeFileUploader } from "../../utils";
 
@@ -29,7 +30,8 @@ export interface IAutoBeChatUploadConfig {
 }
 
 export const AutoBeChatUploadBox = (props: AutoBeChatUploadBox.IProps) => {
-  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const { listener } = useAutoBeAgent();
+  const inputRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const [dragging, setDragging] = useState(false);
@@ -39,11 +41,29 @@ export const AutoBeChatUploadBox = (props: AutoBeChatUploadBox.IProps) => {
   const [extensionError, setExtensionError] = useState<ReactNode | null>(null);
 
   const [emptyText, setEmptyText] = useState(false);
+  const [isComposing, setIsComposing] = useState(false);
 
   const removeFile = (index: number) => {
     setBuckets(buckets.filter((_, i) => i !== index));
   };
 
+  useEffect(() => {
+    async function trackEnable(value: boolean) {
+      setEnabled(value);
+    }
+    listener?.onEnable(trackEnable);
+    return () => {
+      listener?.offEnable(trackEnable);
+    };
+  }, [listener]);
+
+  // Sync text state when cleared programmatically (like after sending message)
+  useEffect(() => {
+    if (inputRef.current && text === "" && inputRef.current.innerText !== "") {
+      inputRef.current.innerText = "";
+    }
+  }, [text]);
+
   const conversate = async () => {
     if (enabled === false) return;
 
@@ -60,7 +80,6 @@ export const AutoBeChatUploadBox = (props: AutoBeChatUploadBox.IProps) => {
       ...buckets.map(({ content }) => content),
     ] as AutoBeUserMessageContent[];
 
-    setEnabled(false);
     setEmptyText(false);
     setText("");
     setBuckets([]);
@@ -72,7 +91,6 @@ export const AutoBeChatUploadBox = (props: AutoBeChatUploadBox.IProps) => {
         error instanceof Error ? error : new Error("Unknown error"),
       );
     }
-    setEnabled(true);
   };
 
   const handleFileSelect = async (fileList: FileList | null) => {
@@ -272,47 +290,79 @@ export const AutoBeChatUploadBox = (props: AutoBeChatUploadBox.IProps) => {
           </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";
-          }}
-        />
+        <div style={{ position: "relative" }}>
+          <div
+            ref={inputRef}
+            contentEditable={true}
+            style={{
+              width: "97%",
+              minHeight: "40px",
+              maxHeight: "192px",
+              padding: "8px 12px",
+              border: "none",
+              borderRadius: "8px",
+              fontSize: "0.95rem",
+              fontFamily: "inherit",
+              outline: "none",
+              boxShadow: "none",
+              backgroundColor: "transparent",
+              transition: "color 0.2s, opacity 0.2s",
+              overflowY: "auto",
+              wordBreak: "break-word",
+              whiteSpace: "pre-wrap",
+              lineHeight: "1.4",
+              // Custom scrollbar styles
+              scrollbarWidth: "thin",
+              scrollbarColor: "rgba(0, 0, 0, 0.3) transparent",
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey && !isComposing) {
+                e.preventDefault();
+                if (enabled) {
+                  void conversate();
+                }
+              }
+            }}
+            onCompositionStart={() => {
+              setIsComposing(true);
+            }}
+            onCompositionEnd={() => {
+              setIsComposing(false);
+            }}
+            onInput={(e) => {
+              const target = e.target as HTMLDivElement;
+              const newText = target.innerText || "";
+              // Only update state if text actually changed to prevent cursor issues
+              if (newText !== text) {
+                setText(newText);
+              }
+            }}
+            suppressContentEditableWarning={true}
+          />
+          {!text && (
+            <div
+              style={{
+                position: "absolute",
+                top: "8px",
+                left: "12px",
+                right: "12px",
+                bottom: "8px",
+                color: "rgba(153, 153, 153, 0.6)",
+                fontSize: "0.95rem",
+                fontFamily: "inherit",
+                pointerEvents: "none",
+                lineHeight: "1.4",
+                padding: "2px 0",
+              }}
+            >
+              {emptyText
+                ? "Cannot send empty message"
+                : dragging
+                  ? "Drop files here..."
+                  : "Conversate with AI Chatbot"}
+            </div>
+          )}
+        </div>
 
         <input
           ref={fileInputRef}

package/src/context/AutoBeAgentContext.tsx

@@ -1,68 +1,247 @@
 import {
-  IAutoBePlaygroundHeader,
+  IAutoBeRpcListener,
   IAutoBeRpcService,
   IAutoBeTokenUsageJson,
 } from "@autobe/interface";
-import { ILlmSchema } from "@samchon/openapi";
-import { ReactNode, createContext, useContext, useState } from "react";
-import { useEffect } from "react";
+import {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { Communicator } from "tgrid";
 
 import {
   AutoBeListener,
   AutoBeListenerState,
+  IAutoBeAgentSessionStorageStrategy,
   IAutoBeEventGroup,
 } from "../structure";
+import { IAutoBeConfig } from "../types/config";
+import { useAutoBeAgentSessionList } from "./AutoBeAgentSessionList";
+import { useSearchParams } from "./SearchParamsContext";
+
+export interface IAutoBeServiceData {
+  service: IAutoBeRpcService;
+  listener: AutoBeListener;
+  connector: Communicator<IAutoBeRpcListener, IAutoBeRpcService>;
+  close: () => void | Promise<void>;
+  sessionId: string;
+}
+
+export type AutoBeServiceFactory = (
+  config: IAutoBeConfig,
+) => Promise<IAutoBeServiceData>;
+
+export type AutoBeConnectionStatus =
+  | "disconnected" // 연결되지 않음
+  | "connecting" // 연결 중
+  | "connected"; // 연결 완료 및 활성 상태
 
 interface AutoBeAgentContextType {
+  // Service state
+  connectionStatus: AutoBeConnectionStatus;
+
+  // Service data (available when ready)
   eventGroups: IAutoBeEventGroup[];
   tokenUsage: IAutoBeTokenUsageJson | null;
-  state: AutoBeListenerState;
-  header: IAutoBePlaygroundHeader<ILlmSchema.Model>;
-  service: IAutoBeRpcService;
-  listener: AutoBeListener;
+  state: AutoBeListenerState | null;
+  service: IAutoBeRpcService | null;
+  listener: AutoBeListener | null;
+
+  // Service management
+  getAutoBeService: (config?: IAutoBeConfig) => Promise<IAutoBeServiceData>;
+  resetService: () => void;
 }
 
 const AutoBeAgentContext = createContext<AutoBeAgentContextType | null>(null);
 
 export function AutoBeAgentProvider({
   children,
-  listener,
-  service,
-  header,
+  serviceFactory,
+  storageStrategy,
 }: {
-  listener: AutoBeListener;
-  service: IAutoBeRpcService;
-  header: IAutoBePlaygroundHeader<ILlmSchema.Model>;
+  serviceFactory: AutoBeServiceFactory;
   children: ReactNode;
+  storageStrategy: IAutoBeAgentSessionStorageStrategy;
 }) {
+  // Service state
+  const [connectionStatus, setConnectionStatus] =
+    useState<AutoBeConnectionStatus>("disconnected");
+
+  // Service data
+  const { searchParams, setSearchParams } = useSearchParams();
+  // Use URL parameter for conversation ID - enables bookmark/share support
+  const activeConversationId = searchParams.get("session-id") ?? null;
+
   const [tokenUsage, setTokenUsage] = useState<IAutoBeTokenUsageJson | null>(
     null,
   );
   const [eventGroups, setEventGroups] = useState<IAutoBeEventGroup[]>([]);
 
+  // Context-scoped service instance (contains service, listener, header)
+  const [serviceInstance, setServiceInstance] =
+    useState<IAutoBeServiceData | null>(null);
+
+  const { refreshSessionList } = useAutoBeAgentSessionList();
+  // Context-scoped service getter
+  const getAutoBeService = useCallback(
+    async (
+      config: IAutoBeConfig = {} as IAutoBeConfig,
+    ): Promise<IAutoBeServiceData> => {
+      // Return existing instance if available
+      if (serviceInstance && connectionStatus === "connected") {
+        return serviceInstance;
+      }
+
+      // Prevent multiple concurrent creations
+      if (connectionStatus === "connecting") {
+        throw new Error("Service is already connecting. Please wait.");
+      }
+
+      if (!serviceFactory) {
+        throw new Error("No service factory provided. Cannot create service.");
+      }
+
+      try {
+        setConnectionStatus("connecting");
+
+        // Create new service instance
+        const newServiceData = await serviceFactory({
+          ...config,
+          sessionId: activeConversationId,
+        });
+        newServiceData.connector.join().then(async () => {
+          const res = await serviceFactory({
+            ...config,
+            sessionId: activeConversationId,
+          });
+          setServiceInstance(res);
+        });
+        setServiceInstance(newServiceData);
+
+        setSearchParams((sp) => {
+          const newSp = new URLSearchParams(sp);
+          newSp.set("session-id", newServiceData.sessionId);
+          return newSp;
+        });
+        setConnectionStatus("connected");
+
+        return newServiceData;
+      } catch (error) {
+        setConnectionStatus("disconnected");
+        throw error;
+      }
+    },
+    [
+      serviceFactory,
+      serviceInstance,
+      connectionStatus,
+      activeConversationId,
+      searchParams,
+    ],
+  );
+
+  // Reset service (for reconnection, etc.)
+  const resetService = useCallback(() => {
+    setServiceInstance(null);
+    setConnectionStatus("disconnected");
+    setEventGroups([]);
+    setTokenUsage(null);
+  }, []);
+
   useEffect(() => {
-    listener.on(async (e) => {
-      service
+    if (activeConversationId === null) {
+      setEventGroups([]);
+      setTokenUsage(null);
+      return;
+    }
+
+    storageStrategy
+      .getSession({
+        id: activeConversationId,
+      })
+      .then((v) => {
+        if (v === null) {
+          return null;
+        }
+        refreshSessionList();
+        setEventGroups(v.events);
+        setTokenUsage(v.tokenUsage);
+      })
+      .catch(console.error);
+  }, [activeConversationId]);
+
+  useEffect(() => {
+    if (serviceInstance === null) {
+      return;
+    }
+
+    serviceInstance.listener.on(async (e) => {
+      serviceInstance.service
         .getTokenUsage()
         .then(setTokenUsage)
         .catch(() => {});
       setEventGroups(e);
     });
-    service
+
+    serviceInstance.service
       .getTokenUsage()
       .then(setTokenUsage)
       .catch(() => {});
-  }, []);
+  }, [serviceInstance]);
+
+  useEffect(() => {
+    if (activeConversationId === null || serviceInstance === null) {
+      return;
+    }
+
+    const originConversate = serviceInstance.service.conversate;
+    serviceInstance.service.conversate = async (content) => {
+      const result = await originConversate(content);
+      await storageStrategy.appendHistory({
+        id: activeConversationId,
+        history: result,
+      });
+      return result;
+    };
+
+    const registerEvent = async (e: IAutoBeEventGroup[]) => {
+      await storageStrategy.appendEvent({
+        id: activeConversationId,
+        events: e,
+      });
+      await storageStrategy.setTokenUsage({
+        id: activeConversationId,
+        tokenUsage: await serviceInstance.service.getTokenUsage(),
+      });
+    };
+
+    serviceInstance.listener.on(registerEvent);
+    return () => {
+      serviceInstance.service.conversate = originConversate;
+      serviceInstance.listener.off(registerEvent);
+    };
+  }, [activeConversationId, serviceInstance]);
 
   return (
     <AutoBeAgentContext.Provider
       value={{
+        // Service state
+        connectionStatus,
+
+        // Service data
         eventGroups,
         tokenUsage,
-        state: listener.getState(),
-        header,
-        service,
-        listener,
+        state: serviceInstance?.listener?.getState() ?? null,
+        service: serviceInstance?.service ?? null,
+        listener: serviceInstance?.listener ?? null,
+
+        // Service management
+        getAutoBeService,
+        resetService,
       }}
     >
       {children}

package/src/context/AutoBeAgentSessionList.tsx

@@ -0,0 +1,58 @@
+import {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+import {
+  IAutoBeAgentSession,
+  IAutoBeAgentSessionStorageStrategy,
+} from "../structure";
+
+interface AutoBeAgentSessionListContextType {
+  sessionList: IAutoBeAgentSession[];
+  refreshSessionList: () => Promise<void>;
+}
+
+const AutoBeAgentSessionListContext =
+  createContext<AutoBeAgentSessionListContextType | null>(null);
+
+export function AutoBeAgentSessionListProvider({
+  children,
+  storageStrategy,
+}: {
+  storageStrategy: IAutoBeAgentSessionStorageStrategy;
+  children: ReactNode;
+}) {
+  const [sessionList, setSessionList] = useState<IAutoBeAgentSession[]>([]);
+
+  const refreshSessionList = useCallback(async () => {
+    await storageStrategy.getSessionList().then(setSessionList);
+  }, [storageStrategy]);
+
+  useEffect(() => {
+    refreshSessionList();
+  }, [storageStrategy]);
+
+  return (
+    <AutoBeAgentSessionListContext.Provider
+      value={{
+        sessionList,
+        refreshSessionList,
+      }}
+    >
+      {children}
+    </AutoBeAgentSessionListContext.Provider>
+  );
+}
+
+export function useAutoBeAgentSessionList() {
+  const context = useContext(AutoBeAgentSessionListContext);
+  if (!context) {
+    throw new Error("useAutoBeAgent must be used within a AutoBeAgentProvider");
+  }
+  return context;
+}

package/src/context/SearchParamsContext.tsx

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

package/src/index.ts

@@ -1,4 +1,8 @@
 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";