[Customer Portal][FE][Web] Add Knowledge Base Recommendations API Integration and Refactor List Layout Components

apps/customer-portal/webapp/src/components/list-view/ListPageHeader.tsx

@@ -14,7 +14,7 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { Box, Button, Typography } from "@wso2/oxygen-ui";
+import { Box, Button, Stack, Typography } from "@wso2/oxygen-ui";
 import { ArrowLeft } from "@wso2/oxygen-ui-icons-react";
 import type { JSX, ReactNode } from "react";
 
@@ -41,25 +41,27 @@ export default function ListPageHeader({
   actions,
 }: ListPageHeaderProps): JSX.Element {
   return (
-    <Box>
+    <Stack spacing={2} sx={{ alignItems: "stretch" }}>
       <Button
         startIcon={<ArrowLeft size={16} />}
         onClick={onBack}
-        sx={{ mb: 2 }}
         variant="text"
+        sx={{
+          alignSelf: "flex-start",
+          px: 0,
+          minWidth: 0,
+          mb: 0,
+        }}
       >
         {backLabel}
       </Button>
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: { xs: "column", sm: "row" },
-          justifyContent: actions ? "space-between" : "flex-start",
-          alignItems: { xs: "flex-start", sm: actions ? "flex-start" : "flex-start" },
-          gap: 2,
-        }}
+      <Stack
+        direction={{ xs: "column", sm: actions ? "row" : "column" }}
+        spacing={2}
+        justifyContent={actions ? "space-between" : "flex-start"}
+        alignItems={{ xs: "stretch", sm: actions ? "flex-start" : "stretch" }}
       >
-        <Box>
+        <Box sx={{ minWidth: 0 }}>
           <Typography variant="h4" color="text.primary" sx={{ mb: 1 }}>
             {title}
           </Typography>
@@ -68,7 +70,7 @@ export default function ListPageHeader({
           </Typography>
         </Box>
         {actions && <Box sx={{ flexShrink: 0 }}>{actions}</Box>}
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }

apps/customer-portal/webapp/src/components/list-view/ListStatGrid.tsx

@@ -3,6 +3,7 @@
 // WSO2 LLC. licenses this file to you under the Apache License,
 // Version 2.0 (the "License"); you may not use this file except
 // in compliance with the License.
+//
 // You may obtain a copy of the License at
 //
 // http://www.apache.org/licenses/LICENSE-2.0
@@ -14,7 +15,7 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { Box, Grid, StatCard, Skeleton } from "@wso2/oxygen-ui";
+import { Box, StatCard, Skeleton } from "@wso2/oxygen-ui";
 import { type JSX } from "react";
 import ErrorIndicator from "@components/error-indicator/ErrorIndicator";
 import { type SupportStatConfig } from "@features/support/constants/supportConstants";
@@ -36,6 +37,17 @@ export interface ListStatGridProps<T extends string> {
   valueFormatter?: (value: number) => string | number;
 }
 
+/**
+ * Maps MUI-style 12-column `size` segments to `grid-template-columns` repeat count.
+ *
+ * @param {number} segment - Grid segment (12 = one full-width column).
+ * @returns {string} A `repeat(..., minmax(0, 1fr))` track list.
+ */
+function columnsFromSegment(segment: number): string {
+  const n = 12 / segment;
+  return `repeat(${n}, minmax(0, 1fr))`;
+}
+
 /**
  * ListStatGrid component to display a grid of support statistics.
  *
@@ -52,18 +64,37 @@ export default function ListStatGrid<T extends string>({
   itemSize = { xs: 12, sm: 6, md: 3 },
   valueFormatter,
 }: ListStatGridProps<T>): JSX.Element {
+  const xs = itemSize.xs ?? 12;
+  const sm = itemSize.sm ?? 6;
+  const md = itemSize.md ?? 3;
+  const lg = itemSize.lg ?? md;
+  const xl = itemSize.xl ?? lg;
+
   return (
-    <Grid container spacing={spacing}>
+    <Box
+      sx={{
+        display: "grid",
+        width: "100%",
+        gap: spacing,
+        gridTemplateColumns: {
+          xs: columnsFromSegment(xs),
+          sm: columnsFromSegment(sm),
+          md: columnsFromSegment(md),
+          lg: columnsFromSegment(lg),
+          xl: columnsFromSegment(xl),
+        },
+      }}
+    >
       {configs.map((stat) => {
         const SecondaryIcon = stat.secondaryIcon;
         const Icon = stat.icon;
 
         return (
-          <Grid
+          <Box
             key={stat.key}
-            size={itemSize}
             sx={{
               position: "relative",
+              minWidth: 0,
             }}
           >
             {SecondaryIcon && (
@@ -106,9 +137,9 @@ export default function ListStatGrid<T extends string>({
               icon={<Icon />}
               iconColor={stat.iconColor}
             />
-          </Grid>
+          </Box>
         );
       })}
-    </Grid>
+    </Box>
   );
 }

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

@@ -32,6 +32,7 @@ export const ApiQueryKeys = {
   CONVERSATION_MESSAGES: "conversation-messages",
   CONVERSATION_STATS: "conversation-stats",
   CONVERSATION_SUMMARY: "conversation-summary",
+  CONVERSATION_RECOMMENDATIONS_SEARCH: "conversation-recommendations-search",
   DEPLOYMENTS: "deployments",
   DEPLOYMENT_ATTACHMENTS: "deployment-attachments",
   PRODUCTS: "products",

apps/customer-portal/webapp/src/features/dashboard/components/cases-table/CasesList.tsx

@@ -56,7 +56,7 @@ const CasesList = ({
           <TableHead>
             <TableRow>
               <TableCell>Created</TableCell>
-              <TableCell>Details</TableCell>
+              <TableCell sx={{ maxWidth: 320 }}>Details</TableCell>
               <TableCell>Severity</TableCell>
               <TableCell>Assigned to</TableCell>
               <TableCell>Status</TableCell>
@@ -156,15 +156,24 @@ const CasesList = ({
                       </Typography>
                     </Box>
                   </TableCell>
-                  <TableCell>
+                  <TableCell sx={{ maxWidth: 320 }}>
                     <Box
                       sx={{
                         display: "flex",
                         flexDirection: "column",
                         gap: 0.25,
+                        minWidth: 0,
                       }}
                     >
-                      <Typography variant="body2" color="text.primary">
+                      <Typography
+                        variant="body2"
+                        color="text.primary"
+                        sx={{
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                        }}
+                      >
                         {row.title || "--"}
                       </Typography>
                       <Typography variant="caption" color="text.secondary">

apps/customer-portal/webapp/src/features/support/api/useConversationRecommendationsSearch.ts

@@ -0,0 +1,91 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { useAsgardeo } from "@asgardeo/react";
+import { useAuthApiClient } from "@utils/useAuthApiClient";
+import { useLogger } from "@hooks/useLogger";
+import { ApiQueryKeys } from "@constants/apiConstants";
+import type {
+  RecommendationSearchRequest,
+  RecommendationSearchResponse,
+} from "@features/support/types/recommendations";
+
+/**
+ * POST /conversations/recommendations/search — KB article recommendations for chat/case context.
+ *
+ * @param {RecommendationSearchRequest | null} payload - Request body, or null to skip.
+ * @param {boolean} enabled - When false, the query does not run.
+ * @returns {UseQueryResult<RecommendationSearchResponse, Error>} Query result.
+ */
+export function useConversationRecommendationsSearch(
+  payload: RecommendationSearchRequest | null,
+  enabled: boolean,
+): UseQueryResult<RecommendationSearchResponse, Error> {
+  const logger = useLogger();
+  const { isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const authFetch = useAuthApiClient();
+
+  const msgCount = payload?.chatHistory.length ?? 0;
+  const firstTs = payload?.chatHistory[0]?.timestamp ?? "";
+  const lastTs = payload?.chatHistory[msgCount - 1]?.timestamp ?? "";
+
+  return useQuery<RecommendationSearchResponse, Error>({
+    queryKey: [
+      ApiQueryKeys.CONVERSATION_RECOMMENDATIONS_SEARCH,
+      msgCount,
+      firstTs,
+      lastTs,
+    ],
+    queryFn: async (): Promise<RecommendationSearchResponse> => {
+      if (!payload) {
+        throw new Error("Recommendation payload is required");
+      }
+      const baseUrl = window.config?.CUSTOMER_PORTAL_BACKEND_BASE_URL;
+      if (!baseUrl) {
+        throw new Error("CUSTOMER_PORTAL_BACKEND_BASE_URL is not configured");
+      }
+
+      const requestUrl = `${baseUrl}/conversations/recommendations/search`;
+      logger.debug("[useConversationRecommendationsSearch] POST", requestUrl);
+
+      const response = await authFetch(requestUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        throw new Error(
+          `Recommendations request failed: ${response.status} ${response.statusText}`,
+        );
+      }
+
+      const data: RecommendationSearchResponse = await response.json();
+      logger.debug("[useConversationRecommendationsSearch] Response received");
+      return data;
+    },
+    enabled:
+      enabled &&
+      !!payload &&
+      payload.chatHistory.length > 0 &&
+      isSignedIn &&
+      !isAuthLoading,
+    staleTime: 5 * 60 * 1000,
+  });
+}

apps/customer-portal/webapp/src/features/support/components/case-details/details-tab/CaseDetailsContent.tsx

@@ -25,6 +25,9 @@ import { useFloatingNoveraVisibility } from "@context/floating-novera-visibility
 import { useGetCaseAttachments } from "@features/support/api/useGetCaseAttachments";
 import { useGetCallRequests } from "@features/support/api/useGetCallRequests";
 import useGetProjectFilters from "@api/useGetProjectFilters";
+import useGetCaseComments from "@features/support/api/useGetCaseComments";
+import { useConversationRecommendationsSearch } from "@features/support/api/useConversationRecommendationsSearch";
+import { buildRecommendationRequestFromCase } from "@features/support/utils/recommendations";
 import {
   getStatusColor,
   resolveColorFromTheme,
@@ -148,6 +151,24 @@ export default function CaseDetailsContent({
   const hideKnowledgeBaseTab =
     isSecurityReportAnalysis || isEngagementRoute || isServiceRequest;
 
+  // Eagerly fetch KB recommendations so the tab count is available on page load.
+  // React Query deduplicates the network call when the KB tab component mounts later.
+  const { data: kbCommentsData, isLoading: isKbCommentsLoading } = useGetCaseComments(
+    hideKnowledgeBaseTab ? "" : resolvedProjectId,
+    hideKnowledgeBaseTab ? "" : caseId,
+    { offset: 0 },
+  );
+  const kbPayload = useMemo(
+    () => (hideKnowledgeBaseTab ? null : buildRecommendationRequestFromCase(data, kbCommentsData?.comments ?? [])),
+    [hideKnowledgeBaseTab, data, kbCommentsData],
+  );
+  const { data: kbRecData, isLoading: isKbRecLoading } = useConversationRecommendationsSearch(
+    kbPayload,
+    !hideKnowledgeBaseTab && !isKbCommentsLoading && !!kbPayload,
+  );
+  const knowledgeBaseCount = kbRecData ? (kbRecData.recommendations?.length ?? 0) : undefined;
+  const knowledgeBaseCountLoading = !hideKnowledgeBaseTab && (isKbCommentsLoading || (!!kbPayload && isKbRecLoading && !kbRecData));
+
   const visibleTabs = useMemo(
     () => [
       0,
@@ -314,6 +335,8 @@ export default function CaseDetailsContent({
           callCount={callCount}
           hideCallsTab={hideCallsTab}
           hideKnowledgeBaseTab={hideKnowledgeBaseTab}
+          knowledgeBaseCount={knowledgeBaseCount}
+          knowledgeBaseCountLoading={knowledgeBaseCountLoading}
         />
       </Paper>
 

apps/customer-portal/webapp/src/features/support/components/case-details/header/CaseDetailsTabPanels.tsx

@@ -21,9 +21,11 @@ import CaseDetailsActivityPanel from "@case-details-activity/CaseDetailsActivity
 import CaseDetailsAttachmentsPanel from "@case-details-attachments/CaseDetailsAttachmentsPanel";
 import CaseDetailsDetailsPanel from "@case-details-details/CaseDetailsDetailsPanel";
 import CallsPanel from "@case-details-calls/CallsPanel";
+import CaseKnowledgeBaseRecommendations from "@features/support/components/knowledge-base/CaseKnowledgeBaseRecommendations";
 
 /**
- * Renders the active tab panel for case details (Activity, Details, Attachments, Calls, Knowledge Base).
+ * Renders the active tab panel for case details (Activity, Details, Attachments, Calls,
+ * Knowledge Base with API-driven recommendations).
  *
  * @param {CaseDetailsTabPanelsProps} props - Active tab index, case data, and error state.
  * @returns {JSX.Element | null} The panel content.
@@ -103,12 +105,16 @@ export default function CaseDetailsTabPanels({
         />
       );
     }
-    case 4:
+    case 4: {
+      const resolvedProjectId = data?.project?.id ?? projectId ?? "";
       return (
-        <Typography variant="body2" color="text.secondary">
-          Knowledge Base articles will appear here.
-        </Typography>
+        <CaseKnowledgeBaseRecommendations
+          caseId={caseId}
+          projectId={resolvedProjectId}
+          data={data}
+        />
       );
+    }
     default:
       return null;
   }