From 1e5bff82f2f434c95316a4ae1be8a406b699d97d Mon Sep 17 00:00:00 2001
From: Hiep Le <69354317+hieptl@users.noreply.github.com>
Date: Fri, 7 Nov 2025 13:14:28 +0700
Subject: [PATCH] feat(frontend): visually highlight chat input container in
 plan mode (#11647)

---
 .../features/chat/components/chat-input-container.tsx | 11 ++++++++++-
 frontend/src/routes/planner-tab.tsx                   |  6 +++++-
 frontend/src/state/conversation-store.ts              |  8 ++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/features/chat/components/chat-input-container.tsx b/frontend/src/components/features/chat/components/chat-input-container.tsx
index c37b479b71..acba3074f5 100644
--- a/frontend/src/components/features/chat/components/chat-input-container.tsx
+++ b/frontend/src/components/features/chat/components/chat-input-container.tsx
@@ -3,6 +3,8 @@ import { DragOver } from "../drag-over";
 import { UploadedFiles } from "../uploaded-files";
 import { ChatInputRow } from "./chat-input-row";
 import { ChatInputActions } from "./chat-input-actions";
+import { useConversationStore } from "#/state/conversation-store";
+import { cn } from "#/utils/utils";
 
 interface ChatInputContainerProps {
   chatContainerRef: React.RefObject<HTMLDivElement | null>;
@@ -43,10 +45,17 @@ export function ChatInputContainer({
   onFocus,
   onBlur,
 }: ChatInputContainerProps) {
+  const conversationMode = useConversationStore(
+    (state) => state.conversationMode,
+  );
+
   return (
     <div
       ref={chatContainerRef}
-      className="bg-[#25272D] box-border content-stretch flex flex-col items-start justify-center p-4 pt-3 relative rounded-[15px] w-full"
+      className={cn(
+        "bg-[#25272D] box-border content-stretch flex flex-col items-start justify-center p-4 pt-3 relative rounded-[15px] w-full",
+        conversationMode === "plan" && "border border-[#597FF4]",
+      )}
       onDragOver={(e) => onDragOver(e, disabled)}
       onDragLeave={(e) => onDragLeave(e, disabled)}
       onDrop={(e) => onDrop(e, disabled)}
diff --git a/frontend/src/routes/planner-tab.tsx b/frontend/src/routes/planner-tab.tsx
index b403c49387..4b2fc7eb33 100644
--- a/frontend/src/routes/planner-tab.tsx
+++ b/frontend/src/routes/planner-tab.tsx
@@ -1,9 +1,13 @@
 import { useTranslation } from "react-i18next";
 import { I18nKey } from "#/i18n/declaration";
 import LessonPlanIcon from "#/icons/lesson-plan.svg?react";
+import { useConversationStore } from "#/state/conversation-store";
 
 function PlannerTab() {
   const { t } = useTranslation();
+  const setConversationMode = useConversationStore(
+    (state) => state.setConversationMode,
+  );
 
   return (
     <div className="flex flex-col items-center justify-center w-full h-full p-10">
@@ -13,7 +17,7 @@ function PlannerTab() {
       </span>
       <button
         type="button"
-        onClick={() => {}}
+        onClick={() => setConversationMode("plan")}
         className="flex w-[164px] h-[40px] p-2 justify-center items-center shrink-0 rounded-lg bg-white overflow-hidden text-black text-ellipsis font-sans text-[16px] not-italic font-normal leading-[20px] hover:cursor-pointer hover:opacity-80"
       >
         {t(I18nKey.COMMON$CREATE_A_PLAN)}
diff --git a/frontend/src/state/conversation-store.ts b/frontend/src/state/conversation-store.ts
index 8c929ddee8..ae333c4986 100644
--- a/frontend/src/state/conversation-store.ts
+++ b/frontend/src/state/conversation-store.ts
@@ -9,6 +9,8 @@ export type ConversationTab =
   | "terminal"
   | "planner";
 
+export type ConversationMode = "code" | "plan";
+
 export interface IMessageToSend {
   text: string;
   timestamp: number;
@@ -26,6 +28,7 @@ interface ConversationState {
   submittedMessage: string | null;
   shouldHideSuggestions: boolean; // New state to hide suggestions when input expands
   hasRightPanelToggled: boolean;
+  conversationMode: ConversationMode;
 }
 
 interface ConversationActions {
@@ -49,6 +52,7 @@ interface ConversationActions {
   setSubmittedMessage: (message: string | null) => void;
   resetConversationState: () => void;
   setHasRightPanelToggled: (hasRightPanelToggled: boolean) => void;
+  setConversationMode: (conversationMode: ConversationMode) => void;
 }
 
 type ConversationStore = ConversationState & ConversationActions;
@@ -74,6 +78,7 @@ export const useConversationStore = create<ConversationStore>()(
       submittedMessage: null,
       shouldHideSuggestions: false,
       hasRightPanelToggled: true,
+      conversationMode: "code",
 
       // Actions
       setIsRightPanelShown: (isRightPanelShown) =>
@@ -209,6 +214,9 @@ export const useConversationStore = create<ConversationStore>()(
 
       setHasRightPanelToggled: (hasRightPanelToggled) =>
         set({ hasRightPanelToggled }, false, "setHasRightPanelToggled"),
+
+      setConversationMode: (conversationMode) =>
+        set({ conversationMode }, false, "setConversationMode"),
     }),
     {
       name: "conversation-store",