Open History to see the last commit
1import type {
2 EnvironmentId,
3 OrchestrationV2ProviderFailureClass,
4 ProviderInstanceId,
5 ServerProvider,
6 ThreadId,
7} from "@t3tools/contracts";
8import type { Dispatch, SetStateAction } from "react";
9import {
10 dismissProviderStatusBannerForSession,
11 ProviderStatusBanner,
12} from "./ProviderStatusBanner";
13import { dismissThreadErrorBannerForSession, ThreadErrorBanner } from "./ThreadErrorBanner";
14
15/**
16 * The banners pinned above the timeline. The dismiss handlers are built here from plain
17 * values, so a ChatView render that changes neither banner leaves both cached.
18 */
19export function ChatBannerLane(props: {
20 environmentId: EnvironmentId;
21 providerStatus: ServerProvider | null;
22 providerStatusDismissalKey: string | null;
23 onOpenProviderSetup: (instanceId: ProviderInstanceId) => void;
24 threadId: ThreadId;
25 threadError: string | null;
26 threadErrorClass: OrchestrationV2ProviderFailureClass | null;
27 threadErrorCode: string | null;
28 threadErrorBannerKey: string | null;
29 setThreadError: (threadId: ThreadId | null, error: string | null) => void;
30 setThreadErrorBannerDismissTick: Dispatch<SetStateAction<number>>;
31}) {
32 const {
33 providerStatus,
34 providerStatusDismissalKey,
35 onOpenProviderSetup,
36 threadId,
37 threadError,
38 threadErrorClass,
39 threadErrorCode,
40 threadErrorBannerKey,
41 setThreadError,
42 setThreadErrorBannerDismissTick,
43 } = props;
44 return (
45 <div className="chat-banner-lane pointer-events-none absolute top-0 z-30 flex flex-col">
46 <ProviderStatusBanner
47 environmentId={props.environmentId}
48 status={providerStatus}
49 onDismiss={() => dismissProviderStatusBannerForSession(providerStatusDismissalKey)}
50 onOpenProviderSetup={onOpenProviderSetup}
51 />
52 <ThreadErrorBanner
53 error={threadError}
54 errorClass={threadErrorClass}
55 errorCode={threadErrorCode}
56 onDismiss={() => {
57 setThreadError(threadId, null);
58 dismissThreadErrorBannerForSession(threadErrorBannerKey);
59 setThreadErrorBannerDismissTick((tick) => tick + 1);
60 }}
61 />
62 </div>
63 );
64}