[Customer Portal][FE][Web] Integrate Rich Text Editor into Case Activity and Refine App Shell UI

apps/customer-portal/webapp/src/components/common/rich-text-editor/Editor.tsx

@@ -111,6 +111,24 @@ const OnChangeHTMLPlugin = ({
   );
 };
 
+/**
+ * Internal component to handle resetting the editor.
+ */
+const ResetPlugin = ({ resetTrigger }: { resetTrigger?: number }) => {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (resetTrigger !== undefined && resetTrigger > 0) {
+      editor.update(() => {
+        const root = $getRoot();
+        root.clear();
+      });
+    }
+  }, [editor, resetTrigger]);
+
+  return null;
+};
+
 /** Static editor config (namespace, nodes, theme). */
 const DEFAULT_EDITOR_CONFIG = {
   namespace: "MyEditor",
@@ -147,13 +165,20 @@ const Editor = ({
   disabled = false,
   value,
   onChange,
+  resetTrigger,
+  minHeight = 150,
+  showToolbar = true,
 }: {
   onAttachmentClick?: () => void;
   attachments?: File[];
   onAttachmentRemove?: (index: number) => void;
   disabled?: boolean;
   value?: string;
   onChange?: (html: string) => void;
+  resetTrigger?: number;
+  minHeight?: number | string;
+  showToolbar?: boolean;
+  placeholder?: string;
 }): JSX.Element => {
   const oxygenTheme = useTheme();
   const logger = useLogger();
@@ -220,15 +245,23 @@ const Editor = ({
         }}
       >
         <EditableStatePlugin disabled={disabled} />
-        <Toolbar onAttachmentClick={onAttachmentClick} disabled={disabled} />
-        <Divider sx={{ my: 1 }} />
+        {showToolbar && (
+          <>
+            <Toolbar
+              onAttachmentClick={onAttachmentClick}
+              disabled={disabled}
+            />
+            <Divider sx={{ my: 1 }} />
+          </>
+        )}
         <Box
           sx={{
             position: "relative",
-            minHeight: 150,
+            minHeight,
             "& .editor-input": {
               outline: "none",
-              minHeight: "150px",
+              minHeight:
+                typeof minHeight === "number" ? `${minHeight}px` : minHeight,
               fontSize: oxygenTheme.typography.body2.fontSize,
               color: "text.primary",
               typography: "body2",
@@ -296,6 +329,7 @@ const Editor = ({
           <ClickableLinkPlugin />
           <InitialValuePlugin initialHtml={value} />
           <OnChangeHTMLPlugin onChange={onChange} />
+          <ResetPlugin resetTrigger={resetTrigger} />
         </Box>
         {attachments.length > 0 && (
           <>

apps/customer-portal/webapp/src/components/common/side-nav-bar/SideBar.tsx

@@ -80,7 +80,7 @@ export default function SideBar({
 
       {/* sidebar footer items */}
       <Sidebar.Footer>
-        <SubscriptionWidget collapsed={collapsed} />
+        {/* <SubscriptionWidget collapsed={collapsed} /> */}
         <Sidebar.Category>
           <Link
             component={NavigateLink}

apps/customer-portal/webapp/src/components/support/case-details/activity-tab/ActivityCommentInput.tsx

@@ -14,26 +14,23 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import {
-  Box,
-  CircularProgress,
-  IconButton,
-  TextField,
-} from "@wso2/oxygen-ui";
+import { Box, CircularProgress, IconButton } from "@wso2/oxygen-ui";
 import { Send } from "@wso2/oxygen-ui-icons-react";
 import { useState } from "react";
 import { usePostComment } from "@api/usePostComment";
 import { useAsgardeo } from "@asgardeo/react";
 import { useErrorBanner } from "@context/error-banner/ErrorBannerContext";
+import { stripHtml } from "@utils/support";
+import Editor from "@components/common/rich-text-editor/Editor";
 import type { JSX } from "react";
 
 export interface ActivityCommentInputProps {
   caseId: string;
 }
 
 /**
- * Fixed (non-scrollable) input row with text field and send button.
- * Posts comment via usePostComment; on success invalidates and refetches comments.
+ * Input row with rich-text editor and send button.
+ * Uses the shared Editor component and posts comments via usePostComment; on success invalidates and refetches comments.
  *
  * @param {ActivityCommentInputProps} props - caseId for POST.
  * @returns {JSX.Element} The comment input component.
@@ -42,19 +39,23 @@ export default function ActivityCommentInput({
   caseId,
 }: ActivityCommentInputProps): JSX.Element {
   const [value, setValue] = useState("");
+  const [resetTrigger, setResetTrigger] = useState(0);
   const postComment = usePostComment();
   const { isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
   const { showError } = useErrorBanner();
 
   const isDisabled = !isSignedIn || isAuthLoading || postComment.isPending;
 
   const handleSend = () => {
-    if (!value.trim() || isDisabled) return;
-    const content = value.trim();
+    if (stripHtml(value).length === 0 || isDisabled) return;
+
     postComment.mutate(
-      { caseId, body: { content } },
+      { caseId, body: { content: value.trim() } },
       {
-        onSuccess: () => setValue(""),
+        onSuccess: () => {
+          setValue("");
+          setResetTrigger((prev) => prev + 1);
+        },
         onError: (error: unknown) => {
           const message =
             error instanceof Error && error.message
@@ -70,38 +71,54 @@ export default function ActivityCommentInput({
     <Box
       sx={{
         display: "flex",
+        flexDirection: "column",
         gap: 1,
         px: 2,
         py: 1.5,
         flexShrink: 0,
       }}
     >
-      <TextField
-        fullWidth
-        placeholder="Add a comment..."
-        size="small"
-        value={value}
-        disabled={isDisabled}
-        onChange={(e) => setValue(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" && !e.shiftKey) {
-            e.preventDefault();
-            handleSend();
-          }
-        }}
-      />
-      <IconButton
-        disabled={!value.trim() || isDisabled}
-        onClick={handleSend}
-        color="warning"
-        aria-label="Send comment"
-      >
-        {postComment.isPending ? (
-          <CircularProgress color="inherit" size={18} />
-        ) : (
-          <Send size={18} />
-        )}
-      </IconButton>
+      <Box sx={{ flex: 1, position: "relative" }}>
+        <Editor
+          value={value}
+          onChange={setValue}
+          disabled={isDisabled}
+          resetTrigger={resetTrigger}
+          minHeight={40}
+          showToolbar={true}
+          placeholder="Write a comment..."
+        />
+        <Box
+          sx={{
+            position: "absolute",
+            bottom: 8,
+            right: 8,
+            zIndex: 1,
+            display: "flex",
+            gap: 1,
+          }}
+        >
+          <IconButton
+            disabled={stripHtml(value).length === 0 || isDisabled}
+            onClick={handleSend}
+            color="warning"
+            aria-label="Send comment"
+            sx={{
+              bgcolor: "background.paper",
+              "&:hover": { bgcolor: "action.hover" },
+              boxShadow: 1,
+              width: 32,
+              height: 32,
+            }}
+          >
+            {postComment.isPending ? (
+              <CircularProgress color="inherit" size={18} />
+            ) : (
+              <Send size={18} />
+            )}
+          </IconButton>
+        </Box>
+      </Box>
     </Box>
   );
 }

apps/customer-portal/webapp/src/components/support/case-details/activity-tab/ChatMessageCard.tsx

@@ -56,9 +56,6 @@ export default function ChatMessageCard({
         p: 1.5,
         maxWidth: "100%",
         bgcolor: isCurrentUser ? primaryBg : "background.paper",
-        border: "none",
-        borderRadius: 0,
-        boxShadow: "none",
       }}
     >
       <Box

apps/customer-portal/webapp/src/constants/appLayoutConstants.ts

@@ -51,7 +51,7 @@ export const APP_SHELL_NAV_ITEMS: AppShellNavItem[] = [
     path: "security-center",
     icon: Shield,
   },
-  {
+  /* {
     id: "engagements",
     label: "Engagements",
     path: "engagements",
@@ -63,7 +63,7 @@ export const APP_SHELL_NAV_ITEMS: AppShellNavItem[] = [
     path: "legal-contracts",
     icon: FileText,
   },
-  { id: "community", label: "Community", path: "community", icon: Users },
+  { id: "community", label: "Community", path: "community", icon: Users }, */
   {
     id: "announcements",
     label: "Announcements",