Create UI components for Assistant-UI connection monitoring (#1549)

Part of OPS-2896.

The new UI components are not actively rendered yet; this PR is a
pre-requisite for
[PR-1548.](#1548)

Author: cezudas

packages/react-ui/public/locales/en/translation.json

@@ -17,14 +17,6 @@
   "Contact Support": "Contact Support",
   "AI Assistant": "AI Assistant",
   "Enable AI": "Enable AI",
-  "Choose your AI provider": "Choose your AI provider",
-  "Select an option": "Select an option",
-  "Model": "Model",
-  "API key": "API key",
-  "Base URL": "Base URL",
-  "Advanced settings": "Advanced settings",
-  "Provider Settings": "Provider Settings",
-  "Model Settings": "Model Settings",
   "Save": "Save",
   "Valid Connection": "Valid Connection",
   "Loading chat...": "Loading chat...",
@@ -84,6 +76,7 @@
   "Use a static pre-defined value": "Use a static pre-defined value",
   "Dynamic": "Dynamic",
   "Static values stay the same, while dynamic values update based on data from other steps": "Static values stay the same, while dynamic values update based on data from other steps",
+  "Select an option": "Select an option",
   "Custom TypeScript Code": "Custom TypeScript Code",
   "Loop on Items": "Loop on Items",
   "Condition": "Condition",
@@ -142,6 +135,7 @@
   "{invalidSteps, plural, =0 {no incomplete steps} =1 {Complete 1 step} other {Complete # steps}}": "{invalidSteps, plural, =0 {no incomplete steps} =1 {Complete 1 step} other {Complete # steps}}",
   "Test Workflow": "Test Workflow",
   "Please test the trigger first": "Please test the trigger first",
+  "Test run limits": "Test run limits",
   "Use as Draft": "Use as Draft",
   "Are you sure?": "Are you sure?",
   "Your current draft version will be overwritten with": "Your current draft version will be overwritten with",
@@ -150,10 +144,12 @@
   "Viewing": "Viewing",
   "View": "View",
   "Error, please try again.": "Error, please try again.",
+  "Action limit reached.": "Action limit reached.",
   "Duration": "Duration",
   "Run Details": "Run Details",
   "There are no logs captured for this run.": "There are no logs captured for this run.",
   "Logs are kept for {days} days after execution and then deleted.": "Logs are kept for {days} days after execution and then deleted.",
+  "Run Stopped due to Action Limits": "Run Stopped due to Action Limits",
   "Workflow Run was stopped": "Workflow Run was stopped",
   "Run Succeeded": "Run Succeeded",
   "Run Failed": "Run Failed",
@@ -162,6 +158,7 @@
   "Run exceeded {timeout} seconds, try to optimize your steps.": "Run exceeded {timeout} seconds, try to optimize your steps.",
   "Run failed for an unknown reason, contact support.": "Run failed for an unknown reason, contact support.",
   "Unknown status": "Unknown status",
+  "Configure limit": "Configure limit",
   "Took": "Took",
   "Recent Runs": "Recent Runs",
   "No runs found": "No runs found",
@@ -226,11 +223,16 @@
   "This branch will be removed.": "This branch will be removed.",
   "Add new": "Add new",
   "Where": "Where",
+  "Copied to clipboard": "Copied to clipboard",
+  "Test URL": "Test URL",
+  "Copy URL": "Copy URL",
+  "This URL generates sample data and does NOT trigger the flow.": "This URL generates sample data and does NOT trigger the flow.",
   "Step output": "Step output",
   "Sample output": "Sample output",
   "Sample output info": "Sample output info",
   "Sample data is for building and testing only - scheduled runs and test workflow are using the real step output.": "Sample data is for building and testing only - scheduled runs and test workflow are using the real step output.",
   "Sample data is too large. The maximum allowed size is {maxKb} KB.": "Sample data is too large. The maximum allowed size is {maxKb} KB.",
+  "Unknown Error": "Unknown Error",
   "Test Step": "Test Step",
   "Warning. Executing this step may modify resources in your environment.": "Warning. Executing this step may modify resources in your environment.",
   "Please review the details before proceeding.": "Please review the details before proceeding.",
@@ -289,7 +291,6 @@
   "I would like to use predefined App Credentials": "I would like to use predefined App Credentials",
   "Name can only contain letters, numbers and underscores": "Name can only contain letters, numbers and underscores",
   "Unknown": "Unknown",
-  "Exit Run": "Exit Run",
   "Triggered": "Triggered",
   "Manual run": "Manual run",
   "Test run": "Test run",
@@ -448,21 +449,24 @@
   "Running version": "Running version",
   "Error loading version": "Error loading version",
   "Newer version is available": "Newer version is available",
-  "You are on the latest version": "You are on the latest version",
+  "Learn how to update on the latest version": "Learn how to update on the latest version",
   "Learn how to update": "Learn how to update",
   "Search model...": "Search model...",
   "No model found": "No model found",
   "Add step context...": "Add step context...",
   "It looks like AI hasn’t been configured in OpenOps yet.": "It looks like AI hasn’t been configured in OpenOps yet.",
   "Please go to ": "Please go to ",
   " to complete the setup.": " to complete the setup.",
-  "AI Chat": "AI Chat",
-  "Toggle AI Chat": "Toggle AI Chat",
   "New chat": "New chat",
   "Generating ...": "Generating ...",
   "Use code": "Use code",
+  "Loading diagram...": "Loading diagram...",
   "Inject command": "Inject command",
+  "Rendering diagram...": "Rendering diagram...",
+  "AI Chat": "AI Chat",
+  "Toggle AI Chat": "Toggle AI Chat",
   "How can I help you today?": "How can I help you today?",
+  "The AI is taking a bit longer than expected. Please wait...": "The AI is taking a bit longer than expected. Please wait...",
   "Scroll to bottom": "Scroll to bottom",
   "Write a message...": "Write a message...",
   "Send": "Send",
@@ -477,6 +481,7 @@
   "Note: ": "Note: ",
   "Exploring template catalog might not work if you're not running Openops over a secure HTTPS connection or if you configured your browser to block 3rd party cookies (some browsers like Safari block 3rd party cookies by default).": "Exploring template catalog might not work if you're not running Openops over a secure HTTPS connection or if you configured your browser to block 3rd party cookies (some browsers like Safari block 3rd party cookies by default).",
   "Click to start editing": "Click to start editing",
+  "Upgrade": "Upgrade",
   "We’re glad to give back!": "We’re glad to give back!",
   "This open-source version is free to use.\n Want more power? Explore our paid plans.": "This open-source version is free to use.\n Want more power? Explore our paid plans.",
   "See plans": "See plans",
@@ -528,23 +533,21 @@
   "Download File": "Download File",
   "Apply": "Apply",
   "Paste sample data here": "Paste sample data here",
-  "Copied to clipboard": "Copied to clipboard",
   "File is not available after execution.": "File is not available after execution.",
   "No workflows created yet": "No workflows created yet",
   "Automate your FinOps processes, pick a template or start from scratch in order to see here your workflows stats": "Automate your FinOps processes, pick a template or start from scratch in order to see here your workflows stats",
   "Workflow triggered successfully.": "Workflow triggered successfully.",
   "Check the Runs page for details": "Check the Runs page for details",
-  "Configure limit": "Configure limit",
+  "Current version: {currentVersion}. Newer version is available, go to settings to update": "Current version: {currentVersion}. Newer version is available, go to settings to update",
+  "Coming soon": "Coming soon",
   "Set Action Limits": "Set Action Limits",
-  "Run Stopped due to Action Limits": "Run Stopped due to Action Limits",
+  "No Actions to Limit": "No Actions to Limit",
   "Workflows with loops may trigger the same action repeatedly. To prevent unintended activity during testing, we recommend setting execution limits per action.": "Workflows with loops may trigger the same action repeatedly. To prevent unintended activity during testing, we recommend setting execution limits per action.",
+  "This workflow doesn’t include any actions that require execution limits. If loops or repeated steps are added later, you’ll be able to set limits here to prevent unintended behavior during testing.": "This workflow doesn’t include any actions that require execution limits. If loops or repeated steps are added later, you’ll be able to set limits here to prevent unintended behavior during testing.",
   "Enable run limits": "Enable run limits",
   "Select all": "Select all",
   "All actions": "All actions",
   "Toggle {{block}} {{action}}": "Toggle {{block}} {{action}}",
-  "No actions available.": "No actions available.",
-  "Current version: {currentVersion}. Newer version is available, go to settings to update": "Current version: {currentVersion}. Newer version is available, go to settings to update",
-  "Coming soon": "Coming soon",
   "Input": "Input",
   "View input data": "View input data",
   "Output": "Output",

packages/ui-components/src/components/ai-chat-container/index.ts

@@ -2,5 +2,4 @@ export * from './ai-model-selector';
 export * from './ai-scope-selector';
 export * from './assistant-ui-chat-container';
 export * from './no-ai-enabled-popover';
-export * from './step-settings-assistant-ui-chat-container';
 export * from './types';

packages/ui-components/src/components/assistant-ui/assistant-ui-chat-container.tsx

@@ -8,12 +8,14 @@ import { MarkdownCodeVariations } from '../custom';
 import { AssistantTopBar, AssistantTopBarProps } from './assistant-top-bar';
 import { Thread, ThreadProps } from './thread';
 import { ThreadExtraContextProvider } from './thread-extra-context';
+import { ConnectionStatusProps } from './types';
 
 type AssistantUiChatContainerProps = {
   runtime: AssistantRuntime;
   toolComponents?: Record<string, ReactNode>;
   handleInject?: (codeContent: string | SourceCode) => void;
-} & AssistantTopBarProps &
+} & ConnectionStatusProps &
+  AssistantTopBarProps &
   ThreadProps;
 
 const AssistantUiChatContainer = ({
@@ -29,6 +31,8 @@ const AssistantUiChatContainer = ({
   children,
   handleInject,
   toolComponents,
+  isShowingSlowWarning,
+  connectionError,
 }: AssistantUiChatContainerProps) => {
   const codeVariation = useMemo(() => {
     return handleInject
@@ -55,6 +59,8 @@ const AssistantUiChatContainer = ({
             selectedModel={selectedModel}
             isModelSelectorLoading={isModelSelectorLoading}
             theme={theme}
+            isShowingSlowWarning={isShowingSlowWarning}
+            connectionError={connectionError}
           />
         </ThreadExtraContextProvider>
       </AssistantRuntimeProvider>

…settings-assistant-ui-chat-container.tsx …settings-assistant-ui-chat-container.tsxpackages/ui-components/src/components/ai-chat-container/step-settings-assistant-ui-chat-container.tsx renamed to packages/ui-components/src/components/assistant-ui/step-settings-assistant-ui-chat-container.tsx packages/ui-components/src/components/ai-chat-container/step-settings-assistant-ui-chat-container.tsx renamed to packages/ui-components/src/components/assistant-ui/step-settings-assistant-ui-chat-container.tsx

@@ -6,9 +6,13 @@ import { ExpandIcon, MinimizeIcon } from 'lucide-react';
 import { useRef } from 'react';
 import { cn } from '../../lib/cn';
 import { Button } from '../../ui/button';
-import { AssistantUiChatContainer } from '../assistant-ui/assistant-ui-chat-container';
+import {
+  AI_CHAT_CONTAINER_SIZES,
+  AiCliChatContainerSizeState,
+} from '../ai-chat-container/types';
 import { TooltipWrapper } from '../tooltip-wrapper';
-import { AI_CHAT_CONTAINER_SIZES, AiCliChatContainerSizeState } from './types';
+import { AssistantUiChatContainer } from './assistant-ui-chat-container';
+import { ConnectionStatusProps } from './types';
 
 const COLLAPSED_HEIGHT = 57;
 const DOCKED_HEIGHT = 450;
@@ -34,7 +38,7 @@ type StepSettingsAssistantUiChatContainerProps = {
   theme: Theme;
   handleInject: (code: string | SourceCode) => void;
   showFullWidth: boolean;
-};
+} & ConnectionStatusProps;
 
 const StepSettingsAssistantUiChatContainer = ({
   parentHeight,
@@ -53,6 +57,8 @@ const StepSettingsAssistantUiChatContainer = ({
   theme,
   handleInject,
   showFullWidth,
+  isShowingSlowWarning,
+  connectionError,
 }: StepSettingsAssistantUiChatContainerProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -100,6 +106,8 @@ const StepSettingsAssistantUiChatContainer = ({
         availableModels={availableModels}
         theme={theme}
         title={t('AI Chat')}
+        isShowingSlowWarning={isShowingSlowWarning}
+        connectionError={connectionError}
       >
         <div
           className="text-md dark:text-primary items-center font-bold flex"

packages/ui-components/src/components/assistant-ui/thread/connection-error.tsx

@@ -0,0 +1,17 @@
+import { AlertTriangle } from 'lucide-react';
+import { FC } from 'react';
+
+export const ConnectionError: FC<{ error: string }> = ({ error }) => {
+  return (
+    <div className="w-full max-w-2xl mb-3">
+      <div className="flex items-center gap-2 px-4 py-3 rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-800">
+        <div className="flex-shrink-0">
+          <AlertTriangle className="w-5 h-5 text-red-600 dark:text-red-400" />
+        </div>
+        <div className="flex-1 text-sm text-red-800 dark:text-red-200">
+          {error}
+        </div>
+      </div>
+    </div>
+  );
+};

packages/ui-components/src/components/assistant-ui/thread/connection-slow-warning.tsx

@@ -0,0 +1,18 @@
+import { t } from 'i18next';
+import { AlertCircle } from 'lucide-react';
+import { FC } from 'react';
+
+export const ConnectionSlowWarning: FC = () => {
+  return (
+    <div className="w-full max-w-2xl mb-3">
+      <div className="flex items-center gap-2 px-4 py-3 rounded-lg bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-800">
+        <div className="flex-shrink-0">
+          <AlertCircle className="w-5 h-5 text-amber-600 dark:text-amber-400" />
+        </div>
+        <div className="flex-1 text-sm text-amber-800 dark:text-amber-200">
+          {t('The AI is taking a bit longer than expected. Please wait...')}
+        </div>
+      </div>
+    </div>
+  );
+};

packages/ui-components/src/components/assistant-ui/thread/thread.tsx

@@ -25,6 +25,9 @@ import { MarkdownText } from '../markdown-text';
 import { useThreadExtraContext } from '../thread-extra-context';
 import { ToolFallback } from '../tool-fallback';
 import { TooltipIconButton } from '../tooltip-icon-button';
+import { ConnectionStatusProps } from '../types';
+import { ConnectionError } from './connection-error';
+import { ConnectionSlowWarning } from './connection-slow-warning';
 import { ReasoningPart } from './reasoning-part';
 
 const MarkdownTextWrapper = memo(({ theme, ...props }: any) => {
@@ -48,14 +51,17 @@ AssistantMessageWrapper.displayName = 'AssistantMessageWrapper';
 
 export type ThreadProps = {
   theme: Theme;
-} & ComposerProps;
+} & ConnectionStatusProps &
+  ComposerProps;
 
 export const Thread = ({
   theme,
   availableModels,
   selectedModel,
   onModelSelected,
   isModelSelectorLoading,
+  isShowingSlowWarning,
+  connectionError,
 }: ThreadProps) => {
   const messageComponents = useMemo(
     () => ({
@@ -72,6 +78,8 @@ export const Thread = ({
 
         <ThreadPrimitive.Messages components={messageComponents} />
 
+        {isShowingSlowWarning && <ConnectionSlowWarning />}
+
         <ThreadPrimitive.If running>
           <div className="w-full mb-2">
             <div className="flex items-center text-slate-800 dark:text-slate-50">
@@ -82,6 +90,8 @@ export const Thread = ({
           </div>
         </ThreadPrimitive.If>
 
+        {connectionError && <ConnectionError error={connectionError} />}
+
         <ThreadPrimitive.If empty={false}>
           <div className="min-h-8 flex-grow" />
         </ThreadPrimitive.If>
@@ -93,6 +103,7 @@ export const Thread = ({
             selectedModel={selectedModel}
             onModelSelected={onModelSelected}
             isModelSelectorLoading={isModelSelectorLoading}
+            connectionError={connectionError}
           />
         </div>
       </ThreadPrimitive.Viewport>
@@ -128,23 +139,29 @@ const ThreadWelcome: FC = () => {
   );
 };
 
-type ComposerProps = AiModelSelectorProps;
+type ComposerProps = AiModelSelectorProps & {
+  connectionError?: string | null;
+};
 
 const Composer = ({
   availableModels,
   selectedModel,
   onModelSelected,
   isModelSelectorLoading,
+  connectionError,
 }: ComposerProps) => {
+  const isDisabled = !!connectionError;
+
   return (
     <ComposerPrimitive.Root className="relative focus-within:border-ring/20 flex w-full flex-wrap items-end rounded-lg border bg-inherit px-2.5 shadow-sm transition-colors ease-in pb-9">
       <ComposerPrimitive.Input
         rows={1}
         autoFocus
         placeholder={t('Write a message...')}
         className="placeholder:text-muted-foreground max-h-40 flex-grow resize-none border-none bg-transparent px-2 py-4 text-sm outline-none focus:ring-0 disabled:cursor-not-allowed"
+        disabled={isDisabled}
       />
-      <ComposerAction />
+      <ComposerAction isDisabled={isDisabled} />
 
       <AiModelSelector
         availableModels={availableModels}
@@ -157,7 +174,7 @@ const Composer = ({
   );
 };
 
-const ComposerAction: FC = () => {
+const ComposerAction: FC<{ isDisabled: boolean }> = ({ isDisabled }) => {
   return (
     <>
       <ThreadPrimitive.If running={false}>
@@ -166,6 +183,7 @@ const ComposerAction: FC = () => {
             tooltip="Send"
             variant="default"
             className="my-2.5 size-8 p-2 transition-opacity ease-in"
+            disabled={isDisabled}
           >
             <SendHorizontalIcon />
           </TooltipIconButton>

packages/ui-components/src/components/assistant-ui/types.ts

@@ -0,0 +1,4 @@
+export type ConnectionStatusProps = {
+  isShowingSlowWarning?: boolean;
+  connectionError?: string | null;
+};

packages/ui-components/src/components/index.ts

@@ -1,6 +1,7 @@
 export * from './ai-chat-container';
 export * from './assistant-ui/assistant-top-bar';
 export * from './assistant-ui/assistant-ui-chat-container';
+export * from './assistant-ui/step-settings-assistant-ui-chat-container';
 export * from './assistant-ui/thread';
 export * from './assistant-ui/thread-extra-context';
 export * from './block-icon';