@itechchoice/prime-chatkit 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/style.css

@@ -1 +1 @@
-.abc-prime-dock{position:fixed;right:1rem;bottom:1rem;top:auto;left:auto;width:min(720px,94vw);height:calc(100vh - var(--abc-prime-header-offset, var(--chatkit-header-offset, 0px)) - 16px);z-index:60;pointer-events:none;transition:width .22s ease,right .22s ease,bottom .22s ease,transform .22s ease;visibility:hidden}.abc-prime-dock--open{pointer-events:auto;visibility:visible}.abc-prime-dock--minimized{pointer-events:none;visibility:visible}.abc-prime-dock--split{inset:0 0 0 auto;width:var(--abc-prime-split-width, var(--chatkit-split-width, 50vw));min-width:var(--abc-prime-split-min-width, var(--chatkit-split-min-width, 640px));height:100vh;border-left:1px solid var(--border-input, rgba(15, 23, 42, .08))}body.chatkit-resizing .abc-prime-dock,body.chatkit-dragging .abc-prime-dock,body.chatkit-dock-resizing .abc-prime-dock{transition:none}.abc-prime-dock__resize-handle{position:absolute;top:0;bottom:0;left:-12px;width:24px;display:flex;align-items:center;justify-content:center;cursor:col-resize;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;z-index:2}.abc-prime-dock__panel{display:flex;flex-direction:column;gap:0;border:1px solid var(--border-input, rgba(15, 23, 42, .08));border-radius:1.25rem;background:transparent;box-shadow:0 25px 50px #0f172a2e;padding:0;overflow:hidden;transform:translateY(20px);opacity:0;pointer-events:auto;transition:opacity .18s ease,transform .26s cubic-bezier(.2,.8,.2,1);height:100%}.abc-prime-dock--open .abc-prime-dock__panel{opacity:1;transform:translateY(0)}.abc-prime-dock--split .abc-prime-dock__panel{transform:translate(32px);border-radius:0}.abc-prime-dock--open.abc-prime-dock--split .abc-prime-dock__panel{transform:translate(0)}.abc-prime-dock--minimized .abc-prime-dock__panel{opacity:0;transform:scale(.06) translate(12px,12px);pointer-events:none}.abc-prime-dock__minimized{position:fixed;right:1rem;bottom:1rem;width:48px;height:48px;border-radius:999px;background:rgb(var(--color-theme-blue, 34 99 248));color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 12px 24px #2263f847;transform:scale(.6);opacity:0;pointer-events:none;transition:transform .36s cubic-bezier(.18,1.35,.32,1),opacity .32s ease}.abc-prime-dock--minimized .abc-prime-dock__minimized{opacity:1;transform:scale(1);pointer-events:auto}.abc-prime-dock__header{cursor:default}.abc-prime-dock--dock-interactive:not(.abc-prime-dock--split) .abc-prime-dock__header{cursor:grab;touch-action:none}.abc-prime-dock--dragging:not(.abc-prime-dock--split) .abc-prime-dock__header{cursor:grabbing}.abc-prime-dock__resize-corner{position:absolute;right:.75rem;bottom:.75rem;width:18px;height:18px;border:0;background:transparent;cursor:nwse-resize;z-index:3}@media(max-width:640px){.abc-prime-dock{right:.75rem;left:.75rem;width:auto;bottom:.75rem}}
+.abc-prime-dock{position:fixed;right:1rem;bottom:1rem;top:auto;left:auto;width:min(420px,94vw);height:calc(100vh - var(--abc-prime-header-offset, var(--chatkit-header-offset, 0px)) - 16px);z-index:60;pointer-events:none;transition:width .22s ease,right .22s ease,bottom .22s ease,transform .22s ease;visibility:hidden}.abc-prime-dock--open{pointer-events:auto;visibility:visible}.abc-prime-dock--minimized{pointer-events:none;visibility:visible}.abc-prime-dock--split{inset:0 0 0 auto;width:var(--abc-prime-split-width, var(--chatkit-split-width, 480px));min-width:var(--abc-prime-split-min-width, var(--chatkit-split-min-width, 480px));height:100vh;border-left:1px solid var(--border-input, rgba(15, 23, 42, .08))}body.chatkit-resizing .abc-prime-dock,body.chatkit-dragging .abc-prime-dock,body.chatkit-dock-resizing .abc-prime-dock{transition:none}.abc-prime-dock__resize-handle{position:absolute;top:0;bottom:0;left:-12px;width:24px;display:flex;align-items:center;justify-content:center;cursor:col-resize;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;z-index:2}.abc-prime-dock__panel{display:flex;flex-direction:column;gap:0;border:1px solid var(--border-input, rgba(15, 23, 42, .08));border-radius:1.25rem;background:transparent;box-shadow:0 25px 50px #0f172a2e;padding:0;overflow:hidden;overscroll-behavior:contain;transform:translateY(20px);opacity:0;pointer-events:auto;transition:opacity .18s ease,transform .26s cubic-bezier(.2,.8,.2,1);height:100%}.abc-prime-dock--open .abc-prime-dock__panel{opacity:1;transform:translateY(0)}.abc-prime-dock--split .abc-prime-dock__panel{transform:translate(32px);border-radius:0}.abc-prime-dock--open.abc-prime-dock--split .abc-prime-dock__panel{transform:translate(0)}.abc-prime-dock--minimized .abc-prime-dock__panel{opacity:0;transform:scale(.06) translate(12px,12px);pointer-events:none}.abc-prime-dock__minimized{position:fixed;right:1rem;bottom:1rem;width:48px;height:48px;border-radius:999px;background:rgb(var(--color-theme-blue, 34 99 248));color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 12px 24px #2263f847;transform:scale(.6);opacity:0;pointer-events:none;transition:transform .36s cubic-bezier(.18,1.35,.32,1),opacity .32s ease}.abc-prime-dock--minimized .abc-prime-dock__minimized{opacity:1;transform:scale(1);pointer-events:auto}.abc-prime-dock__header{cursor:default}.abc-prime-dock--dock-interactive:not(.abc-prime-dock--split) .abc-prime-dock__header{cursor:grab;touch-action:none}.abc-prime-dock--dragging:not(.abc-prime-dock--split) .abc-prime-dock__header{cursor:grabbing}.abc-prime-dock__resize-corner{position:absolute;right:.75rem;bottom:.75rem;width:18px;height:18px;border:0;background:transparent;cursor:nwse-resize;z-index:3}@media(max-width:640px){.abc-prime-dock{right:.75rem;left:.75rem;width:auto;bottom:.75rem}}

package/dist/types/components/agent-thread.d.ts

@@ -312,6 +312,7 @@ declare function threadDefaults(locale: string): {
         message: string;
         voiceInput: string;
         sendMessage: string;
+        stop: string;
         discardRecording: string;
         useRecording: string;
         connectApps: string;
@@ -539,6 +540,7 @@ declare const defaultLabels: {
         message: string;
         voiceInput: string;
         sendMessage: string;
+        stop: string;
         discardRecording: string;
         useRecording: string;
         connectApps: string;
@@ -631,6 +633,7 @@ export type AgentThreadScreenProps = Pick<AppShellProps, "onNavigate" | "user" |
     start?: {
         greeting?: string;
         body?: string;
+        avatar?: string;
         prompts?: {
             id: string;
             label: string;
@@ -712,6 +715,10 @@ export type AgentThreadScreenProps = Pick<AppShellProps, "onNavigate" | "user" |
     labels?: ThreadLabels;
     locale?: string;
 };
+declare function ThreadStart({ start, onStartPrompt }: {
+    start: NonNullable<AgentThreadScreenProps["start"]>;
+    onStartPrompt?: AgentThreadScreenProps["onStartPrompt"];
+}): import("react").JSX.Element;
 export declare function AgentThreadScreen({ workspace, messages: messagesProp, overlay, start, onStartPrompt, onLink, orchestratorAvatar, onCopy, onRegenerate, onFeedback, feedbackReasons, onSend, onStop, onRetry, connection: connectionProp, onReconnect, lastSeen: lastSeenProp, awayAfter, onMarkRead, running, decisions: decisionsProp, onDecide, onLater, tasks: taskDetailsProp, onOpenTask, onShowTask, onOpenInbox, artifacts, openArtifacts, models, composer, suggested, upload, transcribe, simulate, labels: labelProp, locale, onNavigate, ...props }: AgentThreadScreenProps): import("react").JSX.Element;
 /** Yours: a soft bubble on the right, files above it; queued, sending or failed under it */
 declare function UserMessage({ message: m, labels, onRetry }: {
@@ -721,8 +728,10 @@ declare function UserMessage({ message: m, labels, onRetry }: {
 }): import("react").JSX.Element;
 /** The orchestrator's: plain text on the page under its mark, with its cards, tools and files in between */
 declare const ThreadLinkContext: import("react").Context<((href: string, event: MouseEvent<HTMLAnchorElement>) => void) | undefined>;
-declare function AgentMessage({ message: m, clock, orchestratorAvatar, first, now, labels, askState, onTask, onAsk, onRetry, onCopy, onRegenerate, onFeedback, feedbackReasons, }: {
+declare function AgentMessage({ message: m, status, phase, clock, orchestratorAvatar, first, now, labels, askState, onTask, onAsk, onRetry, onCopy, onRegenerate, onFeedback, feedbackReasons, }: {
     message: ThreadAgentMessage;
+    status?: ReactNode;
+    phase?: "working" | "writing" | "done";
     clock: Intl.DateTimeFormat;
     orchestratorAvatar?: string;
     first: boolean;
@@ -733,7 +742,7 @@ declare function AgentMessage({ message: m, clock, orchestratorAvatar, first, no
     onAsk: (id: string) => void;
     onRetry?: () => void;
 } & Pick<AgentThreadScreenProps, "onCopy" | "onRegenerate" | "onFeedback" | "feedbackReasons">): import("react").JSX.Element;
-export { UserMessage, AgentMessage, ThreadLinkContext, threadDefaults };
+export { UserMessage, AgentMessage, ThreadStart, ThreadLinkContext, threadDefaults };
 export type { Labels };
 /** The original message parts, with their shell tokens but no screen layout. */
 export declare function ThreadPartsRoot({ children, className }: {

package/dist/types/components/ui/chat-composer-clean.d.ts

@@ -50,6 +50,7 @@ export declare const defaultChatComposerLabels: {
     message: string;
     voiceInput: string;
     sendMessage: string;
+    stop: string;
     discardRecording: string;
     useRecording: string;
     connectApps: string;
@@ -66,6 +67,8 @@ export declare const defaultChatComposerLabels: {
 };
 export type ChatComposerLabels = typeof defaultChatComposerLabels;
 export type ChatComposerProps = {
+    running?: boolean;
+    onStop?: () => void;
     sendDisabled?: boolean;
     labels?: Partial<ChatComposerLabels>;
     placeholder?: string;
@@ -112,4 +115,4 @@ export type ChatComposerProps = {
 export declare const defaultFolders: string[];
 export declare const defaultApps: ChatApp[];
 export declare const defaultModels: ChatModel[];
-export declare function ChatComposer({ sendDisabled, placeholder, disabled, labels: labelProp, models, dictation, onSend, onModelChange, onAttach, addItems, voice, approval: firstApproval, onApprovalChange, onLearnMore, folders, folder: firstFolder, onFolderChange, apps, connectedApps, onAppsChange, foot, tray, }: ChatComposerProps): import("react").JSX.Element;
+export declare function ChatComposer({ running, onStop, sendDisabled, placeholder, disabled, labels: labelProp, models, dictation, onSend, onModelChange, onAttach, addItems, voice, approval: firstApproval, onApprovalChange, onLearnMore, folders, folder: firstFolder, onFolderChange, apps, connectedApps, onAppsChange, foot, tray, }: ChatComposerProps): import("react").JSX.Element;

package/dist/types/components/ui/command-menu-clean.d.ts

@@ -51,7 +51,9 @@ export type CommandMenuProps = {
     ask?: boolean;
     hotkey?: boolean;
     labels?: Partial<CommandMenuLabels>;
+    /** Fill the parent height and scroll results within the remaining space. */
+    fill?: boolean;
 };
 /** Sample commands – replace with your own */
 export declare const defaultGroups: CommandGroup[];
-export declare function CommandMenu({ groups, placeholder, onAction, onEditSubmit, onEditCancel, ask, hotkey, labels: labelOverrides, onRun, onClose, autoFocus, className, }: CommandMenuProps): import("react").JSX.Element;
+export declare function CommandMenu({ groups, placeholder, onAction, onEditSubmit, onEditCancel, ask, hotkey, labels: labelOverrides, fill, onRun, onClose, autoFocus, className, }: CommandMenuProps): import("react").JSX.Element;

package/dist/types/components/ui/thinking-loader-clean.d.ts

@@ -0,0 +1,19 @@
+export type ThinkingLoaderProps = {
+    /** Labels to walk through, one after another */
+    phases?: string[];
+    /** Time per phase, in ms */
+    interval?: number;
+    /** Show a specific phase instead of advancing on a timer – e.g. from your stream events */
+    phase?: number;
+    /** Start over after the last phase instead of holding it */
+    loop?: boolean;
+    /** Finished: the spinner turns into a check and the label into doneLabel */
+    done?: boolean;
+    /** Label once done – a string, or a function that gets the seconds since the loader started */
+    doneLabel?: string | ((seconds: number) => string);
+    size?: "sm" | "md";
+    /** "pill" = bordered capsule, "plain" = just the spinner and the label, e.g. inside a chat bubble */
+    variant?: "pill" | "plain";
+    className?: string;
+};
+export declare function ThinkingLoader({ phases: phasesProp, interval: intervalProp, phase, loop, done, doneLabel, size, variant, className, }: ThinkingLoaderProps): import("react").JSX.Element;

package/dist/types/layout/constants.d.ts

@@ -10,11 +10,13 @@ export declare const SPLIT_BREAKPOINT = 1440;
 export declare const MIN_SPLIT_WIDTH = 1280;
 export declare const DOCK_INTERACTIVE_BREAKPOINT = 768;
 export declare const MIN_SPLIT_CONTENT_WIDTH = 620;
+export declare const SPLIT_PANEL_MIN_WIDTH = 480;
+export declare const SPLIT_PANEL_MAX_WIDTH = 720;
 export declare const HEADER_HEIGHT_FALLBACK = 64;
 export declare const DOCK_EDGE_GAP = 12;
-export declare const DOCK_DEFAULT_WIDTH = 720;
 export declare const DOCK_DEFAULT_HEIGHT = 760;
 export declare const DOCK_MIN_WIDTH = 420;
+export declare const DOCK_DEFAULT_WIDTH = 420;
 export declare const DOCK_MIN_HEIGHT = 620;
 export declare const DOCK_MAX_WIDTH = 960;
 export declare const DOCK_GEOMETRY_STORAGE_KEY = "abcPrimeDockGeometry:v1";

package/dist/types/ui/blocks/BlocksPanel.d.ts

@@ -7,6 +7,8 @@ import { type OlderMessages } from "./useFollowLatest";
 import { type GetAttachmentUrls } from "./useAttachmentDownload";
 export type BlocksPanelProps = {
     messages: ChatMessage[];
+    loading?: boolean;
+    title?: string;
     history?: {
         sessions?: ControllerState["sessions"];
         currentId?: string;
@@ -51,6 +53,7 @@ export type BlocksPanelProps = {
     onSend: (text: string, attachments: UploadedAttachment[]) => void;
     onStop?: () => void;
     onNewChat?: () => void;
+    layout?: "split" | "float";
     onToggleLayout?: () => void;
     onClose?: () => void;
     onCreditsClick?: () => void;
@@ -67,4 +70,4 @@ export type BlocksPanelProps = {
     };
     getAttachmentUrls?: GetAttachmentUrls;
 };
-export declare function BlocksPanel({ messages, history, start, availability, provisioning, older, suspension, onAnswerSuspension, onCancelSuspension, error, locale, credits, branding, onSend, onStop, onNewChat, onToggleLayout, onClose, onCreditsClick, onHeaderPointerDown, processView, onRegenerate, onFeedback, onNavigate, upload, attachmentLimits, getAttachmentUrls, className }: BlocksPanelProps): import("react").JSX.Element;
+export declare function BlocksPanel({ messages, loading, title, history, start, availability, provisioning, older, suspension, onAnswerSuspension, onCancelSuspension, error, locale, credits, branding, onSend, onStop, onNewChat, layout, onToggleLayout, onClose, onCreditsClick, onHeaderPointerDown, processView, onRegenerate, onFeedback, onNavigate, upload, attachmentLimits, getAttachmentUrls, className }: BlocksPanelProps): import("react").JSX.Element;

package/dist/types/ui/blocks/LiveStatus.d.ts

@@ -0,0 +1,9 @@
+import type { Run } from "../../core/types";
+import type { BlocksCopy, ThreadCopy } from "../i18n";
+/** The prototype's phase precedence, preferring concise tool names for the live status. */
+export declare function phaseLabel(run: Run, live: BlocksCopy["live"], copy: ThreadCopy): string;
+export declare function LiveStatus({ run, live, copy }: {
+    run: Run;
+    live: BlocksCopy["live"];
+    copy: ThreadCopy;
+}): import("react").JSX.Element | null;

package/dist/types/ui/i18n.d.ts

@@ -26,13 +26,20 @@ export declare function threadLabelsFor(locale?: string): {
 export type PanelCopy = {
     credits: (balance: number, locale: string) => string;
     history: string;
+    backToChat: string;
+    historyTitle: string;
+    loadingSession: string;
     newChat: string;
     switchLayout: string;
+    layoutFloat: string;
+    layoutSplit: string;
     close: string;
     placeholder: string;
     unavailable: string;
     provisionTitle: string;
     provisionAction: string;
+    startGreeting: string;
+    startBody: string;
 };
 export declare const zhPanelCopy: PanelCopy;
 export declare const enPanelCopy: PanelCopy;
@@ -82,6 +89,14 @@ export declare function historyLabelsFor(locale?: string): Partial<import("../co
 import { type AIAnswerLabels } from "../components/ui/ai-answer-clean";
 import { type DropzoneLabels } from "../components/ui/dropzone-clean";
 export type BlocksCopy = {
+    live: {
+        ready: string;
+        thinking: string;
+        tool: (name: string) => string;
+        writing: string;
+        waiting: string;
+        working: string;
+    };
     attachments: {
         dropzone: DropzoneLabels;
         collapse: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itechchoice/prime-chatkit",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.3",
   "description": "PrimeChatKit: React chat UI for products built on the prime-chatkit SDK BFF contract. Shows the agent's work: thinking, tool calls, approvals, sources and cost.",
   "license": "UNLICENSED",
   "publishConfig": {