feat(frontend): display lock icon when confirmation mode is enabled (#11030)

frontend/src/components/features/chat/chat-interface.tsx

@@ -34,6 +34,7 @@ import { useUploadFiles } from "#/hooks/mutation/use-upload-files";
 import { useConfig } from "#/hooks/query/use-config";
 import { validateFiles } from "#/utils/file-validation";
 import { setMessageToSend } from "#/state/conversation-slice";
+import ConfirmationModeEnabled from "./confirmation-mode-enabled";
 
 function getEntryPoint(
   hasRepository: boolean | null,
@@ -209,17 +210,20 @@ export function ChatInterface() {
 
         <div className="flex flex-col gap-[6px]">
           <div className="flex justify-between relative">
-            {events.length > 0 && (
-              <TrajectoryActions
-                onPositiveFeedback={() =>
-                  onClickShareFeedbackActionButton("positive")
-                }
-                onNegativeFeedback={() =>
-                  onClickShareFeedbackActionButton("negative")
-                }
-                isSaasMode={config?.APP_MODE === "saas"}
-              />
-            )}
+            <div className="flex items-center gap-1">
+              <ConfirmationModeEnabled />
+              {events.length > 0 && (
+                <TrajectoryActions
+                  onPositiveFeedback={() =>
+                    onClickShareFeedbackActionButton("positive")
+                  }
+                  onNegativeFeedback={() =>
+                    onClickShareFeedbackActionButton("negative")
+                  }
+                  isSaasMode={config?.APP_MODE === "saas"}
+                />
+              )}
+            </div>
 
             <div className="absolute left-1/2 transform -translate-x-1/2 bottom-0">
               {curAgentState === AgentState.RUNNING && <TypingIndicator />}

frontend/src/components/features/chat/confirmation-mode-enabled.tsx

@@ -0,0 +1,29 @@
+import { useTranslation } from "react-i18next";
+import { Tooltip } from "@heroui/react";
+import { I18nKey } from "#/i18n/declaration";
+import LockIcon from "#/icons/lock.svg?react";
+import { useSettings } from "#/hooks/query/use-settings";
+
+function ConfirmationModeEnabled() {
+  const { t } = useTranslation();
+
+  const { data: settings } = useSettings();
+
+  if (!settings?.CONFIRMATION_MODE) {
+    return null;
+  }
+
+  return (
+    <Tooltip
+      content={t(I18nKey.COMMON$CONFIRMATION_MODE_ENABLED)}
+      closeDelay={100}
+      className="bg-white text-black hover:bg-transparent"
+    >
+      <div className="flex items-center justify-center w-[26px] h-[26px] rounded-lg bg-[#25272D]">
+        <LockIcon width={15} height={15} />
+      </div>
+    </Tooltip>
+  );
+}
+
+export default ConfirmationModeEnabled;

frontend/src/i18n/declaration.ts

@@ -910,4 +910,5 @@ export enum I18nKey {
   COMMON$STOP_RUNTIME = "COMMON$STOP_RUNTIME",
   COMMON$START_RUNTIME = "COMMON$START_RUNTIME",
   COMMON$JUPYTER_EMPTY_MESSAGE = "COMMON$JUPYTER_EMPTY_MESSAGE",
+  COMMON$CONFIRMATION_MODE_ENABLED = "COMMON$CONFIRMATION_MODE_ENABLED",
 }

frontend/src/i18n/translation.json

@@ -14558,5 +14558,21 @@
     "tr": "Jupyter defteriniz boş. Gösterilecek hücre yok.",
     "de": "Ihr Jupyter-Notebook ist leer. Keine Zellen zum Anzeigen.",
     "uk": "Ваш Jupyter-ноутбук порожній. Немає клітинок для відображення."
+  },
+  "COMMON$CONFIRMATION_MODE_ENABLED": {
+    "en": "Confirmation mode enabled",
+    "ja": "確認モードが有効になっています",
+    "zh-CN": "已启用确认模式",
+    "zh-TW": "已啟用確認模式",
+    "ko-KR": "확인 모드가 활성화되었습니다",
+    "no": "Bekreftelsesmodus aktivert",
+    "it": "Modalità di conferma abilitata",
+    "pt": "Modo de confirmação ativado",
+    "es": "Modo de confirmación activado",
+    "ar": "تم تفعيل وضع التأكيد",
+    "fr": "Mode de confirmation activé",
+    "tr": "Onay modu etkinleştirildi",
+    "de": "Bestätigungsmodus aktiviert",
+    "uk": "Режим підтвердження увімкнено"
   }
 }

frontend/src/icons/lock.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.25C9.92893 3.25 8.25 4.92893 8.25 7V10H7C6.44772 10 6 10.4477 6 11V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V11C18 10.4477 17.5523 10 17 10H15.75V7C15.75 4.92893 14.0711 3.25 12 3.25ZM14.25 10V7C14.25 5.75736 13.2426 4.75 12 4.75C10.7574 4.75 9.75 5.75736 9.75 7V10H14.25Z" fill="currentColor"/>
+</svg>