orcheo-studio 0.21.1

package/src/features/shared/components/chat-interface-options.ts

@@ -0,0 +1,325 @@
+import { useCallback, useMemo } from "react";
+
+import { authFetch } from "@/lib/auth-fetch";
+import { buildBackendHttpUrl } from "@/lib/config";
+import { buildChatKitAttachmentOptions } from "@features/chatkit/lib/chatkit-attachments";
+import {
+  buildPublicChatFetch,
+  getChatKitDomainKey,
+} from "@features/chatkit/lib/chatkit-client";
+import type { CustomApiConfig, HostedApiConfig } from "@openai/chatkit";
+import type { UseChatKitOptions } from "@openai/chatkit-react";
+
+import type { ChatInterfaceProps } from "./chat-interface.types";
+
+type ChatKitApiOptions = NonNullable<UseChatKitOptions["api"]>;
+type OptionalApiConfig = UseChatKitOptions["api"] | undefined;
+
+type OptionalHandlers = Pick<
+  ChatInterfaceProps,
+  "onResponseStart" | "onResponseEnd" | "onThreadChange" | "onLog"
+>;
+
+type OptionParams = Pick<
+  ChatInterfaceProps,
+  | "chatkitOptions"
+  | "getClientSecret"
+  | "backendBaseUrl"
+  | "workflowId"
+  | "sessionPayload"
+  | "title"
+  | "user"
+  | "ai"
+  | "initialMessages"
+> &
+  OptionalHandlers;
+
+const normalizeWorkflowId = (value: unknown): string | null => {
+  if (typeof value !== "string") {
+    return null;
+  }
+  const trimmed = value.trim();
+  return trimmed || null;
+};
+
+const deriveWorkflowIdFromPayload = (
+  payload?: Record<string, unknown>,
+): string | null => {
+  if (!payload) {
+    return null;
+  }
+  const camel = normalizeWorkflowId(payload["workflowId"]);
+  if (camel) {
+    return camel;
+  }
+  return normalizeWorkflowId(payload["workflow_id"]);
+};
+
+const hasGetClientSecret = (api: OptionalApiConfig): api is HostedApiConfig =>
+  Boolean(api && typeof api.getClientSecret === "function");
+
+const hasCustomApiConfig = (api: OptionalApiConfig): api is CustomApiConfig =>
+  Boolean(
+    api &&
+    typeof api === "object" &&
+    typeof api.url === "string" &&
+    typeof api.domainKey === "string",
+  );
+
+const useInitialGreeting = (
+  initialMessages: ChatInterfaceProps["initialMessages"],
+  aiId: string,
+) =>
+  useMemo(() => {
+    const greeting = initialMessages?.find(
+      (message) =>
+        typeof message.content === "string" && message.sender?.id === aiId,
+    );
+    return greeting?.content as string | undefined;
+  }, [aiId, initialMessages]);
+
+const useSessionSecretResolver = ({
+  getClientSecret,
+  backendBaseUrl,
+  sessionPayload,
+  title,
+  user,
+  ai,
+}: OptionParams) =>
+  useCallback(
+    async (currentSecret: string | null) => {
+      if (getClientSecret) {
+        return getClientSecret(currentSecret);
+      }
+
+      const url = buildBackendHttpUrl("/api/chatkit/session", backendBaseUrl);
+      const response = await authFetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          current_client_secret: currentSecret,
+          currentClientSecret: currentSecret,
+          user,
+          assistant: ai,
+          metadata: { title, ...sessionPayload },
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch ChatKit client secret");
+      }
+
+      const data = (await response.json()) as {
+        client_secret?: string;
+        clientSecret?: string;
+      };
+
+      const secret = data.client_secret ?? data.clientSecret;
+      if (!secret) {
+        throw new Error("ChatKit session response missing client secret");
+      }
+
+      return secret;
+    },
+    [ai, backendBaseUrl, getClientSecret, sessionPayload, title, user],
+  );
+
+const useHandlerComposer = () =>
+  useCallback(
+    <T extends unknown[]>(
+      ...handlers: Array<((...args: T) => void) | undefined>
+    ) => {
+      const valid = handlers.filter(Boolean) as Array<(...args: T) => void>;
+      if (valid.length === 0) {
+        return undefined;
+      }
+      return (...args: T) => {
+        valid.forEach((handler) => handler(...args));
+      };
+    },
+    [],
+  );
+
+export const useChatInterfaceOptions = ({
+  chatkitOptions,
+  getClientSecret,
+  backendBaseUrl,
+  workflowId,
+  sessionPayload,
+  title,
+  user,
+  ai,
+  initialMessages,
+  onResponseStart,
+  onResponseEnd,
+  onThreadChange,
+  onLog,
+}: OptionParams): UseChatKitOptions => {
+  const resolveSessionSecret = useSessionSecretResolver({
+    chatkitOptions,
+    getClientSecret,
+    backendBaseUrl,
+    sessionPayload,
+    title,
+    user,
+    ai,
+    initialMessages,
+    onResponseStart,
+    onResponseEnd,
+    onThreadChange,
+    onLog,
+  });
+  const composeHandlers = useHandlerComposer();
+  const initialGreeting = useInitialGreeting(initialMessages, ai.id);
+  const resolvedWorkflowId = useMemo(
+    () =>
+      normalizeWorkflowId(workflowId) ??
+      deriveWorkflowIdFromPayload(sessionPayload),
+    [sessionPayload, workflowId],
+  );
+  const defaultApiOptions = useMemo<
+    Partial<ChatKitApiOptions> | undefined
+  >(() => {
+    if (!resolvedWorkflowId) {
+      return undefined;
+    }
+    const url = buildBackendHttpUrl("/api/chatkit", backendBaseUrl);
+    const domainKey = getChatKitDomainKey();
+    const uploadBase = buildBackendHttpUrl(
+      "/api/chatkit/upload",
+      backendBaseUrl,
+    );
+    const uploadUrlObj = new URL(uploadBase);
+    uploadUrlObj.searchParams.set("workflow_id", resolvedWorkflowId);
+    const uploadStrategy = {
+      type: "direct",
+      uploadUrl: uploadUrlObj.toString(),
+    } as const;
+    if (typeof window === "undefined") {
+      return { url, domainKey, uploadStrategy };
+    }
+    // If a session getter is provided, prefer JWT-authenticated requests to the
+    // custom backend. Otherwise, fall back to cookie/public mode.
+    const makeJwtFetch = (
+      tokenResolver: (current: string | null) => Promise<string>,
+    ): typeof fetch => {
+      const base = buildPublicChatFetch({
+        workflowId: resolvedWorkflowId,
+        metadata: sessionPayload,
+      });
+      return async (input: RequestInfo | URL, init: RequestInit = {}) => {
+        const token = await tokenResolver(null);
+        const headers = new Headers(init.headers ?? {});
+        if (token) {
+          headers.set("Authorization", `Bearer ${token}`);
+        }
+        return base(input, { ...init, headers });
+      };
+    };
+
+    const fetchImpl = getClientSecret
+      ? makeJwtFetch(getClientSecret)
+      : buildPublicChatFetch({
+          workflowId: resolvedWorkflowId,
+          metadata: sessionPayload,
+        });
+
+    return {
+      url,
+      domainKey,
+      fetch: fetchImpl,
+      uploadStrategy,
+    };
+  }, [backendBaseUrl, getClientSecret, resolvedWorkflowId, sessionPayload]);
+  const providedApi = chatkitOptions?.api;
+  const providedHostedSecret = useMemo(() => {
+    if (hasGetClientSecret(providedApi)) {
+      return providedApi.getClientSecret;
+    }
+    return null;
+  }, [providedApi]);
+  const providedCustomApi = useMemo(() => {
+    if (hasCustomApiConfig(providedApi)) {
+      return providedApi;
+    }
+    return undefined;
+  }, [providedApi]);
+  // When a workflow is present (Studio bubble), force Custom API mode so
+  // requests go to our backend instead of the hosted ChatKit service.
+  const hostedSecret = resolvedWorkflowId
+    ? null
+    : (getClientSecret ??
+      providedHostedSecret ??
+      (!defaultApiOptions && !providedCustomApi ? resolveSessionSecret : null));
+
+  return useMemo(() => {
+    const merged = {
+      ...(chatkitOptions as UseChatKitOptions),
+    } as UseChatKitOptions;
+    let apiConfig: ChatKitApiOptions;
+    if (hostedSecret) {
+      apiConfig = {
+        getClientSecret: hostedSecret,
+      };
+    } else {
+      const mergedCustom: Partial<CustomApiConfig> = {
+        ...(defaultApiOptions ?? {}),
+        ...(providedCustomApi ?? {}),
+      };
+      apiConfig = mergedCustom as ChatKitApiOptions;
+    }
+
+    merged.api = apiConfig;
+
+    if (!merged.header) {
+      merged.header = {
+        enabled: true,
+        title: { enabled: true, text: title },
+      };
+    }
+
+    if (!merged.startScreen && initialGreeting) {
+      merged.startScreen = { greeting: initialGreeting };
+    }
+
+    if (resolvedWorkflowId) {
+      merged.composer = {
+        ...(merged.composer ?? {}),
+        attachments:
+          merged.composer?.attachments ?? buildChatKitAttachmentOptions(),
+      };
+    }
+
+    merged.onResponseStart = composeHandlers(
+      chatkitOptions?.onResponseStart,
+      onResponseStart,
+    );
+    merged.onResponseEnd = composeHandlers(
+      chatkitOptions?.onResponseEnd,
+      onResponseEnd,
+    );
+    merged.onThreadChange = composeHandlers(
+      chatkitOptions?.onThreadChange,
+      onThreadChange,
+    );
+    merged.onThreadLoadStart = chatkitOptions?.onThreadLoadStart;
+    merged.onThreadLoadEnd = chatkitOptions?.onThreadLoadEnd;
+    merged.onLog = composeHandlers(chatkitOptions?.onLog, onLog);
+    merged.onError = chatkitOptions?.onError;
+
+    return merged;
+  }, [
+    chatkitOptions,
+    composeHandlers,
+    defaultApiOptions,
+    hostedSecret,
+    initialGreeting,
+    onLog,
+    onResponseEnd,
+    onResponseStart,
+    onThreadChange,
+    resolvedWorkflowId,
+    providedCustomApi,
+    title,
+  ]);
+};

package/src/features/shared/components/chat-interface.types.ts

@@ -0,0 +1,47 @@
+import type React from "react";
+import type { UseChatKitOptions } from "@openai/chatkit-react";
+
+export interface ChatParticipant {
+  id: string;
+  name: string;
+  avatar?: string;
+}
+
+export interface InitialMessage {
+  id: string;
+  content: string;
+  sender: {
+    id: string;
+    name: string;
+    avatar?: string;
+    isAI?: boolean;
+  };
+  timestamp: Date | string;
+  status?: "sending" | "sent" | "delivered" | "read" | "error";
+}
+
+export interface ChatInterfaceProps {
+  title?: string;
+  initialMessages?: InitialMessage[];
+  className?: string;
+  isMinimizable?: boolean;
+  isClosable?: boolean;
+  position?:
+    | "bottom-right"
+    | "bottom-left"
+    | "top-right"
+    | "top-left"
+    | "center";
+  triggerButton?: React.ReactNode;
+  user: ChatParticipant;
+  ai: ChatParticipant;
+  backendBaseUrl?: string;
+  workflowId?: string | null;
+  sessionPayload?: Record<string, unknown>;
+  getClientSecret?: (currentSecret: string | null) => Promise<string>;
+  chatkitOptions?: Partial<UseChatKitOptions>;
+  onResponseStart?: () => void;
+  onResponseEnd?: () => void;
+  onThreadChange?: (threadId: string | null) => void;
+  onLog?: (payload: Record<string, unknown>) => void;
+}

package/src/features/shared/components/top-navigation/account-menu.tsx

@@ -0,0 +1,172 @@
+import React, { useCallback, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { Avatar, AvatarFallback, AvatarImage } from "@/design-system/ui/avatar";
+import { Button } from "@/design-system/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/design-system/ui/dropdown-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/design-system/ui/dialog";
+import { Building2, LogOut, Settings, User, Vault } from "lucide-react";
+import {
+  clearAuthSession,
+  getAuthenticatedUserProfile,
+} from "@features/auth/lib/auth-session";
+import { getSelectedWorkspaceSlug } from "@/lib/workspace-session";
+import CredentialsVault from "@features/workflow/components/dialogs/credentials-vault";
+import { usePageContext } from "@/hooks/use-page-context";
+import type {
+  Credential,
+  CredentialInput,
+  CredentialUpdateInput,
+} from "@features/workflow/types/credential-vault";
+
+interface AccountMenuProps {
+  credentials: Credential[];
+  isCredentialsLoading: boolean;
+  onAddCredential?: (credential: CredentialInput) => Promise<void> | void;
+  onUpdateCredential?: (
+    id: string,
+    updates: CredentialUpdateInput,
+  ) => Promise<void> | void;
+  onDeleteCredential?: (id: string) => Promise<void> | void;
+  onRevealCredentialSecret?: (id: string) => Promise<string | null>;
+}
+
+export default function AccountMenu({
+  credentials,
+  isCredentialsLoading,
+  onAddCredential,
+  onUpdateCredential,
+  onDeleteCredential,
+  onRevealCredentialSecret,
+}: AccountMenuProps) {
+  const [isVaultOpen, setIsVaultOpen] = useState(false);
+  const { setVaultOpen } = usePageContext();
+  const navigate = useNavigate();
+  const authUser = getAuthenticatedUserProfile();
+  const workspaceSlug = getSelectedWorkspaceSlug();
+  const accountLabel = authUser?.name ?? "Account";
+  const accountInitials = accountLabel
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+
+  const handleVaultOpenChange = useCallback(
+    (open: boolean) => {
+      setIsVaultOpen(open);
+      setVaultOpen(open);
+    },
+    [setVaultOpen],
+  );
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            className="h-10 w-10 rounded-full border-2 border-border p-0"
+            aria-label={
+              authUser ? `Account menu for ${authUser.name}` : "Account menu"
+            }
+          >
+            {authUser ? (
+              <Avatar className="h-9 w-9">
+                {authUser.avatar ? (
+                  <AvatarImage src={authUser.avatar} alt={authUser.name} />
+                ) : null}
+                <AvatarFallback>
+                  {accountInitials || <User className="h-5 w-5" />}
+                </AvatarFallback>
+              </Avatar>
+            ) : (
+              <User className="h-5 w-5" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem asChild>
+            <Link to="/profile" className="flex w-full items-center gap-0">
+              <User className="mr-2 h-4 w-4" />
+              <span>Profile</span>
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <Link to="/settings" className="flex w-full items-center gap-0">
+              <Settings className="mr-2 h-4 w-4" />
+              <span>Settings</span>
+            </Link>
+          </DropdownMenuItem>
+          {workspaceSlug && (
+            <DropdownMenuItem asChild>
+              <Link
+                to={`/${workspaceSlug}/workspace`}
+                className="flex w-full items-center gap-0"
+              >
+                <Building2 className="mr-2 h-4 w-4" />
+                <span>Workspace Management</span>
+              </Link>
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem asChild>
+            <button
+              type="button"
+              className="flex w-full items-center gap-0"
+              onClick={() => {
+                handleVaultOpenChange(true);
+              }}
+            >
+              <Vault className="mr-2 h-4 w-4" />
+              <span>Credential Vault</span>
+            </button>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem asChild>
+            <button
+              type="button"
+              className="flex w-full items-center gap-0"
+              onClick={() => {
+                clearAuthSession();
+                navigate("/login", { replace: true });
+              }}
+            >
+              <LogOut className="mr-2 h-4 w-4" />
+              <span>Log out</span>
+            </button>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Dialog open={isVaultOpen} onOpenChange={handleVaultOpenChange}>
+        <DialogContent className="max-h-[85vh] max-w-[67.2rem] overflow-hidden">
+          <DialogTitle className="sr-only">Credential Vault</DialogTitle>
+          <DialogDescription className="sr-only">
+            Manage, search, add, and remove credentials.
+          </DialogDescription>
+          <CredentialsVault
+            credentials={credentials}
+            isLoading={isCredentialsLoading}
+            onAddCredential={onAddCredential}
+            onUpdateCredential={onUpdateCredential}
+            onDeleteCredential={onDeleteCredential}
+            onRevealCredentialSecret={onRevealCredentialSecret}
+          />
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}