Rename AI Assistant to match the OpenOps edition (#1630)

Fixes OPS-3091.

## UI Changes

<img width="623" height="275" alt="Screenshot 2025-11-20 at 12 54 00 PM"
src="https://github.com/user-attachments/assets/1716aa2b-edc1-4ec1-a0b9-358f0e9e63f8"
/>
<img width="578" height="472" alt="Screenshot 2025-11-20 at 12 53 31 PM"
src="https://github.com/user-attachments/assets/3338dfc0-3c11-4305-a695-b1d74cfd5abd"
/>

Author: ravikiranvm

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

@@ -16,6 +16,8 @@
   "Refresh Page": "Refresh Page",
   "Contact Support": "Contact Support",
   "AI Assistant": "AI Assistant",
+  "OpenOps Assistant": "OpenOps Assistant",
+  "OpenOps Agent": "OpenOps Agent",
   "Enable AI": "Enable AI",
   "Save": "Save",
   "Valid Connection": "Valid Connection",

packages/react-ui/src/app/features/ai/ai-assistant-button.tsx

@@ -1,6 +1,6 @@
+import { useAssistantName } from '@/app/features/ai/lib/use-assistant-name';
 import { useAppStore } from '@/app/store/app-store';
 import { Button, cn, TooltipWrapper } from '@openops/components/ui';
-import { t } from 'i18next';
 import { Bot } from 'lucide-react';
 import { useCallback } from 'react';
 
@@ -10,12 +10,14 @@ const AiAssistantButton = ({ className }: { className?: string }) => {
     setIsAiChatOpened: s.setIsAiChatOpened,
   }));
 
+  const assistantName = useAssistantName();
+
   const onToggleAiChat = useCallback(() => {
     setIsAiChatOpened(!isAiChatOpened);
   }, [isAiChatOpened, setIsAiChatOpened]);
 
   return (
-    <TooltipWrapper tooltipText={t('AI Assistant')} tooltipPlacement="right">
+    <TooltipWrapper tooltipText={assistantName} tooltipPlacement="right">
       <Button
         variant="ai"
         className={cn('size-9 p-0 gap-2', className, {

packages/react-ui/src/app/features/ai/ai-configuration-prompt.tsx

@@ -1,4 +1,5 @@
 import { aiSettingsHooks } from '@/app/features/ai/lib/ai-settings-hooks';
+import { useAssistantName } from '@/app/features/ai/lib/use-assistant-name';
 import { useAppStore } from '@/app/store/app-store';
 import { cn, NoAiEnabledPopover } from '@openops/components/ui';
 
@@ -15,12 +16,15 @@ const AiConfigurationPrompt = ({ className }: AiConfigurationPromptProps) => {
     setIsAiChatOpened: s.setIsAiChatOpened,
   }));
 
+  const assistantName = useAssistantName();
+
   if (isLoading || hasActiveAiSettings || !isAiChatOpened) return null;
 
   return (
     <NoAiEnabledPopover
       className={cn('absolute left-4 bottom-[17px] z-50', className)}
       onCloseClick={() => setIsAiChatOpened(false)}
+      title={assistantName}
     />
   );
 };

packages/react-ui/src/app/features/ai/assistant/ai-chat-resizable-panel.tsx

@@ -2,9 +2,9 @@ import { useResizablePanelGroup } from '@/app/common/hooks/use-resizable-panel-g
 import { RESIZABLE_PANEL_IDS } from '@/app/constants/layout';
 import AssistantUiChat from '@/app/features/ai/assistant/assistant-ui-chat';
 import { aiSettingsHooks } from '@/app/features/ai/lib/ai-settings-hooks';
+import { useAssistantName } from '@/app/features/ai/lib/use-assistant-name';
 import { useAppStore } from '@/app/store/app-store';
 import { cn, ResizableHandle, ResizablePanel } from '@openops/components/ui';
-import { t } from 'i18next';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { ImperativePanelHandle } from 'react-resizable-panels';
 
@@ -21,6 +21,8 @@ const AiChatResizablePanel = ({ onDragging }: AiChatResizablePanelProps) => {
   const { hasActiveAiSettings, isLoading } =
     aiSettingsHooks.useHasActiveAiSettings();
 
+  const assistantName = useAssistantName();
+
   const resizablePanelRef = useRef<ImperativePanelHandle | null>(null);
 
   const { getPanelSize } = useResizablePanelGroup();
@@ -71,7 +73,7 @@ const AiChatResizablePanel = ({ onDragging }: AiChatResizablePanelProps) => {
       >
         <div className="w-full h-full flex bg-secondary overflow-hidden border-r">
           <AssistantUiChat
-            title={t('AI Assistant')}
+            title={assistantName}
             onClose={() => setIsAiChatOpened(false)}
           />
         </div>

packages/react-ui/src/app/features/ai/assistant/assistant-ui-chat.tsx

@@ -91,6 +91,8 @@ const AssistantUiChat = ({
     return title;
   }, [chatId, chats, title]);
 
+  const isTitleDefault = currentChatTitle === title;
+
   const onChatSelected = useCallback(
     (id: string) => {
       onChatIdChange(id);
@@ -139,6 +141,7 @@ const AssistantUiChat = ({
         runtime={runtime}
         onNewChat={onNewChatClick}
         title={currentChatTitle}
+        isTitleDefault={isTitleDefault}
         availableModels={availableModels}
         onModelSelected={onModelSelected}
         isModelSelectorLoading={isModelSelectorLoading}

packages/react-ui/src/app/features/ai/lib/use-assistant-name.ts

@@ -0,0 +1,10 @@
+import { flagsHooks } from '@/app/common/hooks/flags-hooks';
+import { FlagId, OpsEdition } from '@openops/shared';
+import { t } from 'i18next';
+
+export const useAssistantName = () => {
+  const edition = flagsHooks.useFlag<OpsEdition>(FlagId.EDITION).data;
+  return edition === OpsEdition.COMMUNITY
+    ? t('OpenOps Assistant')
+    : t('OpenOps Agent');
+};

packages/ui-components/src/components/ai-chat-container/no-ai-enabled-popover.tsx

@@ -8,9 +8,11 @@ import { TooltipWrapper } from '../tooltip-wrapper';
 const NoAiEnabledPopover = ({
   className,
   onCloseClick,
+  title,
 }: {
   className?: string;
   onCloseClick: () => void;
+  title: string;
 }) => {
   return (
     <div className={cn('bg-background shadow-editor rounded-lg', className)}>
@@ -19,7 +21,7 @@ const NoAiEnabledPopover = ({
           <div className="size-8 flex justify-center items-center bg-background bg-gradient-to-b from-ring/40 to-primary-200/40 rounded-xl">
             <Bot size={20} />
           </div>
-          <h2 className="font-bold text-base">{t('AI Assistant')}</h2>
+          <h2 className="font-bold text-base">{title}</h2>
         </div>
         <TooltipWrapper tooltipText={t('Close')}>
           <Button

packages/ui-components/src/components/assistant-ui/assistant-top-bar.tsx

@@ -10,16 +10,15 @@ import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
 type AssistantTopBarProps = {
   onClose: () => void;
   onNewChat: () => void;
-  title?: string;
+  title: string;
+  isTitleDefault?: boolean;
   onHistoryOpenChange?: (open: boolean) => void;
   isHistoryOpen?: boolean;
   historyContent?: ReactNode;
   children: ReactNode;
   chatId?: string | null;
 };
 
-const AI_ASSISTANT_DEFAULT_TITLE = 'AI Assistant';
-
 const AssistantTopBar = ({
   onNewChat,
   onClose,
@@ -29,13 +28,13 @@ const AssistantTopBar = ({
   historyContent,
   children,
   chatId,
+  isTitleDefault,
 }: AssistantTopBarProps) => {
   const animatedTitle = useTypingAnimation({
-    text: title || AI_ASSISTANT_DEFAULT_TITLE,
+    text: title,
     speed: 50,
-    fromText: AI_ASSISTANT_DEFAULT_TITLE,
-    defaultText: AI_ASSISTANT_DEFAULT_TITLE,
     chatId: chatId,
+    enableAnimation: !isTitleDefault,
   });
 
   return (

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

@@ -14,6 +14,7 @@ type AssistantUiChatContainerProps = {
   runtime: AssistantRuntime;
   toolComponents?: Record<string, ReactNode>;
   handleInject?: (codeContent: string | SourceCode) => void;
+  isTitleDefault?: boolean;
 } & ConnectionStatusProps &
   AssistantTopBarProps &
   ThreadProps;
@@ -36,6 +37,7 @@ const AssistantUiChatContainer = ({
   isShowingSlowWarning,
   connectionError,
   chatId,
+  isTitleDefault,
 }: AssistantUiChatContainerProps) => {
   const codeVariation = useMemo(() => {
     return handleInject
@@ -53,6 +55,7 @@ const AssistantUiChatContainer = ({
         isHistoryOpen={isHistoryOpen}
         historyContent={children}
         chatId={chatId}
+        isTitleDefault={isTitleDefault}
       >
         {null}
       </AssistantTopBar>

packages/ui-components/src/hooks/use-typing-animation.ts

@@ -3,41 +3,30 @@ import { useEffect, useRef, useState } from 'react';
 type UseTypingAnimationOptions = {
   text: string;
   speed?: number;
-  fromText?: string;
   chatId?: string | null;
-  defaultText?: string;
+  enableAnimation?: boolean;
 };
 
 export function useTypingAnimation({
   text,
   speed = 50,
-  fromText,
   chatId,
-  defaultText,
+  enableAnimation,
 }: UseTypingAnimationOptions): string {
   const [displayedText, setDisplayedText] = useState(text);
-  const prevTextRef = useRef(text);
-  const prevChatIdRef = useRef<string | null | undefined>(chatId);
+  const prevChatIdRef = useRef(chatId);
+  const prevEnableAnimationRef = useRef(enableAnimation);
 
   useEffect(() => {
-    let shouldAnimate = false;
     let interval: NodeJS.Timeout | undefined;
-
-    if (fromText !== undefined && defaultText !== undefined) {
-      const isSameChat = prevChatIdRef.current === chatId;
-      const wasDefault =
-        prevTextRef.current === defaultText || prevTextRef.current === fromText;
-      const nowHasName = text !== defaultText && text !== fromText;
-
-      shouldAnimate = isSameChat && wasDefault && nowHasName;
-    } else if (fromText !== undefined) {
-      shouldAnimate = prevTextRef.current === fromText && text !== fromText;
-    }
+    const shouldAnimate =
+      prevChatIdRef.current === chatId &&
+      prevEnableAnimationRef.current === false &&
+      enableAnimation === true;
 
     if (shouldAnimate && text.length > 0) {
       setDisplayedText('');
       let currentIndex = 0;
-
       interval = setInterval(() => {
         if (currentIndex < text.length) {
           setDisplayedText(text.slice(0, currentIndex + 1));
@@ -46,19 +35,15 @@ export function useTypingAnimation({
           clearInterval(interval);
         }
       }, speed);
+
+      return () => clearInterval(interval);
     } else {
       setDisplayedText(text);
     }
 
-    prevTextRef.current = text;
     prevChatIdRef.current = chatId;
-
-    return () => {
-      if (interval) {
-        clearInterval(interval);
-      }
-    };
-  }, [text, speed, fromText, chatId, defaultText]);
+    prevEnableAnimationRef.current = enableAnimation;
+  }, [text, speed, chatId, enableAnimation]);
 
   return displayedText;
 }