From 4af76167116094f08567cc579d4c1abefd0d7d10 Mon Sep 17 00:00:00 2001
From: Bangarraju-Microsoft <v-golib@microsoft.com>
Date: Thu, 29 Aug 2024 17:02:22 +0530
Subject: [PATCH 01/12] US(#7027) - code changes

---
 ClientAdvisor/App/frontend/src/api/api.ts     |   1 +
 ClientAdvisor/App/frontend/src/api/models.ts  |   1 +
 .../ChatHistory/ChatHistoryList.tsx           | 905 +++++++++++++++++-
 .../ChatHistory/ChatHistoryListItem.tsx       |  30 +-
 .../ChatHistory/ChatHistoryPanel.module.css   |  34 +-
 .../ChatHistory/ChatHistoryPanel.tsx          |   2 +-
 .../App/frontend/src/pages/chat/Chat.tsx      |   5 +-
 .../src/pages/layout/Layout.module.css        |  97 +-
 .../App/frontend/src/pages/layout/Layout.tsx  | 195 ++--
 9 files changed, 1172 insertions(+), 98 deletions(-)

diff --git a/ClientAdvisor/App/frontend/src/api/api.ts b/ClientAdvisor/App/frontend/src/api/api.ts
index b59dceb0..1bd3d3d9 100644
--- a/ClientAdvisor/App/frontend/src/api/api.ts
+++ b/ClientAdvisor/App/frontend/src/api/api.ts
@@ -91,6 +91,7 @@ export const historyList = async (offset = 0): Promise<Conversation[] | null> =>
             title: conv.title,
             date: conv.createdAt,
             messages: convMessages,
+            updatedAt : conv.updatedAt
           }
           return conversation
         })
diff --git a/ClientAdvisor/App/frontend/src/api/models.ts b/ClientAdvisor/App/frontend/src/api/models.ts
index 55c0756f..0b3b67c6 100644
--- a/ClientAdvisor/App/frontend/src/api/models.ts
+++ b/ClientAdvisor/App/frontend/src/api/models.ts
@@ -38,6 +38,7 @@ export type Conversation = {
   title: string
   messages: ChatMessage[]
   date: string
+  updatedAt : string
 }
 
 export enum ChatCompletionType {
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
index 763c6c64..7edb525a 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
@@ -13,6 +13,11 @@ export interface GroupedChatHistory {
   entries: Conversation[]
 }
 
+export interface GroupedChatHistory2 {
+  title: string
+  entries: Conversation[]
+}
+
 const groupByMonth = (entries: Conversation[]) => {
   const groups: GroupedChatHistory[] = [{ month: 'Recent', entries: [] }]
   const currentDate = new Date()
@@ -59,15 +64,911 @@ const groupByMonth = (entries: Conversation[]) => {
   return groups
 }
 
+
+// Helper function to format dates
+const formatDate = (date: Date, includeWeekday = false) => {
+  const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
+  if (includeWeekday) {
+    options.weekday = 'long';
+  }
+  return date.toLocaleDateString(undefined, options);
+};
+
+interface Item {
+  _attachments: string;
+  _etag: string;
+  _rid: string;
+  _self: string;
+  _ts: number;
+  createdAt: string;
+  id: string;
+  title: string;
+  type: string;
+  updatedAt: string;
+  userId: string;
+}
+
+// Helper function to segregate and sort items
+const segregateItems1 = (items : Item[]) => {
+  console.log("items", items);
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(today.getDate() - 1);
+
+  // Sort items by updatedAt in descending order
+  items.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
+
+
+  const groupedItems: {
+    Today: Item[];
+    Yesterday: Item[];
+    Past: { [key: string]: Item[] };
+  } = {
+    Today: [],
+    Yesterday: [],
+    Past: {}
+  };
+
+  items.forEach((item) => {
+    const itemDate = new Date(item.updatedAt);
+    const itemDateOnly = itemDate.toDateString();
+
+    if (itemDateOnly === today.toDateString()) {
+      groupedItems.Today.push(item);
+    } else if (itemDateOnly === yesterday.toDateString()) {
+      groupedItems.Yesterday.push(item);
+    } else {
+      const formattedDate = formatDate(itemDate, true); // Include weekday for past dates
+      if (!groupedItems.Past[formattedDate]) {
+        groupedItems.Past[formattedDate] = [];
+      }
+      groupedItems.Past[formattedDate].push(item);
+    }
+  });
+
+   const finalGroupedItems = [
+    { title: `Today, ${formatDate(today)}`, items: groupedItems.Today },
+    { title: `Yesterday, ${formatDate(yesterday)}`, items: groupedItems.Yesterday },
+    ...Object.keys(groupedItems.Past).map(date => ({
+      title: date.split(', ').reverse().join(', '), // Reordering the date
+      items: groupedItems.Past[date]
+    }))];
+    console.log("finalGroupedItems",finalGroupedItems);
+
+  return finalGroupedItems;
+};
+
+const segregateItems2 = (items: Conversation[]) => {
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(today.getDate() - 1);
+
+  // Sort items by updatedAt in descending order
+  items.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
+
+  const groupedItems: {
+    Today: Conversation[];
+    Yesterday: Conversation[];
+    Past: { [key: string]: Conversation[] };
+  } = {
+    Today: [],
+    Yesterday: [],
+    Past: {}
+  };
+
+  items.forEach((item) => {
+    const itemDate = new Date(item.updatedAt);
+    const itemDateOnly = itemDate.toDateString();
+
+    if (itemDateOnly === today.toDateString()) {
+      groupedItems.Today.push(item);
+    } else if (itemDateOnly === yesterday.toDateString()) {
+      groupedItems.Yesterday.push(item);
+    } else {
+      const formattedDate = formatDate(itemDate, true); // Include weekday for past dates
+      if (!groupedItems.Past[formattedDate]) {
+        groupedItems.Past[formattedDate] = [];
+      }
+      groupedItems.Past[formattedDate].push(item);
+    }
+  });
+
+  const finalResult  = [
+    { title: `Today, ${formatDate(today)}`, entries: groupedItems.Today },
+    { title: `Yesterday, ${formatDate(yesterday)}`, entries: groupedItems.Yesterday },
+    ...Object.keys(groupedItems.Past).map(date => ({
+      title: date.split(', ').reverse().join(', '), // Reordering the date
+      entries: groupedItems.Past[date]
+    }))
+  ];
+
+  return finalResult;
+};
+
+
+function isLastSevenDaysRange(dateToCheck) {
+  // Get the current date
+  const currentDate = new Date();
+  // Calculate the date 2 days ago
+  const twoDaysAgo = new Date();
+  twoDaysAgo.setDate(currentDate.getDate() - 2);
+  // Calculate the date 8 days ago
+  const eightDaysAgo = new Date();
+  eightDaysAgo.setDate(currentDate.getDate() - 8);
+  // Ensure the comparison dates are in the correct order
+  // We need eightDaysAgo to be earlier than twoDaysAgo
+  return dateToCheck >= eightDaysAgo && dateToCheck <= twoDaysAgo;
+}
+ 
+const segregateItems = (items: Conversation[]) => {
+  const today = new Date();
+  const yesterday = new Date(today);
+  const last7Days = []
+  yesterday.setDate(today.getDate() - 1);
+ 
+  // Sort items by updatedAt in descending order
+  items.sort(
+    (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+  );
+ 
+  const groupedItems: {
+    Today: Conversation[],
+    Yesterday: Conversation[],
+    Last7Days:Conversation[],
+    Older: Conversation[],
+    Past: { [key: string]: Conversation[] },
+  } = {
+    Today: [],
+    Yesterday: [],
+    Last7Days: [],
+    Older: [],
+    Past: {},
+  };
+ 
+  items.forEach(item => {
+    const itemDate = new Date(item.updatedAt);
+    const itemDateOnly = itemDate.toDateString();
+		console.log("itemDateOnly", typeof itemDate);
+    if (itemDateOnly === today.toDateString()) {
+      groupedItems.Today.push(item);
+    } else if (itemDateOnly === yesterday.toDateString()) {
+      groupedItems.Yesterday.push(item);
+    }
+    else if(isLastSevenDaysRange(itemDate)){
+    groupedItems.Last7Days.push(item);
+    }
+    else {
+    groupedItems.Older.push(item);
+/*      const formattedDate = formatDate(itemDate, true); // Include weekday for past dates
+      if (!groupedItems.Past[formattedDate]) {
+        groupedItems.Past[formattedDate] = [];
+      } */
+/*       groupedItems.Past[formattedDate].push(item); */
+    }
+  });
+ 
+  const finalResult = [
+    { title: `Today, ${formatDate(today)}`, entries: groupedItems.Today },
+    {
+      title: `Yesterday, ${formatDate(yesterday)}`,
+      entries: groupedItems.Yesterday,
+    },
+    {
+      title: `Last 7 days`,
+      entries: groupedItems.Last7Days,
+    },
+    {
+      title: `Older`,
+      entries: groupedItems.Older,
+    },
+  ];
+ 
+  return finalResult;
+};
+ 
+
 const ChatHistoryList: React.FC<ChatHistoryListProps> = () => {
   const appStateContext = useContext(AppStateContext)
   const chatHistory = appStateContext?.state.chatHistory
 
   React.useEffect(() => {}, [appStateContext?.state.chatHistory])
 
-  let groupedChatHistory
+ 
+
+  let chatDummyHistory : Item[] = [
+    {
+        "_attachments": "attachments/",
+        "_etag": "\"9800d3e1-0000-0200-0000-66cec93b0000\"",
+        "_rid": "5rNvAN7i5u7nAgAAAAAAAA==",
+        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u7nAgAAAAAAAA==/",
+        "_ts": 1724827963,
+        "createdAt": "2024-08-29T05:07:55.997563",
+        "id": "566c4d8d-1b70-4019-8098-658dc61f29c0",
+        "title": "Clarifying Client Name",
+        "type": "conversation",
+        "updatedAt": "2024-08-29T06:52:40.719985",
+        "userId": "00000000-0000-0000-0000-000000000000"
+    },
+    {
+        "_attachments": "attachments/",
+        "_etag": "\"9800f68e-0000-0200-0000-66cec4880000\"",
+        "_rid": "5rNvAN7i5u4xAwAAAAAAAA==",
+        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u4xAwAAAAAAAA==/",
+        "_ts": 1724826760,
+        "createdAt": "2024-08-28T06:32:24.237104",
+        "id": "b66f9202-1dbf-401a-a789-47dc73ae13b4",
+        "title": "Tracking Chat Sessions",
+        "type": "conversation",
+        "updatedAt": "2024-08-28T06:32:37.435755",
+        "userId": "00000000-0000-0000-0000-000000000000"
+    },
+    {
+        "_attachments": "attachments/",
+        "_etag": "\"9800e28a-0000-0200-0000-66cec44b0000\"",
+        "_rid": "5rNvAN7i5u4uAwAAAAAAAA==",
+        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u4uAwAAAAAAAA==/",
+        "_ts": 1724826699,
+        "createdAt": "2024-08-28T06:31:24.324159",
+        "id": "5b6cde0b-2bb8-43f4-89a9-e632fab22a51",
+        "title": "Karen Berg Chat Sessions",
+        "type": "conversation",
+        "updatedAt": "2024-08-28T06:31:36.486839",
+        "userId": "00000000-0000-0000-0000-000000000000"
+    },
+    {
+        "_attachments": "attachments/",
+        "_etag": "\"9800c782-0000-0200-0000-66cec3d50000\"",
+        "_rid": "5rNvAN7i5u4DAwAAAAAAAA==",
+        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u4DAwAAAAAAAA==/",
+        "_ts": 1724826581,
+        "createdAt": "2024-08-29T05:15:12.977283",
+        "id": "b088d3e2-92fa-4b7a-a41d-96b2fb14bc75",
+        "title": "Chat Session Inquiry",
+        "type": "conversation",
+        "updatedAt": "2024-08-29T06:29:37.678874",
+        "userId": "00000000-0000-0000-0000-000000000000"
+    },
+    {
+        "_attachments": "attachments/",
+        "_etag": "\"970090f0-0000-0200-0000-66cebbc60000\"",
+        "_rid": "5rNvAN7i5u4lAwAAAAAAAA==",
+        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u4lAwAAAAAAAA==/",
+        "_ts": 1724824518,
+        "createdAt": "2024-08-28T05:55:04.840079",
+        "id": "651403f7-0da8-40ba-91ee-ae2ea07b85ed",
+        "title": "Evaluating Top Discussion Trends",
+        "type": "conversation",
+        "updatedAt": "2024-08-28T05:55:15.084444",
+        "userId": "00000000-0000-0000-0000-000000000000"
+    },
+    {
+        "_attachments": "attachments/",
+        "_etag": "\"9700c7e0-0000-0200-0000-66cebadd0000\"",
+        "_rid": "5rNvAN7i5u4KAwAAAAAAAA==",
+        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u4KAwAAAAAAAA==/",
+        "_ts": 1724824285,
+        "createdAt": "2024-08-28T05:22:10.304581",
+        "id": "1deb6e29-f830-4e05-bdea-89eb7ddabd66",
+        "title": "Top Discussion Trends",
+        "type": "conversation",
+        "updatedAt": "2024-08-28T05:51:22.709756",
+        "userId": "00000000-0000-0000-0000-000000000000"
+    },
+    {
+        "_attachments": "attachments/",
+        "_etag": "\"9700ba9e-0000-0200-0000-66ceb7130000\"",
+        "_rid": "5rNvAN7i5u4aAwAAAAAAAA==",
+        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u4aAwAAAAAAAA==/",
+        "_ts": 1724823315,
+        "createdAt": "2024-08-29T05:33:05.448111",
+        "id": "30298a6a-1ee0-455e-81e9-c87f39f891e0",
+        "title": "Top Discussion Trends",
+        "type": "conversation",
+        "updatedAt": "2024-08-29T05:35:12.499191",
+        "userId": "00000000-0000-0000-0000-000000000000"
+    },
+    {
+        "_attachments": "attachments/",
+        "_etag": "\"97004088-0000-0200-0000-66ceb5cb0000\"",
+        "_rid": "5rNvAN7i5u4TAwAAAAAAAA==",
+        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u4TAwAAAAAAAA==/",
+        "_ts": 1724822987,
+        "createdAt": "2024-08-28T05:28:35.454546",
+        "id": "73d6379f-0c63-44f0-82b4-24d897970e29",
+        "title": "Summarize Discussion Trends",
+        "type": "conversation",
+        "updatedAt": "2024-08-28T05:29:44.314547",
+        "userId": "00000000-0000-0000-0000-000000000000"
+    },
+    {
+        "_attachments": "attachments/",
+        "_etag": "\"97007249-0000-0200-0000-66ceb2190000\"",
+        "_rid": "5rNvAN7i5u7+AgAAAAAAAA==",
+        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u7+AgAAAAAAAA==/",
+        "_ts": 1724822041,
+        "createdAt": "2024-08-29T05:12:43.879637",
+        "id": "8c7d6d9b-054f-4bd2-a542-c71873a9e90a",
+        "title": "Question Count Inquiry",
+        "type": "conversation",
+        "updatedAt": "2024-08-29T05:13:59.049084",
+        "userId": "00000000-0000-0000-0000-000000000000"
+    },
+    {
+        "_attachments": "attachments/",
+        "_etag": "\"97002b43-0000-0200-0000-66ceb1b80000\"",
+        "_rid": "5rNvAN7i5u72AgAAAAAAAA==",
+        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u72AgAAAAAAAA==/",
+        "_ts": 1724821944,
+        "createdAt": "2024-08-28T05:11:02.613382",
+        "id": "3a6a0dce-8215-4e74-a9b1-4efad5ea0f00",
+        "title": "Querying Chat Session History",
+        "type": "conversation",
+        "updatedAt": "2024-08-28T05:12:22.137266",
+        "userId": "00000000-0000-0000-0000-000000000000"
+    },
+    {
+        "_attachments": "attachments/",
+        "_etag": "\"9800df10-0000-0200-0000-66cebda40000\"",
+        "_rid": "5rNvAN7i5u7zAgAAAAAAAA==",
+        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u7zAgAAAAAAAA==/",
+        "_ts": 1724824996,
+        "createdAt": "2024-08-23T05:10:28.811686",
+        "id": "ff44124c-ca3d-495a-b4fa-f28f4d04d0af",
+        "title": "Client address",
+        "type": "conversation",
+        "updatedAt": "2024-08-23T05:10:43.992035",
+        "userId": "00000000-0000-0000-0000-000000000000"
+    },
+    {
+        "_attachments": "attachments/",
+        "_etag": "\"97008437-0000-0200-0000-66ceb1150000\"",
+        "_rid": "5rNvAN7i5u7wAgAAAAAAAA==",
+        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u7wAgAAAAAAAA==/",
+        "_ts": 1724821781,
+        "createdAt": "2024-08-26T05:09:15.110387",
+        "id": "3143c664-3581-4b87-8b60-6f0fb8b43a46",
+        "title": "Inquiry on Client Details",
+        "type": "conversation",
+        "updatedAt": "2024-08-26T05:09:38.850652",
+        "userId": "00000000-0000-0000-0000-000000000000"
+    },
+    {
+        "_attachments": "attachments/",
+        "_etag": "\"9700a335-0000-0200-0000-66ceb0fa0000\"",
+        "_rid": "5rNvAN7i5u7tAgAAAAAAAA==",
+        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u7tAgAAAAAAAA==/",
+        "_ts": 1724821754,
+        "createdAt": "2024-08-27T05:09:03.667731",
+        "id": "c85fbeac-7092-4eef-aade-78c23cb2b676",
+        "title": "Exploring Top Discussion Trends",
+        "type": "conversation",
+        "updatedAt": "2024-08-27T05:09:10.983119",
+        "userId": "00000000-0000-0000-0000-000000000000"
+    },
+    {
+        "_attachments": "attachments/",
+        "_etag": "\"9700ec32-0000-0200-0000-66ceb0d60000\"",
+        "_rid": "5rNvAN7i5u7qAgAAAAAAAA==",
+        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u7qAgAAAAAAAA==/",
+        "_ts": 1724821718,
+        "createdAt": "2024-08-25T05:08:27.941058",
+        "id": "3a7e970c-6f9a-4bbf-ab23-d82c71bc12a7",
+        "title": "Identifying the Client Name",
+        "type": "conversation",
+        "updatedAt": "2024-08-25T05:08:35.198527",
+        "userId": "00000000-0000-0000-0000-000000000000"
+    },
+    {
+        "_attachments": "attachments/",
+        "_etag": "\"9700232e-0000-0200-0000-66ceb0990000\"",
+        "_rid": "5rNvAN7i5u7kAgAAAAAAAA==",
+        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u7kAgAAAAAAAA==/",
+        "_ts": 1724821657,
+        "createdAt": "2024-08-28T05:07:28.185204",
+        "id": "0d2553c6-9a26-44b2-9747-13663eb341c0",
+        "title": "Clarifying Client Name",
+        "type": "conversation",
+        "updatedAt": "2024-08-28T05:07:34.646881",
+        "userId": "00000000-0000-0000-0000-000000000000"
+    }
+]
+  let groupedChatHistory,groupedChatHistory2
   if (chatHistory && chatHistory.length > 0) {
+    //console.log("chatHistory",chatHistory);
+    const chatHistory1 : Conversation[]  = [
+      {
+          "id": "3bee2161-b130-4845-a2c6-7061f68bb5d3",
+          "title": "Summarize Discussion Trends",
+          "date": "2024-08-29T06:45:57.090670",
+          "messages": [
+              {
+                  "id": "ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af",
+                  "role": "user",
+                  "date": "2024-08-29T06:45:59.749179",
+                  "content": "Top discussion trends",
+                  "feedback": ""
+              },
+              {
+                  "id": "8c814906-f4a5-41ec-8802-4ed73de1aebc",
+                  "role": "assistant",
+                  "date": "2024-08-29T06:46:46.857296",
+                  "content": "I cannot answer this question from the data available. Please rephrase or add more details.",
+                  "feedback": ""
+              },
+              {
+                  "id": "65a3428f-4d93-4b12-870d-e2b8fd7eea36",
+                  "role": "user",
+                  "date": "2024-08-29T06:46:50.466645",
+                  "content": "Top discussion trends",
+                  "feedback": ""
+              },
+              {
+                  "id": "caa853cf-5bfd-414e-ae7a-f33469e02747",
+                  "role": "assistant",
+                  "date": "2024-08-29T06:46:59.030133",
+                  "content": "I cannot answer this question from the data available. Please rephrase or add more details.",
+                  "feedback": ""
+              }
+          ],
+          "updatedAt": "2024-08-29T06:46:59.030133"
+      },
+      {
+          "id": "e1e8876e-9b68-4af0-87df-df625a7b5d33",
+          "title": "Meeting Summary Discussed",
+          "date": "2024-08-29T06:01:33.058111",
+          "messages": [
+              {
+                  "id": "57d40ad8-4d5f-40b1-9a3a-5a9f350c6c10",
+                  "role": "user",
+                  "date": "2024-08-29T06:01:35.486154",
+                  "content": "Previous meeting summary",
+                  "feedback": ""
+              },
+              {
+                  "id": "4dbff0fa-e548-48fa-9089-19c8dc001a47",
+                  "role": "assistant",
+                  "date": "2024-08-29T06:01:43.016600",
+                  "content": "I cannot answer this question from the data available. Please rephrase or add more details.",
+                  "feedback": ""
+              },
+              {
+                  "id": "ccf59384-95e5-4a72-a70a-b49ab6703474",
+                  "role": "user",
+                  "date": "2024-08-29T06:01:47.329845",
+                  "content": "Previous meeting summary",
+                  "feedback": ""
+              },
+              {
+                  "id": "9f72d11a-d83a-4b2d-afa1-d223f6cbc2d5",
+                  "role": "assistant",
+                  "date": "2024-08-29T06:02:08.486476",
+                  "content": "I cannot answer this question from the data available. Please rephrase or add more details.",
+                  "feedback": ""
+              },
+              {
+                  "id": "709afb92-895f-471b-a86c-2ce8ea0de019",
+                  "role": "user",
+                  "date": "2024-08-29T06:02:10.633236",
+                  "content": "Top discussion trends",
+                  "feedback": ""
+              },
+              {
+                  "id": "b1ecefad-ef05-44eb-b813-94f2e71b071c",
+                  "role": "assistant",
+                  "date": "2024-08-29T06:02:39.604703",
+                  "content": "I cannot answer this question from the data available. Please rephrase or add more details.",
+                  "feedback": ""
+              },
+              {
+                  "id": "7613339f-3d50-4b4e-b6d3-28f0444618e3",
+                  "role": "user",
+                  "date": "2024-08-29T06:03:32.492492",
+                  "content": "Investment summary",
+                  "feedback": ""
+              },
+              {
+                  "id": "b8024913-ca95-4ea5-aedb-7b095b288367",
+                  "role": "assistant",
+                  "date": "2024-08-29T06:03:41.401992",
+                  "content": "Please only ask questions about the selected client or select another client to inquire about their details.",
+                  "feedback": ""
+              },
+              {
+                  "id": "c9588187-a1cf-41d5-98e5-355706a66a97",
+                  "role": "user",
+                  "date": "2024-08-29T06:33:19.828581",
+                  "content": "Investment summary",
+                  "feedback": ""
+              },
+              {
+                  "id": "a682fbb4-1419-4132-b1a6-6be63780beaf",
+                  "role": "assistant",
+                  "date": "2024-08-29T06:34:10.047201",
+                  "content": "Arun Sharma's investment summary as of July 1, 2024, is as follows:\n\n- Bonds: $2,375,518.00\n- Cash: $2,692,330.00\n- Equities: $2,123,818.00\n- Others: $2,237,664.00",
+                  "feedback": ""
+              }
+          ],
+          "updatedAt": "2024-08-29T06:34:10.047201"
+      },
+     {
+          "id": "3bee2161-b130-4845-a2c6-7061f68bb5d3",
+          "title": "Summarize Discussion Trends",
+          "date": "2024-08-29T06:45:57.090670",
+          "messages": [
+              {
+                  "id": "ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af",
+                  "role": "user",
+                  "date": "2024-08-29T06:45:59.749179",
+                  "content": "Top discussion trends",
+                  "feedback": ""
+              },
+              {
+                  "id": "8c814906-f4a5-41ec-8802-4ed73de1aebc",
+                  "role": "assistant",
+                  "date": "2024-08-29T06:46:46.857296",
+                  "content": "I cannot answer this question from the data available. Please rephrase or add more details.",
+                  "feedback": ""
+              },
+              {
+                  "id": "65a3428f-4d93-4b12-870d-e2b8fd7eea36",
+                  "role": "user",
+                  "date": "2024-08-29T06:46:50.466645",
+                  "content": "Top discussion trends",
+                  "feedback": ""
+              },
+              {
+                  "id": "caa853cf-5bfd-414e-ae7a-f33469e02747",
+                  "role": "assistant",
+                  "date": "2024-08-29T06:46:59.030133",
+                  "content": "I cannot answer this question from the data available. Please rephrase or add more details.",
+                  "feedback": ""
+              }
+          ],
+          "updatedAt": "2024-08-28T06:46:59.030133"
+      },
+    {
+          "id": "3bee2161-b130-4845-a2c6-7061f68bb5d3",
+          "title": "Summarize Discussion Trends 1",
+          "date": "2024-08-29T06:45:57.090670",
+          "messages": [
+              {
+                  "id": "ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af",
+                  "role": "user",
+                  "date": "2024-08-29T06:45:59.749179",
+                  "content": "Top discussion trends",
+                  "feedback": ""
+              },
+            
+          ],
+          "updatedAt": "2024-08-28T07:46:59.030133"
+      },
+  
+     {
+          "id": "3bee2161-b130-4845-a2c6-7061f68bb5d3",
+          "title": "Summarize Discussion Trends",
+          "date": "2024-08-29T06:45:57.090670",
+          "messages": [
+              {
+                  "id": "ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af",
+                  "role": "user",
+                  "date": "2024-08-29T06:45:59.749179",
+                  "content": "Top discussion trends",
+                  "feedback": ""
+              },
+            
+          ],
+          "updatedAt": "2024-08-27T06:46:59.030133"
+      },
+     {
+          "id": "3bee2161-b130-4845-a2c6-7061f68bb5d3",
+          "title": "Summarize Discussion Trends",
+          "date": "2024-08-29T06:45:57.090670",
+          "messages": [
+              {
+                  "id": "ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af",
+                  "role": "user",
+                  "date": "2024-08-29T06:45:59.749179",
+                  "content": "Top discussion trends",
+                  "feedback": ""
+              }
+            
+          ],
+          "updatedAt": "2024-08-26T06:46:59.030133"
+      },
+     {
+          "id": "3bee2161-b130-4845-a2c6-7061f68bb5d3",
+          "title": "Summarize Discussion Trends",
+          "date": "2024-08-29T06:45:57.090670",
+          "messages": [
+              {
+                  "id": "ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af",
+                  "role": "user",
+                  "date": "2024-08-29T06:45:59.749179",
+                  "content": "Top discussion trends",
+                  "feedback": ""
+              },
+            
+          ],
+          "updatedAt": "2024-08-25T06:46:59.030133"
+      },
+  ]
+
+
+   
+const chatHistory : Conversation[]  = [
+  {
+    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
+    title: 'Summarize Discussion Trends',
+    date: '2024-08-29T06:45:57.090670',
+    messages: [
+      {
+        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
+        role: 'user',
+        date: '2024-08-29T06:45:59.749179',
+        content: 'Top discussion trends',
+        feedback: '',
+      },
+      {
+        id: '8c814906-f4a5-41ec-8802-4ed73de1aebc',
+        role: 'assistant',
+        date: '2024-08-29T06:46:46.857296',
+        content:
+          'I cannot answer this question from the data available. Please rephrase or add more details.',
+        feedback: '',
+      },
+      {
+        id: '65a3428f-4d93-4b12-870d-e2b8fd7eea36',
+        role: 'user',
+        date: '2024-08-29T06:46:50.466645',
+        content: 'Top discussion trends',
+        feedback: '',
+      },
+      {
+        id: 'caa853cf-5bfd-414e-ae7a-f33469e02747',
+        role: 'assistant',
+        date: '2024-08-29T06:46:59.030133',
+        content:
+          'I cannot answer this question from the data available. Please rephrase or add more details.',
+        feedback: '',
+      },
+    ],
+    updatedAt: '2024-08-29T06:46:59.030133',
+  },
+  {
+    id: 'e1e8876e-9b68-4af0-87df-df625a7b5d33',
+    title: 'Meeting Summary Discussed',
+    date: '2024-08-29T06:01:33.058111',
+    messages: [
+      {
+        id: '57d40ad8-4d5f-40b1-9a3a-5a9f350c6c10',
+        role: 'user',
+        date: '2024-08-29T06:01:35.486154',
+        content: 'Previous meeting summary',
+        feedback: '',
+      },
+      {
+        id: '4dbff0fa-e548-48fa-9089-19c8dc001a47',
+        role: 'assistant',
+        date: '2024-08-29T06:01:43.016600',
+        content:
+          'I cannot answer this question from the data available. Please rephrase or add more details.',
+        feedback: '',
+      },
+      {
+        id: 'ccf59384-95e5-4a72-a70a-b49ab6703474',
+        role: 'user',
+        date: '2024-08-29T06:01:47.329845',
+        content: 'Previous meeting summary',
+        feedback: '',
+      },
+      {
+        id: '9f72d11a-d83a-4b2d-afa1-d223f6cbc2d5',
+        role: 'assistant',
+        date: '2024-08-29T06:02:08.486476',
+        content:
+          'I cannot answer this question from the data available. Please rephrase or add more details.',
+        feedback: '',
+      },
+      {
+        id: '709afb92-895f-471b-a86c-2ce8ea0de019',
+        role: 'user',
+        date: '2024-08-29T06:02:10.633236',
+        content: 'Top discussion trends',
+        feedback: '',
+      },
+      {
+        id: 'b1ecefad-ef05-44eb-b813-94f2e71b071c',
+        role: 'assistant',
+        date: '2024-08-29T06:02:39.604703',
+        content:
+          'I cannot answer this question from the data available. Please rephrase or add more details.',
+        feedback: '',
+      },
+      {
+        id: '7613339f-3d50-4b4e-b6d3-28f0444618e3',
+        role: 'user',
+        date: '2024-08-29T06:03:32.492492',
+        content: 'Investment summary',
+        feedback: '',
+      },
+      {
+        id: 'b8024913-ca95-4ea5-aedb-7b095b288367',
+        role: 'assistant',
+        date: '2024-08-29T06:03:41.401992',
+        content:
+          'Please only ask questions about the selected client or select another client to inquire about their details.',
+        feedback: '',
+      },
+      {
+        id: 'c9588187-a1cf-41d5-98e5-355706a66a97',
+        role: 'user',
+        date: '2024-08-29T06:33:19.828581',
+        content: 'Investment summary',
+        feedback: '',
+      },
+      {
+        id: 'a682fbb4-1419-4132-b1a6-6be63780beaf',
+        role: 'assistant',
+        date: '2024-08-29T06:34:10.047201',
+        content:
+          "Arun Sharma's investment summary as of July 1, 2024, is as follows:\n\n- Bonds: $2,375,518.00\n- Cash: $2,692,330.00\n- Equities: $2,123,818.00\n- Others: $2,237,664.00",
+        feedback: '',
+      },
+    ],
+    updatedAt: '2024-08-29T06:34:10.047201',
+  },
+  {
+    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
+    title: 'Summarize Discussion Trends',
+    date: '2024-08-29T06:45:57.090670',
+    messages: [
+      {
+        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
+        role: 'user',
+        date: '2024-08-29T06:45:59.749179',
+        content: 'Top discussion trends',
+        feedback: '',
+      },
+      {
+        id: '8c814906-f4a5-41ec-8802-4ed73de1aebc',
+        role: 'assistant',
+        date: '2024-08-29T06:46:46.857296',
+        content:
+          'I cannot answer this question from the data available. Please rephrase or add more details.',
+        feedback: '',
+      },
+      {
+        id: '65a3428f-4d93-4b12-870d-e2b8fd7eea36',
+        role: 'user',
+        date: '2024-08-29T06:46:50.466645',
+        content: 'Top discussion trends',
+        feedback: '',
+      },
+      {
+        id: 'caa853cf-5bfd-414e-ae7a-f33469e02747',
+        role: 'assistant',
+        date: '2024-08-29T06:46:59.030133',
+        content:
+          'I cannot answer this question from the data available. Please rephrase or add more details.',
+        feedback: '',
+      },
+    ],
+    updatedAt: '2024-08-28T06:46:59.030133',
+  },
+  {
+    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
+    title: 'Summarize Discussion Trends 1',
+    date: '2024-08-29T06:45:57.090670',
+    messages: [
+      {
+        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
+        role: 'user',
+        date: '2024-08-29T06:45:59.749179',
+        content: 'Top discussion trends',
+        feedback: '',
+      },
+    ],
+    updatedAt: '2024-08-28T07:46:59.030133',
+  },
+  {
+    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
+    title: 'Summarize Discussion Trends',
+    date: '2024-08-29T06:45:57.090670',
+    messages: [
+      {
+        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
+        role: 'user',
+        date: '2024-08-29T06:45:59.749179',
+        content: 'Top discussion trends',
+        feedback: '',
+      },
+    ],
+    updatedAt: '2024-08-27T06:46:59.030133',
+  },
+  {
+    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
+    title: 'Summarize Discussion Trends',
+    date: '2024-08-29T06:45:57.090670',
+    messages: [
+      {
+        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
+        role: 'user',
+        date: '2024-08-29T06:45:59.749179',
+        content: 'Top discussion trends',
+        feedback: '',
+      },
+    ],
+    updatedAt: '2024-08-26T06:46:59.030133',
+  },
+  {
+    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
+    title: 'Summarize Discussion Trends',
+    date: '2024-08-29T06:45:57.090670',
+    messages: [
+      {
+        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
+        role: 'user',
+        date: '2024-08-29T06:45:59.749179',
+        content: 'Top discussion trends',
+        feedback: '',
+      },
+    ],
+    updatedAt: '2024-08-25T06:46:59.030133',
+  },
+  /* old */
+  {
+    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
+    title: 'Old  Discussion Trends',
+    date: '2024-08-20T06:45:57.090670',
+    messages: [
+      {
+        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
+        role: 'user',
+        date: '2024-08-29T06:45:59.749179',
+        content: 'Top discussion trends',
+        feedback: '',
+      },
+    ],
+    updatedAt: '2024-08-20T06:46:59.030133',
+  },
+  
+    {
+    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
+    title: 'Old  Discussion Trends',
+    date: '2024-08-13T06:45:57.090670',
+    messages: [
+      {
+        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
+        role: 'user',
+        date: '2024-08-29T06:45:59.749179',
+        content: 'Top discussion trends',
+        feedback: '',
+      },
+    ],
+    updatedAt: '2024-08-13T06:46:59.030133',
+  },
+  
+    {
+    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
+    title: 'Old  Discussion Trends',
+    date: '2024-07-20T06:45:57.090670',
+    messages: [
+      {
+        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
+        role: 'user',
+        date: '2024-08-29T06:45:59.749179',
+        content: 'Top discussion trends',
+        feedback: '',
+      },
+    ],
+    updatedAt: '2024-07-20T06:46:59.030133',
+  },
+];
+ 
     groupedChatHistory = groupByMonth(chatHistory)
+    //console.log("groupedChatHistory",groupedChatHistory);
+    groupedChatHistory2  = segregateItems(chatHistory)
+    console.log("groupedChatHistory2",groupedChatHistory2)
   } else {
     return (
       <Stack horizontal horizontalAlign="center" verticalAlign="center" style={{ width: '100%', marginTop: 10 }}>
@@ -80,7 +981,7 @@ const ChatHistoryList: React.FC<ChatHistoryListProps> = () => {
     )
   }
 
-  return <ChatHistoryListItemGroups groupedChatHistory={groupedChatHistory} />
+  return <ChatHistoryListItemGroups groupedChatHistory={groupedChatHistory} groupedChatHistory2 = {groupedChatHistory2}/>
 }
 
 export default ChatHistoryList
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
index 6d26baa2..c9e6efab 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
@@ -22,7 +22,7 @@ import { historyDelete, historyList, historyRename } from '../../api'
 import { Conversation } from '../../api/models'
 import { AppStateContext } from '../../state/AppProvider'
 
-import { GroupedChatHistory } from './ChatHistoryList'
+import { GroupedChatHistory,GroupedChatHistory2 } from './ChatHistoryList'
 
 import styles from './ChatHistoryPanel.module.css'
 
@@ -32,7 +32,8 @@ interface ChatHistoryListItemCellProps {
 }
 
 interface ChatHistoryListItemGroupsProps {
-  groupedChatHistory: GroupedChatHistory[]
+  groupedChatHistory: GroupedChatHistory[],
+  groupedChatHistory2: GroupedChatHistory2[]
 }
 
 const formatMonth = (month: string) => {
@@ -257,7 +258,7 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
         <>
           <Stack horizontal verticalAlign={'center'} style={{ width: '100%' }}>
             <div className={styles.chatTitle}>{truncatedTitle}</div>
-            {(isSelected || isHovered) && (
+            {/* {(isSelected || isHovered) && ( */}
               <Stack horizontal horizontalAlign="end">
                 <IconButton
                   className={styles.itemButton}
@@ -276,7 +277,7 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
                   onKeyDown={e => (e.key === ' ' ? onEdit() : null)}
                 />
               </Stack>
-            )}
+            {/* )} */}
           </Stack>
         </>
       )}
@@ -302,7 +303,7 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
   )
 }
 
-export const ChatHistoryListItemGroups: React.FC<ChatHistoryListItemGroupsProps> = ({ groupedChatHistory }) => {
+export const ChatHistoryListItemGroups: React.FC<ChatHistoryListItemGroupsProps> = ({ groupedChatHistory,groupedChatHistory2 }) => {
   const appStateContext = useContext(AppStateContext)
   const observerTarget = useRef(null)
   const [, setSelectedItem] = React.useState<Conversation | null>(null)
@@ -361,19 +362,20 @@ export const ChatHistoryListItemGroups: React.FC<ChatHistoryListItemGroupsProps>
     }
   }, [observerTarget])
 
+  console.log("groupedChatHistory2",groupedChatHistory2)
   return (
     <div className={styles.listContainer} data-is-scrollable>
-      {groupedChatHistory.map(
+      {groupedChatHistory2.map(
         group =>
           group.entries.length > 0 && (
             <Stack
               horizontalAlign="start"
               verticalAlign="center"
-              key={group.month}
+              key={group.title}
               className={styles.chatGroup}
-              aria-label={`chat history group: ${group.month}`}>
-              <Stack aria-label={group.month} className={styles.chatMonth}>
-                {formatMonth(group.month)}
+              aria-label={`chat history group: ${group.title}`}>
+              <Stack aria-label={group.title} className={styles.chatMonth}>
+                {group.title}
               </Stack>
               <List
                 aria-label={`chat history list`}
@@ -382,7 +384,7 @@ export const ChatHistoryListItemGroups: React.FC<ChatHistoryListItemGroupsProps>
                 className={styles.chatList}
               />
               <div ref={observerTarget} />
-              <Separator
+              {/* <Separator
                 styles={{
                   root: {
                     width: '100%',
@@ -392,10 +394,14 @@ export const ChatHistoryListItemGroups: React.FC<ChatHistoryListItemGroupsProps>
                     }
                   }
                 }}
-              />
+              /> */}
             </Stack>
           )
       )}
+      
+      
+    
+
       {showSpinner && (
         <div className={styles.spinnerContainer}>
           <Spinner size={SpinnerSize.small} aria-label="loading more chat history" className={styles.spinner} />
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
index 784838fe..6b86b270 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
@@ -1,6 +1,6 @@
 .container {
   max-height: calc(100vh - 100px);
-  width: 300px;
+  /* width: 300px; */
 }
 
 .listContainer {
@@ -9,21 +9,24 @@
 }
 
 .itemCell {
-  max-width: 270px;
+  /* max-width: 270px; */
   min-height: 32px;
   cursor: pointer;
-  padding-left: 15px;
+  /* padding-left: 15px;
   padding-right: 5px;
   padding-top: 5px;
-  padding-bottom: 5px;
+  padding-bottom: 5px; */
+  padding: 10px;
   box-sizing: border-box;
   border-radius: 5px;
   display: flex;
+  background: #F3F3F3;
+    margin-bottom: 10px;
 }
 
-.itemCell:hover {
+/* .itemCell:hover {
   background: #e6e6e6;
-}
+} */
 
 .itemButton {
   display: flex;
@@ -31,19 +34,20 @@
   align-items: center;
   width: 28px;
   height: 28px;
-  border: 1px solid #d1d1d1;
+  /* border: 1px solid #d1d1d1; */
   border-radius: 5px;
-  background-color: white;
-  margin: auto 2.5px;
+  /* background-color: white; */
+  /* margin: auto 2.5px; */
   cursor: pointer;
 }
 
-.itemButton:hover {
+/* .itemButton:hover {
   background-color: #e6e6e6;
-}
+} */
 
 .chatGroup {
-  margin: auto 5px;
+  /* margin: auto 5px; */
+  margin-top: 20px;
   width: 100%;
 }
 
@@ -61,12 +65,12 @@
 .chatMonth {
   font-size: 14px;
   font-weight: 600;
-  margin-bottom: 5px;
-  padding-left: 15px;
+  margin-bottom: 10px;
+  /* padding-left: 15px; */
 }
 
 .chatTitle {
-  width: 80%;
+  width: 78%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
index 088aa223..218a6ab4 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
@@ -114,7 +114,7 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
               fontWeight: '600',
               fontSize: '18px',
               marginRight: 'auto',
-              paddingLeft: '20px'
+              // paddingLeft: '20px'
             }}>
             Chat history
           </Text>
diff --git a/ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx b/ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx
index 8d529d5d..0f5bd6cd 100644
--- a/ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx
+++ b/ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx
@@ -31,7 +31,7 @@ import {
 } from '../../api'
 import { Answer } from '../../components/Answer'
 import { QuestionInput } from '../../components/QuestionInput'
-import { ChatHistoryPanel } from '../../components/ChatHistory/ChatHistoryPanel'
+
 import { AppStateContext } from '../../state/AppProvider'
 import { useBoolean } from '@fluentui/react-hooks'
 import { PromptsSection, PromptType } from '../../components/PromptsSection/PromptsSection'
@@ -937,8 +937,7 @@ const Chat = () => {
               </div>
             </Stack.Item>
           )}
-          {appStateContext?.state.isChatHistoryOpen &&
-            appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && <ChatHistoryPanel />}
+         
         </Stack>
       )}
     </div>
diff --git a/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css b/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
index 238e228e..2b3fcf0f 100644
--- a/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
+++ b/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
@@ -1,12 +1,14 @@
 .layout {
   display: flex;
   height: 100%;
+  gap: 20px;
 }
 
 .header {
-  background-color: #f2f2f2;
+  /* background-color: #f2f2f2;
   position: fixed;
-  width: 82%;
+  width: 82%; */
+  width: 100%;
 }
 
 .headerContainer {
@@ -36,14 +38,14 @@
   height: 32px;
   width: auto;
   /* margin-left: 36px; */
-  padding-left: 20px;
+  /* padding-left: 20px; */
 }
 
 .shareButtonContainer {
   display: flex;
   flex-direction: row;
   justify-content: center;
-  margin-right: 20px;
+  margin-right: 10px;
 }
 
 .shareButton {
@@ -143,14 +145,14 @@
 
 .contentColumn {
   /* width: 75%; */
-  padding: 20px;
+  /* padding: 20px; */
   /* overflow-y: auto; */
   flex-direction: column;
-  background: linear-gradient(180deg, #FFF 59.5%, #EBF3FC 100%);
-  border-radius: 8px;
+  /* background: linear-gradient(180deg, #FFF 59.5%, #EBF3FC 100%);
+  border-radius: 8px; */
   height: 100%;
-  box-shadow: 0px 0.83px 3.33px 0px #00000052;
-  margin: 4rem 1rem 1rem;
+  /* box-shadow: 0px 0.83px 3.33px 0px #00000052; */
+  /* margin: 4rem 1rem 1rem; */
 }
 
 .welcomeMessage {
@@ -200,7 +202,7 @@
 
 .historyPanel {
   background: #f1f1f1;
-  border-radius: 8px;
+  /* border-radius: 8px; */
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   padding: 16px;
   height: 100%;
@@ -254,4 +256,77 @@
   padding: 10px 20px;
   cursor: pointer;
   font-size: 16px;
-}
\ No newline at end of file
+}
+
+
+/*--------- New Right Layout Changes -------------*/
+
+.contentArea {
+  width: 100%;
+  height: 100%;
+}
+
+.contentHeader {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.contentBody {
+  display: grid;
+  grid-template-columns: 1fr;
+  flex-grow: 1;
+  position: relative;
+  transition: all 0.3s ease;
+  gap: 10px;
+  margin-right:10px;
+}
+
+.mainContent {
+  padding: 20px;
+  border: 1px solid lightgray;
+    border-radius: 8px;
+    background: white;
+}
+
+.historyPanel {
+  background-color: #f9f9f9;
+  border-left: 1px solid #ddd;
+  padding: 16px;
+}
+
+/* Media Query for splitting the content-body into two parts */
+.withHistory {
+  grid-template-columns: 2fr 28%;
+}
+
+/* Media Query for lower resolutions or zoomed-in views */
+@media screen and (max-width: 1024px) {
+  .historyPanel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 300px;
+    height: 100%;
+    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    overflow-y: auto;
+  }
+
+  .contentBody {
+    grid-template-columns: 1fr; /* Return to single column layout */
+  }
+
+  .contentBody::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3); /* Optional overlay background */
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 90;
+  }
+}
+
+/*--------- New Right Layout Changes -------------*/
\ No newline at end of file
diff --git a/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx b/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
index 8577b858..9ef36a3e 100644
--- a/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
+++ b/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
@@ -16,7 +16,7 @@ import { User } from '../../types/User'
 import welcomeIcon from '../../assets/welcomeIcon.png'
 import styles from './Layout.module.css';
 import SpinnerComponent from '../../components/Spinner/Spinner';
-
+import { ChatHistoryPanel } from '../../components/ChatHistory/ChatHistoryPanel'
 
 
 const Layout = () => {
@@ -81,7 +81,7 @@ const Layout = () => {
     }
   }, [copyClicked])
 
-  useEffect(() => {}, [appStateContext?.state.isCosmosDBAvailable.status])
+  useEffect(() => { }, [appStateContext?.state.isCosmosDBAvailable.status])
 
   useEffect(() => {
     const handleResize = () => {
@@ -132,66 +132,153 @@ const Layout = () => {
 
         <Cards onCardClick={handleCardClick} />
       </div>
-      <div className={styles.ContentContainer}>
-        <header className={styles.header} role={'banner'}>
-          <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
-            <Stack horizontal verticalAlign="center">
-              <img src={ui?.logo ? ui.logo : TeamAvatar} className={styles.headerIcon} aria-hidden="true" alt="" />
-              <Link to="/" className={styles.headerTitleContainer}>
-                <h1 className={styles.headerTitle}>{ui?.title}</h1>
-              </Link>
-            </Stack>
-            <Stack horizontal tokens={{ childrenGap: 4 }} className={styles.shareButtonContainer}>
-              {appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && (
-                <HistoryButton
-                  onClick={handleHistoryClick}
-                  text={appStateContext?.state?.isChatHistoryOpen ? hideHistoryLabel : showHistoryLabel}
-                />
-              )}
-              {ui?.show_share_button && <ShareButton onClick={handleShareClick} text={shareLabel} />}
+
+      {/* <div className={styles.ContentContainer}>
+        <div className={styles.contentHeader}>
+          <header className={styles.header} role={'banner'}>
+            <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
+              <Stack horizontal verticalAlign="center">
+                <img src={ui?.logo ? ui.logo : TeamAvatar} className={styles.headerIcon} aria-hidden="true" alt="" />
+                <Link to="/" className={styles.headerTitleContainer}>
+                  <h1 className={styles.headerTitle}>{ui?.title}</h1>
+                </Link>
+              </Stack>
+              <Stack horizontal tokens={{ childrenGap: 4 }} className={styles.shareButtonContainer}>
+                {appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && (
+                  <HistoryButton
+                    onClick={handleHistoryClick}
+                    text={appStateContext?.state?.isChatHistoryOpen ? hideHistoryLabel : showHistoryLabel}
+                  />
+                )}
+                {ui?.show_share_button && <ShareButton onClick={handleShareClick} text={shareLabel} />}
+              </Stack>
             </Stack>
-          </Stack>
-        </header>
-        <div className={styles.contentColumn}>
-          {!selectedUser && showWelcomeCard ? (
-            <div>
-              <div className={styles.mainPage}>
-                <div className={styles.welcomeCard}>
-                  <div className={styles.welcomeCardContent}>
-                    <div className={styles.welcomeCardIcon}>
-                      <img src={welcomeIcon} alt="Icon" className={styles.icon} />
+          </header>
+        </div>
+        <div className={styles.contentBody}>
+          <div className={styles.contentColumn}>
+            {!selectedUser && showWelcomeCard ? (
+              <div>
+                <div className={styles.mainPage}>
+                  <div className={styles.welcomeCard}>
+                    <div className={styles.welcomeCardContent}>
+                      <div className={styles.welcomeCardIcon}>
+                        <img src={welcomeIcon} alt="Icon" className={styles.icon} />
+                      </div>
+                      <h3 className={styles.welcomeTitle}>Select a client</h3>
+                      <p className={styles.welcomeText}>
+                        You can ask questions about their portfolio details and previous conversations or view their
+                        profile.
+                      </p>
                     </div>
-                    <h3 className={styles.welcomeTitle}>Select a client</h3>
-                    <p className={styles.welcomeText}>
-                      You can ask questions about their portfolio details and previous conversations or view their
-                      profile.
-                    </p>
                   </div>
-                </div>
-                <div className={styles.welcomeMessage}>
-                  <img src={Illustration} alt="Illustration" className={styles.illustration} />
-                  <h1>Welcome Back, {name}</h1>
+                  <div className={styles.welcomeMessage}>
+                    <img src={Illustration} alt="Illustration" className={styles.illustration} />
+                    <h1>Welcome Back, {name}</h1>
+                  </div>
                 </div>
               </div>
-            </div>
-          ) : (
-            <div className={styles.pivotContainer}>
-              {selectedUser && (
-                <div className={styles.selectedClient}>
-                  Client selected:{' '}
-                  <span className={styles.selectedName}>{selectedUser ? selectedUser.ClientName : 'None'}</span>
+            ) : (
+              <div className={styles.pivotContainer}>
+                {selectedUser && (
+                  <div className={styles.selectedClient}>
+                    Client selected:{' '}
+                    <span className={styles.selectedName}>{selectedUser ? selectedUser.ClientName : 'None'}</span>
+                  </div>
+                )}
+                <Pivot defaultSelectedKey="chat">
+                  <PivotItem headerText="Chat" itemKey="chat">
+                    <Chat />
+                  </PivotItem>
+                  <PivotItem headerText="Client 360 Profile" itemKey="profile">
+                    <PowerBIChart chartUrl={calculateChartUrl(selectedUser)} />
+                  </PivotItem>
+                </Pivot>
+              </div>
+            )}
+          </div>
+        </div>
+        <div className={styles.historyPanel}>
+          {appStateContext?.state.isChatHistoryOpen &&
+            appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && <ChatHistoryPanel />}
+
+        </div>
+      </div> */}
+
+      <div className={styles.contentArea}>
+        <div className={styles.contentHeader}>
+          <header className={styles.header} role={'banner'}>
+            <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
+              <Stack horizontal verticalAlign="center">
+                <img src={ui?.logo ? ui.logo : TeamAvatar} className={styles.headerIcon} aria-hidden="true" alt="" />
+                <Link to="/" className={styles.headerTitleContainer}>
+                  <h1 className={styles.headerTitle}>{ui?.title}</h1>
+                </Link>
+              </Stack>
+              <Stack horizontal tokens={{ childrenGap: 4 }} className={styles.shareButtonContainer}>
+                {appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && (
+                  <HistoryButton
+                    onClick={handleHistoryClick}
+                    text={appStateContext?.state?.isChatHistoryOpen ? hideHistoryLabel : showHistoryLabel}
+                  />
+                )}
+                {ui?.show_share_button && <ShareButton onClick={handleShareClick} text={shareLabel} />}
+              </Stack>
+            </Stack>
+          </header>
+        </div>
+        <div className={ `${styles.contentBody} ${appStateContext?.state.isChatHistoryOpen ? styles.withHistory : ''}`}>
+          <div className={styles.mainContent}>
+            <div className={styles.contentColumn}>
+              {!selectedUser && showWelcomeCard ? (
+                <div>
+                  <div className={styles.mainPage}>
+                    <div className={styles.welcomeCard}>
+                      <div className={styles.welcomeCardContent}>
+                        <div className={styles.welcomeCardIcon}>
+                          <img src={welcomeIcon} alt="Icon" className={styles.icon} />
+                        </div>
+                        <h3 className={styles.welcomeTitle}>Select a client</h3>
+                        <p className={styles.welcomeText}>
+                          You can ask questions about their portfolio details and previous conversations or view their
+                          profile.
+                        </p>
+                      </div>
+                    </div>
+                    <div className={styles.welcomeMessage}>
+                      <img src={Illustration} alt="Illustration" className={styles.illustration} />
+                      <h1>Welcome Back, {name}</h1>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className={styles.pivotContainer}>
+                  {selectedUser && (
+                    <div className={styles.selectedClient}>
+                      Client selected:{' '}
+                      <span className={styles.selectedName}>{selectedUser ? selectedUser.ClientName : 'None'}</span>
+                    </div>
+                  )}
+                  <Pivot defaultSelectedKey="chat">
+                    <PivotItem headerText="Chat" itemKey="chat">
+                      <Chat />
+                    </PivotItem>
+                    <PivotItem headerText="Client 360 Profile" itemKey="profile">
+                      <PowerBIChart chartUrl={calculateChartUrl(selectedUser)} />
+                    </PivotItem>
+                  </Pivot>
                 </div>
               )}
-              <Pivot defaultSelectedKey="chat">
-                <PivotItem headerText="Chat" itemKey="chat">
-                  <Chat />
-                </PivotItem>
-                <PivotItem headerText="Client 360 Profile" itemKey="profile">
-                  <PowerBIChart chartUrl={calculateChartUrl(selectedUser)} />
-                </PivotItem>
-              </Pivot>
             </div>
-          )}
+
+          </div>
+          {appStateContext?.state.isChatHistoryOpen &&
+            <div className={styles.historyPanel}>
+              {appStateContext?.state.isChatHistoryOpen &&
+                appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && <ChatHistoryPanel />}
+
+            </div>
+          }
         </div>
       </div>
 

From cd5a8e09df17e5f888bf7723a86e6e29db735afc Mon Sep 17 00:00:00 2001
From: Kiran Siluveru <v-ksiluveru@microsoft.com>
Date: Thu, 29 Aug 2024 18:05:38 +0530
Subject: [PATCH 02/12] fix history panel width issue and history name styles

---
 .../ChatHistory/ChatHistoryPanel.module.css   |  3 +++
 .../ChatHistory/ChatHistoryPanel.tsx          | 20 +------------------
 .../src/pages/layout/Layout.module.css        |  2 +-
 3 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
index 6b86b270..ff468e73 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
@@ -74,6 +74,9 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  font-size: 14px;
+  font-weight: 600;
+  color: #424242;
 }
 
 @media (max-width: 480px) {
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
index 218a6ab4..bc84f6ae 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
@@ -149,30 +149,13 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
         </Stack>
       </Stack>
       <Stack
-        aria-label="chat history panel content"
-        styles={{
-          root: {
-            display: 'flex',
-            flexGrow: 1,
-            flexDirection: 'column',
-            paddingTop: '2.5px',
-            maxWidth: '100%'
-          }
-        }}
-        style={{
-          display: 'flex',
-          flexGrow: 1,
-          flexDirection: 'column',
-          flexWrap: 'wrap',
-          padding: '1px'
-        }}>
+        aria-label="chat history panel content">
         <Stack className={styles.chatHistoryListContainer}>
           {appStateContext?.state.chatHistoryLoadingState === ChatHistoryLoadingState.Success &&
             appStateContext?.state.isCosmosDBAvailable.cosmosDB && <ChatHistoryList />}
           {appStateContext?.state.chatHistoryLoadingState === ChatHistoryLoadingState.Fail &&
             appStateContext?.state.isCosmosDBAvailable && (
               <>
-                <Stack>
                   <Stack horizontalAlign="center" verticalAlign="center" style={{ width: '100%', marginTop: 10 }}>
                     <StackItem>
                       <Text style={{ alignSelf: 'center', fontWeight: '400', fontSize: 16 }}>
@@ -187,7 +170,6 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
                         <span>Chat history can't be saved at this time</span>
                       </Text>
                     </StackItem>
-                  </Stack>
                 </Stack>
               </>
             )}
diff --git a/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css b/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
index 2b3fcf0f..28ff9315 100644
--- a/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
+++ b/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
@@ -296,7 +296,7 @@
 
 /* Media Query for splitting the content-body into two parts */
 .withHistory {
-  grid-template-columns: 2fr 28%;
+  grid-template-columns: 2fr 22%;
 }
 
 /* Media Query for lower resolutions or zoomed-in views */

From 734cb1a30bf0a47d9bb86b8c26c417e8c622b873 Mon Sep 17 00:00:00 2001
From: Kiran Siluveru <v-ksiluveru@microsoft.com>
Date: Thu, 29 Aug 2024 18:33:38 +0530
Subject: [PATCH 03/12] history active item border

---
 .../src/components/ChatHistory/ChatHistoryList.tsx        | 2 +-
 .../src/components/ChatHistory/ChatHistoryListItem.tsx    | 8 ++------
 .../components/ChatHistory/ChatHistoryPanel.module.css    | 3 +++
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
index 7edb525a..5fc48aa9 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
@@ -695,7 +695,7 @@ const ChatHistoryList: React.FC<ChatHistoryListProps> = () => {
 
 
    
-const chatHistory : Conversation[]  = [
+const chatHistory3 : Conversation[]  = [
   {
     id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
     title: 'Summarize Discussion Trends',
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
index c9e6efab..3f279b2f 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
@@ -189,18 +189,14 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
       key={item.id}
       tabIndex={0}
       aria-label="chat history item"
-      className={styles.itemCell}
+      className={`${styles.itemCell} ${isSelected ? styles.selectedItemCell : ""}`}
       onClick={() => handleSelectItem()}
       onKeyDown={e => (e.key === 'Enter' || e.key === ' ' ? handleSelectItem() : null)}
       verticalAlign="center"
       // horizontal
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
-      styles={{
-        root: {
-          backgroundColor: isSelected ? '#e6e6e6' : 'transparent'
-        }
-      }}>
+      >
       {edit ? (
         <>
           <Stack.Item style={{ width: '100%' }}>
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
index ff468e73..79c19eb2 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
@@ -23,6 +23,9 @@
   background: #F3F3F3;
     margin-bottom: 10px;
 }
+.selectedItemCell {
+  border: 1.5px solid #0481E0
+}
 
 /* .itemCell:hover {
   background: #e6e6e6;

From 9c42dc86662b7bf4f615248606861afdd1d1e2cb Mon Sep 17 00:00:00 2001
From: Bangarraju-Microsoft <v-golib@microsoft.com>
Date: Thu, 29 Aug 2024 18:36:00 +0530
Subject: [PATCH 04/12] Chat History UI Changes

---
 .../ChatHistory/ChatHistoryList.tsx           | 712 +-----------------
 .../ChatHistory/ChatHistoryListItem.tsx       |   9 +-
 .../frontend/src/pages/chat/Chat.module.css   |   2 +-
 .../src/pages/layout/Layout.module.css        |   7 +-
 4 files changed, 21 insertions(+), 709 deletions(-)

diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
index 7edb525a..ab61a9e4 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
@@ -8,16 +8,17 @@ import { ChatHistoryListItemGroups } from './ChatHistoryListItem'
 
 interface ChatHistoryListProps {}
 
-export interface GroupedChatHistory {
-  month: string
-  entries: Conversation[]
-}
+// export interface GroupedChatHistory {
+//   month: string
+//   entries: Conversation[]
+// }
 
-export interface GroupedChatHistory2 {
+export interface GroupedChatHistory {
   title: string
   entries: Conversation[]
 }
 
+/*
 const groupByMonth = (entries: Conversation[]) => {
   const groups: GroupedChatHistory[] = [{ month: 'Recent', entries: [] }]
   const currentDate = new Date()
@@ -63,6 +64,7 @@ const groupByMonth = (entries: Conversation[]) => {
 
   return groups
 }
+  */
 
 
 // Helper function to format dates
@@ -274,701 +276,11 @@ const ChatHistoryList: React.FC<ChatHistoryListProps> = () => {
   React.useEffect(() => {}, [appStateContext?.state.chatHistory])
 
  
-
-  let chatDummyHistory : Item[] = [
-    {
-        "_attachments": "attachments/",
-        "_etag": "\"9800d3e1-0000-0200-0000-66cec93b0000\"",
-        "_rid": "5rNvAN7i5u7nAgAAAAAAAA==",
-        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u7nAgAAAAAAAA==/",
-        "_ts": 1724827963,
-        "createdAt": "2024-08-29T05:07:55.997563",
-        "id": "566c4d8d-1b70-4019-8098-658dc61f29c0",
-        "title": "Clarifying Client Name",
-        "type": "conversation",
-        "updatedAt": "2024-08-29T06:52:40.719985",
-        "userId": "00000000-0000-0000-0000-000000000000"
-    },
-    {
-        "_attachments": "attachments/",
-        "_etag": "\"9800f68e-0000-0200-0000-66cec4880000\"",
-        "_rid": "5rNvAN7i5u4xAwAAAAAAAA==",
-        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u4xAwAAAAAAAA==/",
-        "_ts": 1724826760,
-        "createdAt": "2024-08-28T06:32:24.237104",
-        "id": "b66f9202-1dbf-401a-a789-47dc73ae13b4",
-        "title": "Tracking Chat Sessions",
-        "type": "conversation",
-        "updatedAt": "2024-08-28T06:32:37.435755",
-        "userId": "00000000-0000-0000-0000-000000000000"
-    },
-    {
-        "_attachments": "attachments/",
-        "_etag": "\"9800e28a-0000-0200-0000-66cec44b0000\"",
-        "_rid": "5rNvAN7i5u4uAwAAAAAAAA==",
-        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u4uAwAAAAAAAA==/",
-        "_ts": 1724826699,
-        "createdAt": "2024-08-28T06:31:24.324159",
-        "id": "5b6cde0b-2bb8-43f4-89a9-e632fab22a51",
-        "title": "Karen Berg Chat Sessions",
-        "type": "conversation",
-        "updatedAt": "2024-08-28T06:31:36.486839",
-        "userId": "00000000-0000-0000-0000-000000000000"
-    },
-    {
-        "_attachments": "attachments/",
-        "_etag": "\"9800c782-0000-0200-0000-66cec3d50000\"",
-        "_rid": "5rNvAN7i5u4DAwAAAAAAAA==",
-        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u4DAwAAAAAAAA==/",
-        "_ts": 1724826581,
-        "createdAt": "2024-08-29T05:15:12.977283",
-        "id": "b088d3e2-92fa-4b7a-a41d-96b2fb14bc75",
-        "title": "Chat Session Inquiry",
-        "type": "conversation",
-        "updatedAt": "2024-08-29T06:29:37.678874",
-        "userId": "00000000-0000-0000-0000-000000000000"
-    },
-    {
-        "_attachments": "attachments/",
-        "_etag": "\"970090f0-0000-0200-0000-66cebbc60000\"",
-        "_rid": "5rNvAN7i5u4lAwAAAAAAAA==",
-        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u4lAwAAAAAAAA==/",
-        "_ts": 1724824518,
-        "createdAt": "2024-08-28T05:55:04.840079",
-        "id": "651403f7-0da8-40ba-91ee-ae2ea07b85ed",
-        "title": "Evaluating Top Discussion Trends",
-        "type": "conversation",
-        "updatedAt": "2024-08-28T05:55:15.084444",
-        "userId": "00000000-0000-0000-0000-000000000000"
-    },
-    {
-        "_attachments": "attachments/",
-        "_etag": "\"9700c7e0-0000-0200-0000-66cebadd0000\"",
-        "_rid": "5rNvAN7i5u4KAwAAAAAAAA==",
-        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u4KAwAAAAAAAA==/",
-        "_ts": 1724824285,
-        "createdAt": "2024-08-28T05:22:10.304581",
-        "id": "1deb6e29-f830-4e05-bdea-89eb7ddabd66",
-        "title": "Top Discussion Trends",
-        "type": "conversation",
-        "updatedAt": "2024-08-28T05:51:22.709756",
-        "userId": "00000000-0000-0000-0000-000000000000"
-    },
-    {
-        "_attachments": "attachments/",
-        "_etag": "\"9700ba9e-0000-0200-0000-66ceb7130000\"",
-        "_rid": "5rNvAN7i5u4aAwAAAAAAAA==",
-        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u4aAwAAAAAAAA==/",
-        "_ts": 1724823315,
-        "createdAt": "2024-08-29T05:33:05.448111",
-        "id": "30298a6a-1ee0-455e-81e9-c87f39f891e0",
-        "title": "Top Discussion Trends",
-        "type": "conversation",
-        "updatedAt": "2024-08-29T05:35:12.499191",
-        "userId": "00000000-0000-0000-0000-000000000000"
-    },
-    {
-        "_attachments": "attachments/",
-        "_etag": "\"97004088-0000-0200-0000-66ceb5cb0000\"",
-        "_rid": "5rNvAN7i5u4TAwAAAAAAAA==",
-        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u4TAwAAAAAAAA==/",
-        "_ts": 1724822987,
-        "createdAt": "2024-08-28T05:28:35.454546",
-        "id": "73d6379f-0c63-44f0-82b4-24d897970e29",
-        "title": "Summarize Discussion Trends",
-        "type": "conversation",
-        "updatedAt": "2024-08-28T05:29:44.314547",
-        "userId": "00000000-0000-0000-0000-000000000000"
-    },
-    {
-        "_attachments": "attachments/",
-        "_etag": "\"97007249-0000-0200-0000-66ceb2190000\"",
-        "_rid": "5rNvAN7i5u7+AgAAAAAAAA==",
-        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u7+AgAAAAAAAA==/",
-        "_ts": 1724822041,
-        "createdAt": "2024-08-29T05:12:43.879637",
-        "id": "8c7d6d9b-054f-4bd2-a542-c71873a9e90a",
-        "title": "Question Count Inquiry",
-        "type": "conversation",
-        "updatedAt": "2024-08-29T05:13:59.049084",
-        "userId": "00000000-0000-0000-0000-000000000000"
-    },
-    {
-        "_attachments": "attachments/",
-        "_etag": "\"97002b43-0000-0200-0000-66ceb1b80000\"",
-        "_rid": "5rNvAN7i5u72AgAAAAAAAA==",
-        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u72AgAAAAAAAA==/",
-        "_ts": 1724821944,
-        "createdAt": "2024-08-28T05:11:02.613382",
-        "id": "3a6a0dce-8215-4e74-a9b1-4efad5ea0f00",
-        "title": "Querying Chat Session History",
-        "type": "conversation",
-        "updatedAt": "2024-08-28T05:12:22.137266",
-        "userId": "00000000-0000-0000-0000-000000000000"
-    },
-    {
-        "_attachments": "attachments/",
-        "_etag": "\"9800df10-0000-0200-0000-66cebda40000\"",
-        "_rid": "5rNvAN7i5u7zAgAAAAAAAA==",
-        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u7zAgAAAAAAAA==/",
-        "_ts": 1724824996,
-        "createdAt": "2024-08-23T05:10:28.811686",
-        "id": "ff44124c-ca3d-495a-b4fa-f28f4d04d0af",
-        "title": "Client address",
-        "type": "conversation",
-        "updatedAt": "2024-08-23T05:10:43.992035",
-        "userId": "00000000-0000-0000-0000-000000000000"
-    },
-    {
-        "_attachments": "attachments/",
-        "_etag": "\"97008437-0000-0200-0000-66ceb1150000\"",
-        "_rid": "5rNvAN7i5u7wAgAAAAAAAA==",
-        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u7wAgAAAAAAAA==/",
-        "_ts": 1724821781,
-        "createdAt": "2024-08-26T05:09:15.110387",
-        "id": "3143c664-3581-4b87-8b60-6f0fb8b43a46",
-        "title": "Inquiry on Client Details",
-        "type": "conversation",
-        "updatedAt": "2024-08-26T05:09:38.850652",
-        "userId": "00000000-0000-0000-0000-000000000000"
-    },
-    {
-        "_attachments": "attachments/",
-        "_etag": "\"9700a335-0000-0200-0000-66ceb0fa0000\"",
-        "_rid": "5rNvAN7i5u7tAgAAAAAAAA==",
-        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u7tAgAAAAAAAA==/",
-        "_ts": 1724821754,
-        "createdAt": "2024-08-27T05:09:03.667731",
-        "id": "c85fbeac-7092-4eef-aade-78c23cb2b676",
-        "title": "Exploring Top Discussion Trends",
-        "type": "conversation",
-        "updatedAt": "2024-08-27T05:09:10.983119",
-        "userId": "00000000-0000-0000-0000-000000000000"
-    },
-    {
-        "_attachments": "attachments/",
-        "_etag": "\"9700ec32-0000-0200-0000-66ceb0d60000\"",
-        "_rid": "5rNvAN7i5u7qAgAAAAAAAA==",
-        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u7qAgAAAAAAAA==/",
-        "_ts": 1724821718,
-        "createdAt": "2024-08-25T05:08:27.941058",
-        "id": "3a7e970c-6f9a-4bbf-ab23-d82c71bc12a7",
-        "title": "Identifying the Client Name",
-        "type": "conversation",
-        "updatedAt": "2024-08-25T05:08:35.198527",
-        "userId": "00000000-0000-0000-0000-000000000000"
-    },
-    {
-        "_attachments": "attachments/",
-        "_etag": "\"9700232e-0000-0200-0000-66ceb0990000\"",
-        "_rid": "5rNvAN7i5u7kAgAAAAAAAA==",
-        "_self": "dbs/5rNvAA==/colls/5rNvAN7i5u4=/docs/5rNvAN7i5u7kAgAAAAAAAA==/",
-        "_ts": 1724821657,
-        "createdAt": "2024-08-28T05:07:28.185204",
-        "id": "0d2553c6-9a26-44b2-9747-13663eb341c0",
-        "title": "Clarifying Client Name",
-        "type": "conversation",
-        "updatedAt": "2024-08-28T05:07:34.646881",
-        "userId": "00000000-0000-0000-0000-000000000000"
-    }
-]
-  let groupedChatHistory,groupedChatHistory2
+  let groupedChatHistory
   if (chatHistory && chatHistory.length > 0) {
-    //console.log("chatHistory",chatHistory);
-    const chatHistory1 : Conversation[]  = [
-      {
-          "id": "3bee2161-b130-4845-a2c6-7061f68bb5d3",
-          "title": "Summarize Discussion Trends",
-          "date": "2024-08-29T06:45:57.090670",
-          "messages": [
-              {
-                  "id": "ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af",
-                  "role": "user",
-                  "date": "2024-08-29T06:45:59.749179",
-                  "content": "Top discussion trends",
-                  "feedback": ""
-              },
-              {
-                  "id": "8c814906-f4a5-41ec-8802-4ed73de1aebc",
-                  "role": "assistant",
-                  "date": "2024-08-29T06:46:46.857296",
-                  "content": "I cannot answer this question from the data available. Please rephrase or add more details.",
-                  "feedback": ""
-              },
-              {
-                  "id": "65a3428f-4d93-4b12-870d-e2b8fd7eea36",
-                  "role": "user",
-                  "date": "2024-08-29T06:46:50.466645",
-                  "content": "Top discussion trends",
-                  "feedback": ""
-              },
-              {
-                  "id": "caa853cf-5bfd-414e-ae7a-f33469e02747",
-                  "role": "assistant",
-                  "date": "2024-08-29T06:46:59.030133",
-                  "content": "I cannot answer this question from the data available. Please rephrase or add more details.",
-                  "feedback": ""
-              }
-          ],
-          "updatedAt": "2024-08-29T06:46:59.030133"
-      },
-      {
-          "id": "e1e8876e-9b68-4af0-87df-df625a7b5d33",
-          "title": "Meeting Summary Discussed",
-          "date": "2024-08-29T06:01:33.058111",
-          "messages": [
-              {
-                  "id": "57d40ad8-4d5f-40b1-9a3a-5a9f350c6c10",
-                  "role": "user",
-                  "date": "2024-08-29T06:01:35.486154",
-                  "content": "Previous meeting summary",
-                  "feedback": ""
-              },
-              {
-                  "id": "4dbff0fa-e548-48fa-9089-19c8dc001a47",
-                  "role": "assistant",
-                  "date": "2024-08-29T06:01:43.016600",
-                  "content": "I cannot answer this question from the data available. Please rephrase or add more details.",
-                  "feedback": ""
-              },
-              {
-                  "id": "ccf59384-95e5-4a72-a70a-b49ab6703474",
-                  "role": "user",
-                  "date": "2024-08-29T06:01:47.329845",
-                  "content": "Previous meeting summary",
-                  "feedback": ""
-              },
-              {
-                  "id": "9f72d11a-d83a-4b2d-afa1-d223f6cbc2d5",
-                  "role": "assistant",
-                  "date": "2024-08-29T06:02:08.486476",
-                  "content": "I cannot answer this question from the data available. Please rephrase or add more details.",
-                  "feedback": ""
-              },
-              {
-                  "id": "709afb92-895f-471b-a86c-2ce8ea0de019",
-                  "role": "user",
-                  "date": "2024-08-29T06:02:10.633236",
-                  "content": "Top discussion trends",
-                  "feedback": ""
-              },
-              {
-                  "id": "b1ecefad-ef05-44eb-b813-94f2e71b071c",
-                  "role": "assistant",
-                  "date": "2024-08-29T06:02:39.604703",
-                  "content": "I cannot answer this question from the data available. Please rephrase or add more details.",
-                  "feedback": ""
-              },
-              {
-                  "id": "7613339f-3d50-4b4e-b6d3-28f0444618e3",
-                  "role": "user",
-                  "date": "2024-08-29T06:03:32.492492",
-                  "content": "Investment summary",
-                  "feedback": ""
-              },
-              {
-                  "id": "b8024913-ca95-4ea5-aedb-7b095b288367",
-                  "role": "assistant",
-                  "date": "2024-08-29T06:03:41.401992",
-                  "content": "Please only ask questions about the selected client or select another client to inquire about their details.",
-                  "feedback": ""
-              },
-              {
-                  "id": "c9588187-a1cf-41d5-98e5-355706a66a97",
-                  "role": "user",
-                  "date": "2024-08-29T06:33:19.828581",
-                  "content": "Investment summary",
-                  "feedback": ""
-              },
-              {
-                  "id": "a682fbb4-1419-4132-b1a6-6be63780beaf",
-                  "role": "assistant",
-                  "date": "2024-08-29T06:34:10.047201",
-                  "content": "Arun Sharma's investment summary as of July 1, 2024, is as follows:\n\n- Bonds: $2,375,518.00\n- Cash: $2,692,330.00\n- Equities: $2,123,818.00\n- Others: $2,237,664.00",
-                  "feedback": ""
-              }
-          ],
-          "updatedAt": "2024-08-29T06:34:10.047201"
-      },
-     {
-          "id": "3bee2161-b130-4845-a2c6-7061f68bb5d3",
-          "title": "Summarize Discussion Trends",
-          "date": "2024-08-29T06:45:57.090670",
-          "messages": [
-              {
-                  "id": "ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af",
-                  "role": "user",
-                  "date": "2024-08-29T06:45:59.749179",
-                  "content": "Top discussion trends",
-                  "feedback": ""
-              },
-              {
-                  "id": "8c814906-f4a5-41ec-8802-4ed73de1aebc",
-                  "role": "assistant",
-                  "date": "2024-08-29T06:46:46.857296",
-                  "content": "I cannot answer this question from the data available. Please rephrase or add more details.",
-                  "feedback": ""
-              },
-              {
-                  "id": "65a3428f-4d93-4b12-870d-e2b8fd7eea36",
-                  "role": "user",
-                  "date": "2024-08-29T06:46:50.466645",
-                  "content": "Top discussion trends",
-                  "feedback": ""
-              },
-              {
-                  "id": "caa853cf-5bfd-414e-ae7a-f33469e02747",
-                  "role": "assistant",
-                  "date": "2024-08-29T06:46:59.030133",
-                  "content": "I cannot answer this question from the data available. Please rephrase or add more details.",
-                  "feedback": ""
-              }
-          ],
-          "updatedAt": "2024-08-28T06:46:59.030133"
-      },
-    {
-          "id": "3bee2161-b130-4845-a2c6-7061f68bb5d3",
-          "title": "Summarize Discussion Trends 1",
-          "date": "2024-08-29T06:45:57.090670",
-          "messages": [
-              {
-                  "id": "ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af",
-                  "role": "user",
-                  "date": "2024-08-29T06:45:59.749179",
-                  "content": "Top discussion trends",
-                  "feedback": ""
-              },
-            
-          ],
-          "updatedAt": "2024-08-28T07:46:59.030133"
-      },
-  
-     {
-          "id": "3bee2161-b130-4845-a2c6-7061f68bb5d3",
-          "title": "Summarize Discussion Trends",
-          "date": "2024-08-29T06:45:57.090670",
-          "messages": [
-              {
-                  "id": "ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af",
-                  "role": "user",
-                  "date": "2024-08-29T06:45:59.749179",
-                  "content": "Top discussion trends",
-                  "feedback": ""
-              },
-            
-          ],
-          "updatedAt": "2024-08-27T06:46:59.030133"
-      },
-     {
-          "id": "3bee2161-b130-4845-a2c6-7061f68bb5d3",
-          "title": "Summarize Discussion Trends",
-          "date": "2024-08-29T06:45:57.090670",
-          "messages": [
-              {
-                  "id": "ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af",
-                  "role": "user",
-                  "date": "2024-08-29T06:45:59.749179",
-                  "content": "Top discussion trends",
-                  "feedback": ""
-              }
-            
-          ],
-          "updatedAt": "2024-08-26T06:46:59.030133"
-      },
-     {
-          "id": "3bee2161-b130-4845-a2c6-7061f68bb5d3",
-          "title": "Summarize Discussion Trends",
-          "date": "2024-08-29T06:45:57.090670",
-          "messages": [
-              {
-                  "id": "ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af",
-                  "role": "user",
-                  "date": "2024-08-29T06:45:59.749179",
-                  "content": "Top discussion trends",
-                  "feedback": ""
-              },
-            
-          ],
-          "updatedAt": "2024-08-25T06:46:59.030133"
-      },
-  ]
-
-
-   
-const chatHistory : Conversation[]  = [
-  {
-    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
-    title: 'Summarize Discussion Trends',
-    date: '2024-08-29T06:45:57.090670',
-    messages: [
-      {
-        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
-        role: 'user',
-        date: '2024-08-29T06:45:59.749179',
-        content: 'Top discussion trends',
-        feedback: '',
-      },
-      {
-        id: '8c814906-f4a5-41ec-8802-4ed73de1aebc',
-        role: 'assistant',
-        date: '2024-08-29T06:46:46.857296',
-        content:
-          'I cannot answer this question from the data available. Please rephrase or add more details.',
-        feedback: '',
-      },
-      {
-        id: '65a3428f-4d93-4b12-870d-e2b8fd7eea36',
-        role: 'user',
-        date: '2024-08-29T06:46:50.466645',
-        content: 'Top discussion trends',
-        feedback: '',
-      },
-      {
-        id: 'caa853cf-5bfd-414e-ae7a-f33469e02747',
-        role: 'assistant',
-        date: '2024-08-29T06:46:59.030133',
-        content:
-          'I cannot answer this question from the data available. Please rephrase or add more details.',
-        feedback: '',
-      },
-    ],
-    updatedAt: '2024-08-29T06:46:59.030133',
-  },
-  {
-    id: 'e1e8876e-9b68-4af0-87df-df625a7b5d33',
-    title: 'Meeting Summary Discussed',
-    date: '2024-08-29T06:01:33.058111',
-    messages: [
-      {
-        id: '57d40ad8-4d5f-40b1-9a3a-5a9f350c6c10',
-        role: 'user',
-        date: '2024-08-29T06:01:35.486154',
-        content: 'Previous meeting summary',
-        feedback: '',
-      },
-      {
-        id: '4dbff0fa-e548-48fa-9089-19c8dc001a47',
-        role: 'assistant',
-        date: '2024-08-29T06:01:43.016600',
-        content:
-          'I cannot answer this question from the data available. Please rephrase or add more details.',
-        feedback: '',
-      },
-      {
-        id: 'ccf59384-95e5-4a72-a70a-b49ab6703474',
-        role: 'user',
-        date: '2024-08-29T06:01:47.329845',
-        content: 'Previous meeting summary',
-        feedback: '',
-      },
-      {
-        id: '9f72d11a-d83a-4b2d-afa1-d223f6cbc2d5',
-        role: 'assistant',
-        date: '2024-08-29T06:02:08.486476',
-        content:
-          'I cannot answer this question from the data available. Please rephrase or add more details.',
-        feedback: '',
-      },
-      {
-        id: '709afb92-895f-471b-a86c-2ce8ea0de019',
-        role: 'user',
-        date: '2024-08-29T06:02:10.633236',
-        content: 'Top discussion trends',
-        feedback: '',
-      },
-      {
-        id: 'b1ecefad-ef05-44eb-b813-94f2e71b071c',
-        role: 'assistant',
-        date: '2024-08-29T06:02:39.604703',
-        content:
-          'I cannot answer this question from the data available. Please rephrase or add more details.',
-        feedback: '',
-      },
-      {
-        id: '7613339f-3d50-4b4e-b6d3-28f0444618e3',
-        role: 'user',
-        date: '2024-08-29T06:03:32.492492',
-        content: 'Investment summary',
-        feedback: '',
-      },
-      {
-        id: 'b8024913-ca95-4ea5-aedb-7b095b288367',
-        role: 'assistant',
-        date: '2024-08-29T06:03:41.401992',
-        content:
-          'Please only ask questions about the selected client or select another client to inquire about their details.',
-        feedback: '',
-      },
-      {
-        id: 'c9588187-a1cf-41d5-98e5-355706a66a97',
-        role: 'user',
-        date: '2024-08-29T06:33:19.828581',
-        content: 'Investment summary',
-        feedback: '',
-      },
-      {
-        id: 'a682fbb4-1419-4132-b1a6-6be63780beaf',
-        role: 'assistant',
-        date: '2024-08-29T06:34:10.047201',
-        content:
-          "Arun Sharma's investment summary as of July 1, 2024, is as follows:\n\n- Bonds: $2,375,518.00\n- Cash: $2,692,330.00\n- Equities: $2,123,818.00\n- Others: $2,237,664.00",
-        feedback: '',
-      },
-    ],
-    updatedAt: '2024-08-29T06:34:10.047201',
-  },
-  {
-    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
-    title: 'Summarize Discussion Trends',
-    date: '2024-08-29T06:45:57.090670',
-    messages: [
-      {
-        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
-        role: 'user',
-        date: '2024-08-29T06:45:59.749179',
-        content: 'Top discussion trends',
-        feedback: '',
-      },
-      {
-        id: '8c814906-f4a5-41ec-8802-4ed73de1aebc',
-        role: 'assistant',
-        date: '2024-08-29T06:46:46.857296',
-        content:
-          'I cannot answer this question from the data available. Please rephrase or add more details.',
-        feedback: '',
-      },
-      {
-        id: '65a3428f-4d93-4b12-870d-e2b8fd7eea36',
-        role: 'user',
-        date: '2024-08-29T06:46:50.466645',
-        content: 'Top discussion trends',
-        feedback: '',
-      },
-      {
-        id: 'caa853cf-5bfd-414e-ae7a-f33469e02747',
-        role: 'assistant',
-        date: '2024-08-29T06:46:59.030133',
-        content:
-          'I cannot answer this question from the data available. Please rephrase or add more details.',
-        feedback: '',
-      },
-    ],
-    updatedAt: '2024-08-28T06:46:59.030133',
-  },
-  {
-    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
-    title: 'Summarize Discussion Trends 1',
-    date: '2024-08-29T06:45:57.090670',
-    messages: [
-      {
-        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
-        role: 'user',
-        date: '2024-08-29T06:45:59.749179',
-        content: 'Top discussion trends',
-        feedback: '',
-      },
-    ],
-    updatedAt: '2024-08-28T07:46:59.030133',
-  },
-  {
-    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
-    title: 'Summarize Discussion Trends',
-    date: '2024-08-29T06:45:57.090670',
-    messages: [
-      {
-        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
-        role: 'user',
-        date: '2024-08-29T06:45:59.749179',
-        content: 'Top discussion trends',
-        feedback: '',
-      },
-    ],
-    updatedAt: '2024-08-27T06:46:59.030133',
-  },
-  {
-    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
-    title: 'Summarize Discussion Trends',
-    date: '2024-08-29T06:45:57.090670',
-    messages: [
-      {
-        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
-        role: 'user',
-        date: '2024-08-29T06:45:59.749179',
-        content: 'Top discussion trends',
-        feedback: '',
-      },
-    ],
-    updatedAt: '2024-08-26T06:46:59.030133',
-  },
-  {
-    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
-    title: 'Summarize Discussion Trends',
-    date: '2024-08-29T06:45:57.090670',
-    messages: [
-      {
-        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
-        role: 'user',
-        date: '2024-08-29T06:45:59.749179',
-        content: 'Top discussion trends',
-        feedback: '',
-      },
-    ],
-    updatedAt: '2024-08-25T06:46:59.030133',
-  },
-  /* old */
-  {
-    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
-    title: 'Old  Discussion Trends',
-    date: '2024-08-20T06:45:57.090670',
-    messages: [
-      {
-        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
-        role: 'user',
-        date: '2024-08-29T06:45:59.749179',
-        content: 'Top discussion trends',
-        feedback: '',
-      },
-    ],
-    updatedAt: '2024-08-20T06:46:59.030133',
-  },
-  
-    {
-    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
-    title: 'Old  Discussion Trends',
-    date: '2024-08-13T06:45:57.090670',
-    messages: [
-      {
-        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
-        role: 'user',
-        date: '2024-08-29T06:45:59.749179',
-        content: 'Top discussion trends',
-        feedback: '',
-      },
-    ],
-    updatedAt: '2024-08-13T06:46:59.030133',
-  },
-  
-    {
-    id: '3bee2161-b130-4845-a2c6-7061f68bb5d3',
-    title: 'Old  Discussion Trends',
-    date: '2024-07-20T06:45:57.090670',
-    messages: [
-      {
-        id: 'ba60ce3b-b31c-4c2c-b025-3a97fcf7e6af',
-        role: 'user',
-        date: '2024-08-29T06:45:59.749179',
-        content: 'Top discussion trends',
-        feedback: '',
-      },
-    ],
-    updatedAt: '2024-07-20T06:46:59.030133',
-  },
-];
- 
-    groupedChatHistory = groupByMonth(chatHistory)
-    //console.log("groupedChatHistory",groupedChatHistory);
-    groupedChatHistory2  = segregateItems(chatHistory)
-    console.log("groupedChatHistory2",groupedChatHistory2)
+   // groupedChatHistory = groupByMonth(chatHistory)
+    groupedChatHistory  = segregateItems(chatHistory)
+    console.log("groupedChatHistory",groupedChatHistory)
   } else {
     return (
       <Stack horizontal horizontalAlign="center" verticalAlign="center" style={{ width: '100%', marginTop: 10 }}>
@@ -981,7 +293,7 @@ const chatHistory : Conversation[]  = [
     )
   }
 
-  return <ChatHistoryListItemGroups groupedChatHistory={groupedChatHistory} groupedChatHistory2 = {groupedChatHistory2}/>
+  return <ChatHistoryListItemGroups  groupedChatHistory = {groupedChatHistory}/>
 }
 
 export default ChatHistoryList
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
index c9e6efab..dd518c22 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
@@ -22,7 +22,7 @@ import { historyDelete, historyList, historyRename } from '../../api'
 import { Conversation } from '../../api/models'
 import { AppStateContext } from '../../state/AppProvider'
 
-import { GroupedChatHistory,GroupedChatHistory2 } from './ChatHistoryList'
+import { GroupedChatHistory } from './ChatHistoryList'
 
 import styles from './ChatHistoryPanel.module.css'
 
@@ -33,7 +33,6 @@ interface ChatHistoryListItemCellProps {
 
 interface ChatHistoryListItemGroupsProps {
   groupedChatHistory: GroupedChatHistory[],
-  groupedChatHistory2: GroupedChatHistory2[]
 }
 
 const formatMonth = (month: string) => {
@@ -303,7 +302,7 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
   )
 }
 
-export const ChatHistoryListItemGroups: React.FC<ChatHistoryListItemGroupsProps> = ({ groupedChatHistory,groupedChatHistory2 }) => {
+export const ChatHistoryListItemGroups: React.FC<ChatHistoryListItemGroupsProps> = ({ groupedChatHistory }) => {
   const appStateContext = useContext(AppStateContext)
   const observerTarget = useRef(null)
   const [, setSelectedItem] = React.useState<Conversation | null>(null)
@@ -362,10 +361,10 @@ export const ChatHistoryListItemGroups: React.FC<ChatHistoryListItemGroupsProps>
     }
   }, [observerTarget])
 
-  console.log("groupedChatHistory2",groupedChatHistory2)
+  console.log("groupedChatHistory",groupedChatHistory)
   return (
     <div className={styles.listContainer} data-is-scrollable>
-      {groupedChatHistory2.map(
+      {groupedChatHistory.map(
         group =>
           group.entries.length > 0 && (
             <Stack
diff --git a/ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css b/ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css
index dfc2e0d0..50fad3d2 100644
--- a/ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css
+++ b/ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css
@@ -35,7 +35,7 @@ html, body {
     0px 0px 2px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   overflow-y: auto;
-  max-height: calc(100vh - 300px);
+  max-height: calc(100vh - 240px);
   height: 100vh;
   width: 100%;
 }
diff --git a/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css b/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
index 28ff9315..9ef25bf1 100644
--- a/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
+++ b/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
@@ -279,6 +279,7 @@
   transition: all 0.3s ease;
   gap: 10px;
   margin-right:10px;
+  height: calc(100vh - 60px);
 }
 
 .mainContent {
@@ -316,17 +317,17 @@
     grid-template-columns: 1fr; /* Return to single column layout */
   }
 
-  .contentBody::before {
+  /* .contentBody::before {
     content: '';
     display: block;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.3); /* Optional overlay background */
+    background-color: rgba(0, 0, 0, 0.3); 
     position: absolute;
     top: 0;
     left: 0;
     z-index: 90;
-  }
+  } */
 }
 
 /*--------- New Right Layout Changes -------------*/
\ No newline at end of file

From 56b35d944481d82a822f97817d4aa1af3e8b6953 Mon Sep 17 00:00:00 2001
From: Kiran Siluveru <v-ksiluveru@microsoft.com>
Date: Thu, 29 Aug 2024 18:41:01 +0530
Subject: [PATCH 05/12] Show history button on client selection

---
 .../src/components/ChatHistory/ChatHistoryPanel.module.css      | 2 +-
 ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
index 79c19eb2..dc90f881 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
@@ -69,7 +69,7 @@
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 10px;
-  /* padding-left: 15px; */
+  color: #616161;
 }
 
 .chatTitle {
diff --git a/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx b/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
index 9ef36a3e..fdb95fb5 100644
--- a/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
+++ b/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
@@ -216,7 +216,7 @@ const Layout = () => {
                 </Link>
               </Stack>
               <Stack horizontal tokens={{ childrenGap: 4 }} className={styles.shareButtonContainer}>
-                {appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && (
+                {Boolean(selectedUser) && appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && (
                   <HistoryButton
                     onClick={handleHistoryClick}
                     text={appStateContext?.state?.isChatHistoryOpen ? hideHistoryLabel : showHistoryLabel}

From d317297bcbcb08c4bbad833c21b1562102e19282 Mon Sep 17 00:00:00 2001
From: Kiran Siluveru <v-ksiluveru@microsoft.com>
Date: Thu, 29 Aug 2024 18:59:32 +0530
Subject: [PATCH 06/12] Chat history text styles updated

---
 .../frontend/src/components/ChatHistory/ChatHistoryPanel.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
index bc84f6ae..04bc52a5 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
@@ -110,11 +110,10 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
             role="heading"
             aria-level={2}
             style={{
-              alignSelf: 'center',
               fontWeight: '600',
-              fontSize: '18px',
+              fontSize: '16px',
               marginRight: 'auto',
-              // paddingLeft: '20px'
+              color:'#242424'
             }}>
             Chat history
           </Text>

From dcb726fe44407e1d95213200636e42be89552c29 Mon Sep 17 00:00:00 2001
From: Bangarraju-Microsoft <v-golib@microsoft.com>
Date: Thu, 29 Aug 2024 19:16:39 +0530
Subject: [PATCH 07/12] Chat history edit buttons allignment

---
 .../ChatHistory/ChatHistoryListItem.tsx       | 14 ++--
 .../App/frontend/src/pages/layout/Layout.tsx  | 73 -------------------
 2 files changed, 8 insertions(+), 79 deletions(-)

diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
index 70b47771..a89adcce 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
@@ -198,10 +198,10 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
       >
       {edit ? (
         <>
-          <Stack.Item style={{ width: '100%' }}>
+          <Stack.Item style={{ width: '100%'  }}>
             <form aria-label="edit title form" onSubmit={e => handleSaveEdit(e)} style={{ padding: '5px 0px' }}>
-              <Stack horizontal verticalAlign={'start'}>
-                <Stack.Item>
+              <Stack horizontal verticalAlign={'start'} style={{ width: '100%' ,justifyContent:'space-between'  }}>
+                <Stack.Item style={{flex:1}}>
                   <TextField
                     componentRef={textFieldRef}
                     autoFocus={textFieldFocused}
@@ -218,21 +218,23 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
                     <Stack aria-label="action button group" horizontal verticalAlign={'center'}>
                       <IconButton
                         role="button"
+                        className={styles.itemButton}
                         disabled={errorRename !== undefined}
                         onKeyDown={e => (e.key === ' ' || e.key === 'Enter' ? handleSaveEdit(e) : null)}
                         onClick={e => handleSaveEdit(e)}
                         aria-label="confirm new title"
                         iconProps={{ iconName: 'CheckMark' }}
-                        styles={{ root: { color: 'green', marginLeft: '5px' } }}
+                        styles={{ root: { color: 'green' } }}
                       />
                       <IconButton
                         role="button"
+                        className={styles.itemButton}
                         disabled={errorRename !== undefined}
                         onKeyDown={e => (e.key === ' ' || e.key === 'Enter' ? cancelEditTitle() : null)}
                         onClick={() => cancelEditTitle()}
                         aria-label="cancel edit title"
                         iconProps={{ iconName: 'Cancel' }}
-                        styles={{ root: { color: 'red', marginLeft: '5px' } }}
+                        styles={{ root: { color: 'red' } }}
                       />
                     </Stack>
                   </Stack.Item>
@@ -251,7 +253,7 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
         </>
       ) : (
         <>
-          <Stack horizontal verticalAlign={'center'} style={{ width: '100%' }}>
+          <Stack horizontal verticalAlign={'center'} style={{ width: '100%',justifyContent:'space-between' }}>
             <div className={styles.chatTitle}>{truncatedTitle}</div>
             {/* {(isSelected || isHovered) && ( */}
               <Stack horizontal horizontalAlign="end">
diff --git a/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx b/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
index fdb95fb5..f49d669d 100644
--- a/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
+++ b/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
@@ -132,79 +132,6 @@ const Layout = () => {
 
         <Cards onCardClick={handleCardClick} />
       </div>
-
-      {/* <div className={styles.ContentContainer}>
-        <div className={styles.contentHeader}>
-          <header className={styles.header} role={'banner'}>
-            <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
-              <Stack horizontal verticalAlign="center">
-                <img src={ui?.logo ? ui.logo : TeamAvatar} className={styles.headerIcon} aria-hidden="true" alt="" />
-                <Link to="/" className={styles.headerTitleContainer}>
-                  <h1 className={styles.headerTitle}>{ui?.title}</h1>
-                </Link>
-              </Stack>
-              <Stack horizontal tokens={{ childrenGap: 4 }} className={styles.shareButtonContainer}>
-                {appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && (
-                  <HistoryButton
-                    onClick={handleHistoryClick}
-                    text={appStateContext?.state?.isChatHistoryOpen ? hideHistoryLabel : showHistoryLabel}
-                  />
-                )}
-                {ui?.show_share_button && <ShareButton onClick={handleShareClick} text={shareLabel} />}
-              </Stack>
-            </Stack>
-          </header>
-        </div>
-        <div className={styles.contentBody}>
-          <div className={styles.contentColumn}>
-            {!selectedUser && showWelcomeCard ? (
-              <div>
-                <div className={styles.mainPage}>
-                  <div className={styles.welcomeCard}>
-                    <div className={styles.welcomeCardContent}>
-                      <div className={styles.welcomeCardIcon}>
-                        <img src={welcomeIcon} alt="Icon" className={styles.icon} />
-                      </div>
-                      <h3 className={styles.welcomeTitle}>Select a client</h3>
-                      <p className={styles.welcomeText}>
-                        You can ask questions about their portfolio details and previous conversations or view their
-                        profile.
-                      </p>
-                    </div>
-                  </div>
-                  <div className={styles.welcomeMessage}>
-                    <img src={Illustration} alt="Illustration" className={styles.illustration} />
-                    <h1>Welcome Back, {name}</h1>
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <div className={styles.pivotContainer}>
-                {selectedUser && (
-                  <div className={styles.selectedClient}>
-                    Client selected:{' '}
-                    <span className={styles.selectedName}>{selectedUser ? selectedUser.ClientName : 'None'}</span>
-                  </div>
-                )}
-                <Pivot defaultSelectedKey="chat">
-                  <PivotItem headerText="Chat" itemKey="chat">
-                    <Chat />
-                  </PivotItem>
-                  <PivotItem headerText="Client 360 Profile" itemKey="profile">
-                    <PowerBIChart chartUrl={calculateChartUrl(selectedUser)} />
-                  </PivotItem>
-                </Pivot>
-              </div>
-            )}
-          </div>
-        </div>
-        <div className={styles.historyPanel}>
-          {appStateContext?.state.isChatHistoryOpen &&
-            appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && <ChatHistoryPanel />}
-
-        </div>
-      </div> */}
-
       <div className={styles.contentArea}>
         <div className={styles.contentHeader}>
           <header className={styles.header} role={'banner'}>

From 0787d8a3a34d3f7c44b029e6abd119434d08c644 Mon Sep 17 00:00:00 2001
From: Bangarraju-Microsoft <v-golib@microsoft.com>
Date: Thu, 29 Aug 2024 19:34:46 +0530
Subject: [PATCH 08/12] Commentted code removed

---
 .../ChatHistory/ChatHistoryList.tsx           | 198 ++----------------
 .../ChatHistory/ChatHistoryListItem.tsx       |  70 +++----
 .../ChatHistory/ChatHistoryPanel.module.css   |  23 +-
 .../ChatHistory/ChatHistoryPanel.tsx          |  38 ++--
 .../App/frontend/src/pages/chat/Chat.tsx      |   6 +-
 .../src/pages/layout/Layout.module.css        |  39 ++--
 .../App/frontend/src/pages/layout/Layout.tsx  |   2 +-
 7 files changed, 85 insertions(+), 291 deletions(-)

diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
index ab61a9e4..757da0fe 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
@@ -6,67 +6,13 @@ import { AppStateContext } from '../../state/AppProvider'
 
 import { ChatHistoryListItemGroups } from './ChatHistoryListItem'
 
-interface ChatHistoryListProps {}
-
-// export interface GroupedChatHistory {
-//   month: string
-//   entries: Conversation[]
-// }
+interface ChatHistoryListProps { }
 
 export interface GroupedChatHistory {
   title: string
   entries: Conversation[]
 }
 
-/*
-const groupByMonth = (entries: Conversation[]) => {
-  const groups: GroupedChatHistory[] = [{ month: 'Recent', entries: [] }]
-  const currentDate = new Date()
-
-  entries.forEach(entry => {
-    const date = new Date(entry.date)
-    const daysDifference = (currentDate.getTime() - date.getTime()) / (1000 * 60 * 60 * 24)
-    const monthYear = date.toLocaleString('default', { month: 'long', year: 'numeric' })
-    const existingGroup = groups.find(group => group.month === monthYear)
-
-    if (daysDifference <= 7) {
-      groups[0].entries.push(entry)
-    } else {
-      if (existingGroup) {
-        existingGroup.entries.push(entry)
-      } else {
-        groups.push({ month: monthYear, entries: [entry] })
-      }
-    }
-  })
-
-  groups.sort((a, b) => {
-    // Check if either group has no entries and handle it
-    if (a.entries.length === 0 && b.entries.length === 0) {
-      return 0 // No change in order
-    } else if (a.entries.length === 0) {
-      return 1 // Move 'a' to a higher index (bottom)
-    } else if (b.entries.length === 0) {
-      return -1 // Move 'b' to a higher index (bottom)
-    }
-    const dateA = new Date(a.entries[0].date)
-    const dateB = new Date(b.entries[0].date)
-    return dateB.getTime() - dateA.getTime()
-  })
-
-  groups.forEach(group => {
-    group.entries.sort((a, b) => {
-      const dateA = new Date(a.date)
-      const dateB = new Date(b.date)
-      return dateB.getTime() - dateA.getTime()
-    })
-  })
-
-  return groups
-}
-  */
-
-
 // Helper function to format dates
 const formatDate = (date: Date, includeWeekday = false) => {
   const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
@@ -90,105 +36,8 @@ interface Item {
   userId: string;
 }
 
-// Helper function to segregate and sort items
-const segregateItems1 = (items : Item[]) => {
-  console.log("items", items);
-  const today = new Date();
-  const yesterday = new Date(today);
-  yesterday.setDate(today.getDate() - 1);
 
-  // Sort items by updatedAt in descending order
-  items.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
-
-
-  const groupedItems: {
-    Today: Item[];
-    Yesterday: Item[];
-    Past: { [key: string]: Item[] };
-  } = {
-    Today: [],
-    Yesterday: [],
-    Past: {}
-  };
-
-  items.forEach((item) => {
-    const itemDate = new Date(item.updatedAt);
-    const itemDateOnly = itemDate.toDateString();
-
-    if (itemDateOnly === today.toDateString()) {
-      groupedItems.Today.push(item);
-    } else if (itemDateOnly === yesterday.toDateString()) {
-      groupedItems.Yesterday.push(item);
-    } else {
-      const formattedDate = formatDate(itemDate, true); // Include weekday for past dates
-      if (!groupedItems.Past[formattedDate]) {
-        groupedItems.Past[formattedDate] = [];
-      }
-      groupedItems.Past[formattedDate].push(item);
-    }
-  });
-
-   const finalGroupedItems = [
-    { title: `Today, ${formatDate(today)}`, items: groupedItems.Today },
-    { title: `Yesterday, ${formatDate(yesterday)}`, items: groupedItems.Yesterday },
-    ...Object.keys(groupedItems.Past).map(date => ({
-      title: date.split(', ').reverse().join(', '), // Reordering the date
-      items: groupedItems.Past[date]
-    }))];
-    console.log("finalGroupedItems",finalGroupedItems);
-
-  return finalGroupedItems;
-};
-
-const segregateItems2 = (items: Conversation[]) => {
-  const today = new Date();
-  const yesterday = new Date(today);
-  yesterday.setDate(today.getDate() - 1);
-
-  // Sort items by updatedAt in descending order
-  items.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
-
-  const groupedItems: {
-    Today: Conversation[];
-    Yesterday: Conversation[];
-    Past: { [key: string]: Conversation[] };
-  } = {
-    Today: [],
-    Yesterday: [],
-    Past: {}
-  };
-
-  items.forEach((item) => {
-    const itemDate = new Date(item.updatedAt);
-    const itemDateOnly = itemDate.toDateString();
-
-    if (itemDateOnly === today.toDateString()) {
-      groupedItems.Today.push(item);
-    } else if (itemDateOnly === yesterday.toDateString()) {
-      groupedItems.Yesterday.push(item);
-    } else {
-      const formattedDate = formatDate(itemDate, true); // Include weekday for past dates
-      if (!groupedItems.Past[formattedDate]) {
-        groupedItems.Past[formattedDate] = [];
-      }
-      groupedItems.Past[formattedDate].push(item);
-    }
-  });
-
-  const finalResult  = [
-    { title: `Today, ${formatDate(today)}`, entries: groupedItems.Today },
-    { title: `Yesterday, ${formatDate(yesterday)}`, entries: groupedItems.Yesterday },
-    ...Object.keys(groupedItems.Past).map(date => ({
-      title: date.split(', ').reverse().join(', '), // Reordering the date
-      entries: groupedItems.Past[date]
-    }))
-  ];
-
-  return finalResult;
-};
-
-
-function isLastSevenDaysRange(dateToCheck) {
+function isLastSevenDaysRange(dateToCheck: any) {
   // Get the current date
   const currentDate = new Date();
   // Calculate the date 2 days ago
@@ -201,22 +50,22 @@ function isLastSevenDaysRange(dateToCheck) {
   // We need eightDaysAgo to be earlier than twoDaysAgo
   return dateToCheck >= eightDaysAgo && dateToCheck <= twoDaysAgo;
 }
- 
+
 const segregateItems = (items: Conversation[]) => {
   const today = new Date();
   const yesterday = new Date(today);
   const last7Days = []
   yesterday.setDate(today.getDate() - 1);
- 
+
   // Sort items by updatedAt in descending order
   items.sort(
     (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
   );
- 
+
   const groupedItems: {
     Today: Conversation[],
     Yesterday: Conversation[],
-    Last7Days:Conversation[],
+    Last7Days: Conversation[],
     Older: Conversation[],
     Past: { [key: string]: Conversation[] },
   } = {
@@ -226,33 +75,27 @@ const segregateItems = (items: Conversation[]) => {
     Older: [],
     Past: {},
   };
- 
+
   items.forEach(item => {
     const itemDate = new Date(item.updatedAt);
     const itemDateOnly = itemDate.toDateString();
-		console.log("itemDateOnly", typeof itemDate);
     if (itemDateOnly === today.toDateString()) {
       groupedItems.Today.push(item);
     } else if (itemDateOnly === yesterday.toDateString()) {
       groupedItems.Yesterday.push(item);
     }
-    else if(isLastSevenDaysRange(itemDate)){
-    groupedItems.Last7Days.push(item);
+    else if (isLastSevenDaysRange(itemDate)) {
+      groupedItems.Last7Days.push(item);
     }
     else {
-    groupedItems.Older.push(item);
-/*      const formattedDate = formatDate(itemDate, true); // Include weekday for past dates
-      if (!groupedItems.Past[formattedDate]) {
-        groupedItems.Past[formattedDate] = [];
-      } */
-/*       groupedItems.Past[formattedDate].push(item); */
+      groupedItems.Older.push(item);
     }
   });
- 
+
   const finalResult = [
-    { title: `Today, ${formatDate(today)}`, entries: groupedItems.Today },
+    { title: `Today`, entries: groupedItems.Today },
     {
-      title: `Yesterday, ${formatDate(yesterday)}`,
+      title: `Yesterday`,
       entries: groupedItems.Yesterday,
     },
     {
@@ -264,23 +107,18 @@ const segregateItems = (items: Conversation[]) => {
       entries: groupedItems.Older,
     },
   ];
- 
+
   return finalResult;
 };
- 
+
 
 const ChatHistoryList: React.FC<ChatHistoryListProps> = () => {
   const appStateContext = useContext(AppStateContext)
   const chatHistory = appStateContext?.state.chatHistory
-
-  React.useEffect(() => {}, [appStateContext?.state.chatHistory])
-
- 
+  React.useEffect(() => { }, [appStateContext?.state.chatHistory])
   let groupedChatHistory
   if (chatHistory && chatHistory.length > 0) {
-   // groupedChatHistory = groupByMonth(chatHistory)
-    groupedChatHistory  = segregateItems(chatHistory)
-    console.log("groupedChatHistory",groupedChatHistory)
+    groupedChatHistory = segregateItems(chatHistory)
   } else {
     return (
       <Stack horizontal horizontalAlign="center" verticalAlign="center" style={{ width: '100%', marginTop: 10 }}>
@@ -293,7 +131,7 @@ const ChatHistoryList: React.FC<ChatHistoryListProps> = () => {
     )
   }
 
-  return <ChatHistoryListItemGroups  groupedChatHistory = {groupedChatHistory}/>
+  return <ChatHistoryListItemGroups groupedChatHistory={groupedChatHistory} />
 }
 
 export default ChatHistoryList
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
index a89adcce..1a11ec8f 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
@@ -95,11 +95,11 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
     }
   }, [appStateContext?.state.currentChat?.id, item?.id])
 
-  useEffect(()=>{
+  useEffect(() => {
     let v = appStateContext?.state.isRequestInitiated;
-    if(v!=undefined)
+    if (v != undefined)
       setIsButtonDisabled(v && isSelected)
-  },[appStateContext?.state.isRequestInitiated])
+  }, [appStateContext?.state.isRequestInitiated])
 
   const onDelete = async () => {
     appStateContext?.dispatch({ type: 'TOGGLE_LOADER' });
@@ -195,13 +195,13 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
       // horizontal
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
-      >
+    >
       {edit ? (
         <>
-          <Stack.Item style={{ width: '100%'  }}>
+          <Stack.Item style={{ width: '100%' }}>
             <form aria-label="edit title form" onSubmit={e => handleSaveEdit(e)} style={{ padding: '5px 0px' }}>
-              <Stack horizontal verticalAlign={'start'} style={{ width: '100%' ,justifyContent:'space-between'  }}>
-                <Stack.Item style={{flex:1}}>
+              <Stack horizontal verticalAlign={'start'} style={{ width: '100%', justifyContent: 'space-between' }}>
+                <Stack.Item style={{ flex: 1 }}>
                   <TextField
                     componentRef={textFieldRef}
                     autoFocus={textFieldFocused}
@@ -253,28 +253,26 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
         </>
       ) : (
         <>
-          <Stack horizontal verticalAlign={'center'} style={{ width: '100%',justifyContent:'space-between' }}>
+          <Stack horizontal verticalAlign={'center'} style={{ width: '100%', justifyContent: 'space-between' }}>
             <div className={styles.chatTitle}>{truncatedTitle}</div>
-            {/* {(isSelected || isHovered) && ( */}
-              <Stack horizontal horizontalAlign="end">
-                <IconButton
-                  className={styles.itemButton}
-                  disabled={isButtonDisabled}
-                  iconProps={{ iconName: 'Delete' }}
-                  title="Delete"
-                  onClick={toggleDeleteDialog}
-                  onKeyDown={e => (e.key === ' ' ? toggleDeleteDialog() : null)}
-                />
-                <IconButton
-                  className={styles.itemButton}
-                  disabled={isButtonDisabled}
-                  iconProps={{ iconName: 'Edit' }}
-                  title="Edit"
-                  onClick={onEdit}
-                  onKeyDown={e => (e.key === ' ' ? onEdit() : null)}
-                />
-              </Stack>
-            {/* )} */}
+            <Stack horizontal horizontalAlign="end">
+              <IconButton
+                className={styles.itemButton}
+                disabled={isButtonDisabled}
+                iconProps={{ iconName: 'Delete' }}
+                title="Delete"
+                onClick={toggleDeleteDialog}
+                onKeyDown={e => (e.key === ' ' ? toggleDeleteDialog() : null)}
+              />
+              <IconButton
+                className={styles.itemButton}
+                disabled={isButtonDisabled}
+                iconProps={{ iconName: 'Edit' }}
+                title="Edit"
+                onClick={onEdit}
+                onKeyDown={e => (e.key === ' ' ? onEdit() : null)}
+              />
+            </Stack>
           </Stack>
         </>
       )}
@@ -359,7 +357,6 @@ export const ChatHistoryListItemGroups: React.FC<ChatHistoryListItemGroupsProps>
     }
   }, [observerTarget])
 
-  console.log("groupedChatHistory",groupedChatHistory)
   return (
     <div className={styles.listContainer} data-is-scrollable>
       {groupedChatHistory.map(
@@ -381,23 +378,10 @@ export const ChatHistoryListItemGroups: React.FC<ChatHistoryListItemGroupsProps>
                 className={styles.chatList}
               />
               <div ref={observerTarget} />
-              {/* <Separator
-                styles={{
-                  root: {
-                    width: '100%',
-                    position: 'relative',
-                    '::before': {
-                      backgroundColor: '#d6d6d6'
-                    }
-                  }
-                }}
-              /> */}
             </Stack>
           )
       )}
-      
-      
-    
+
 
       {showSpinner && (
         <div className={styles.spinnerContainer}>
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
index dc90f881..f696adde 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
@@ -1,6 +1,5 @@
 .container {
   max-height: calc(100vh - 100px);
-  /* width: 300px; */
 }
 
 .listContainer {
@@ -9,47 +8,31 @@
 }
 
 .itemCell {
-  /* max-width: 270px; */
   min-height: 32px;
   cursor: pointer;
-  /* padding-left: 15px;
-  padding-right: 5px;
-  padding-top: 5px;
-  padding-bottom: 5px; */
   padding: 10px;
   box-sizing: border-box;
   border-radius: 5px;
   display: flex;
   background: #F3F3F3;
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
+
 .selectedItemCell {
   border: 1.5px solid #0481E0
 }
 
-/* .itemCell:hover {
-  background: #e6e6e6;
-} */
-
 .itemButton {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 28px;
   height: 28px;
-  /* border: 1px solid #d1d1d1; */
   border-radius: 5px;
-  /* background-color: white; */
-  /* margin: auto 2.5px; */
   cursor: pointer;
 }
 
-/* .itemButton:hover {
-  background-color: #e6e6e6;
-} */
-
 .chatGroup {
-  /* margin: auto 5px; */
   margin-top: 20px;
   width: 100%;
 }
@@ -86,4 +69,4 @@
   .container {
     width: 100%;
   }
-}
+}
\ No newline at end of file
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
index 04bc52a5..ce0db9e9 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
@@ -26,7 +26,7 @@ import ChatHistoryList from './ChatHistoryList'
 
 import styles from './ChatHistoryPanel.module.css'
 
-interface ChatHistoryPanelProps {}
+interface ChatHistoryPanelProps { }
 
 export enum ChatHistoryPanelTabs {
   History = 'History'
@@ -67,7 +67,7 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
   }
 
   const menuItems: IContextualMenuItem[] = [
-    { key: 'clearAll', text: 'Clear all chat history',disabled: !hasChatHistory, iconProps: { iconName: 'Delete' }}
+    { key: 'clearAll', text: 'Clear all chat history', disabled: !hasChatHistory, iconProps: { iconName: 'Delete' } }
   ]
 
   const handleHistoryClick = () => {
@@ -100,7 +100,7 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
     }, 2000)
   }
 
-  React.useEffect(() => {}, [appStateContext?.state.chatHistory, clearingError])
+  React.useEffect(() => { }, [appStateContext?.state.chatHistory, clearingError])
 
   return (
     <section className={styles.container} data-is-scrollable aria-label={'chat history panel'}>
@@ -113,7 +113,7 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
               fontWeight: '600',
               fontSize: '16px',
               marginRight: 'auto',
-              color:'#242424'
+              color: '#242424'
             }}>
             Chat history
           </Text>
@@ -155,20 +155,20 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
           {appStateContext?.state.chatHistoryLoadingState === ChatHistoryLoadingState.Fail &&
             appStateContext?.state.isCosmosDBAvailable && (
               <>
-                  <Stack horizontalAlign="center" verticalAlign="center" style={{ width: '100%', marginTop: 10 }}>
-                    <StackItem>
-                      <Text style={{ alignSelf: 'center', fontWeight: '400', fontSize: 16 }}>
-                        {appStateContext?.state.isCosmosDBAvailable?.status && (
-                          <span>{appStateContext?.state.isCosmosDBAvailable?.status}</span>
-                        )}
-                        {!appStateContext?.state.isCosmosDBAvailable?.status && <span>Error loading chat history</span>}
-                      </Text>
-                    </StackItem>
-                    <StackItem>
-                      <Text style={{ alignSelf: 'center', fontWeight: '400', fontSize: 14 }}>
-                        <span>Chat history can't be saved at this time</span>
-                      </Text>
-                    </StackItem>
+                <Stack horizontalAlign="center" verticalAlign="center" style={{ width: '100%', marginTop: 10 }}>
+                  <StackItem>
+                    <Text style={{ alignSelf: 'center', fontWeight: '400', fontSize: 16 }}>
+                      {appStateContext?.state.isCosmosDBAvailable?.status && (
+                        <span>{appStateContext?.state.isCosmosDBAvailable?.status}</span>
+                      )}
+                      {!appStateContext?.state.isCosmosDBAvailable?.status && <span>Error loading chat history</span>}
+                    </Text>
+                  </StackItem>
+                  <StackItem>
+                    <Text style={{ alignSelf: 'center', fontWeight: '400', fontSize: 14 }}>
+                      <span>Chat history can't be saved at this time</span>
+                    </Text>
+                  </StackItem>
                 </Stack>
               </>
             )}
@@ -199,7 +199,7 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
       </Stack>
       <Dialog
         hidden={hideClearAllDialog}
-        onDismiss={clearing ? () => {} : onHideClearAllDialog}
+        onDismiss={clearing ? () => { } : onHideClearAllDialog}
         dialogContentProps={clearAllDialogContentProps}
         modalProps={modalProps}>
         <DialogFooter>
diff --git a/ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx b/ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx
index 0f5bd6cd..735c11a2 100644
--- a/ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx
+++ b/ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx
@@ -667,7 +667,7 @@ const Chat = () => {
 
   useLayoutEffect(() => {
     const element = document.getElementById("chatMessagesContainer")!;
-    if(element){
+    if (element) {
       element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
     }
   }, [showLoadingMessage, processMessages])
@@ -713,7 +713,7 @@ const Chat = () => {
         : makeApiRequestWithoutCosmosDB(question, conversationId)
     }
   }
-  
+
   return (
     <div className={styles.container} role="main">
       {showAuthMessage ? (
@@ -937,7 +937,7 @@ const Chat = () => {
               </div>
             </Stack.Item>
           )}
-         
+
         </Stack>
       )}
     </div>
diff --git a/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css b/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
index 9ef25bf1..26e4277a 100644
--- a/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
+++ b/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
@@ -104,7 +104,7 @@
   color: #242424;
 }
 
-.ContentContainer{
+.ContentContainer {
   overflow: hidden;
   flex-grow: 1;
 }
@@ -128,15 +128,15 @@
 .selectedClient {
   margin-top: 15px;
   font-size: 18px;
-  float: right; 
+  float: right;
   padding: 10px;
   font-size: 16px;
 }
 
 
 
-.selectedName{
-  border-radius:25px;
+.selectedName {
+  border-radius: 25px;
   background: var(--bap-icons-gradients-blue-06, linear-gradient(123deg, #40C4F5 0%, #0095E6 100%));
   padding: 12px;
   color: white;
@@ -172,7 +172,7 @@
   margin: 10px 0;
 }
 
-.illustration{
+.illustration {
   width: 70px;
 }
 
@@ -183,7 +183,7 @@
   flex-direction: column;
 }
 
-.pivotContainer > div {
+.pivotContainer>div {
   width: 100%;
 }
 
@@ -202,7 +202,6 @@
 
 .historyPanel {
   background: #f1f1f1;
-  /* border-radius: 8px; */
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   padding: 16px;
   height: 100%;
@@ -211,11 +210,11 @@
 
 
 .welcomeCard {
-   /* display: flex;
+  /* display: flex;
   flex-direction: column;
   align-items: center; */
   /* padding: 16px; */
-  background-image:url(../../assets/Client-tourtip.png);
+  background-image: url(../../assets/Client-tourtip.png);
   background-size: contain;
   background-repeat: no-repeat;
   padding: 20px;
@@ -231,7 +230,7 @@
   margin-bottom: 10px;
 }
 
-.welcomeCardContent{
+.welcomeCardContent {
   padding: 16px;
 
 }
@@ -278,15 +277,15 @@
   position: relative;
   transition: all 0.3s ease;
   gap: 10px;
-  margin-right:10px;
+  margin-right: 10px;
   height: calc(100vh - 60px);
 }
 
 .mainContent {
   padding: 20px;
   border: 1px solid lightgray;
-    border-radius: 8px;
-    background: white;
+  border-radius: 8px;
+  background: white;
 }
 
 .historyPanel {
@@ -314,20 +313,10 @@
   }
 
   .contentBody {
-    grid-template-columns: 1fr; /* Return to single column layout */
+    grid-template-columns: 1fr;
+    /* Return to single column layout */
   }
 
-  /* .contentBody::before {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.3); 
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 90;
-  } */
 }
 
 /*--------- New Right Layout Changes -------------*/
\ No newline at end of file
diff --git a/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx b/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
index f49d669d..d38452d0 100644
--- a/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
+++ b/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
@@ -154,7 +154,7 @@ const Layout = () => {
             </Stack>
           </header>
         </div>
-        <div className={ `${styles.contentBody} ${appStateContext?.state.isChatHistoryOpen ? styles.withHistory : ''}`}>
+        <div className={`${styles.contentBody} ${appStateContext?.state.isChatHistoryOpen ? styles.withHistory : ''}`}>
           <div className={styles.mainContent}>
             <div className={styles.contentColumn}>
               {!selectedUser && showWelcomeCard ? (

From 0a407951e4872ca4f66c0077f51fde5fcd18a632 Mon Sep 17 00:00:00 2001
From: Bangarraju-Microsoft <v-golib@microsoft.com>
Date: Thu, 29 Aug 2024 19:52:47 +0530
Subject: [PATCH 09/12] removed unwanted code

---
 .../src/components/ChatHistory/ChatHistoryList.tsx | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
index 757da0fe..6287787c 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
@@ -22,20 +22,6 @@ const formatDate = (date: Date, includeWeekday = false) => {
   return date.toLocaleDateString(undefined, options);
 };
 
-interface Item {
-  _attachments: string;
-  _etag: string;
-  _rid: string;
-  _self: string;
-  _ts: number;
-  createdAt: string;
-  id: string;
-  title: string;
-  type: string;
-  updatedAt: string;
-  userId: string;
-}
-
 
 function isLastSevenDaysRange(dateToCheck: any) {
   // Get the current date

From d2765f39e7befafe84eeee7c602ac9cc5bc82117 Mon Sep 17 00:00:00 2001
From: Bangarraju-Microsoft <v-golib@microsoft.com>
Date: Fri, 30 Aug 2024 12:15:07 +0530
Subject: [PATCH 10/12] Chat component removed border, background and spacing

---
 .../ChatHistory/ChatHistoryPanel.module.css          |  2 +-
 .../QuestionInput/QuestionInput.module.css           |  1 +
 .../App/frontend/src/pages/chat/Chat.module.css      | 12 ++++++------
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
index f696adde..102db634 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
@@ -4,7 +4,7 @@
 
 .listContainer {
   overflow: hidden auto;
-  max-height: calc(90vh - 105px);
+  max-height: calc(90vh - 66px);
 }
 
 .itemCell {
diff --git a/ClientAdvisor/App/frontend/src/components/QuestionInput/QuestionInput.module.css b/ClientAdvisor/App/frontend/src/components/QuestionInput/QuestionInput.module.css
index b9dc041e..d0c8a01c 100644
--- a/ClientAdvisor/App/frontend/src/components/QuestionInput/QuestionInput.module.css
+++ b/ClientAdvisor/App/frontend/src/components/QuestionInput/QuestionInput.module.css
@@ -10,6 +10,7 @@
     0px 8px 16px rgba(0, 0, 0, 0.14),
     0px 0px 2px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
+  margin-left:8px;
 }
 
 .questionInputTextArea {
diff --git a/ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css b/ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css
index 1282b82c..595ae813 100644
--- a/ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css
+++ b/ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css
@@ -29,13 +29,13 @@ html, body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: radial-gradient(108.78% 108.78% at 50.02% 19.78%, #ffffff 57.29%, #eef6fe 100%);
+  /* background: radial-gradient(108.78% 108.78% at 50.02% 19.78%, #ffffff 57.29%, #eef6fe 100%);
   box-shadow:
     0px 2px 4px rgba(0, 0, 0, 0.14),
-    0px 0px 2px rgba(0, 0, 0, 0.12);
+    0px 0px 2px rgba(0, 0, 0, 0.12); */
   border-radius: 8px;
   overflow-y: auto;
-  max-height: calc(100vh - 240px);
+  max-height: calc(100vh - 250px);
   height: 100vh;
   width: 100%;
 }
@@ -155,9 +155,9 @@ html, body {
   padding-bottom: 24px;
   padding-left: 24px;
   padding-right: 24px;
-  width: calc(100% - 100px);
+  width: calc(100% - 60px);
   max-width: 1028px;
-  margin-bottom: 50px;
+  margin-bottom: 35px;
   margin-top: 8px;
 }
 
@@ -345,7 +345,7 @@ a {
   cursor: pointer;
 }
 .promptsContainer{
-  width: calc(100% - 100px);
+  width: calc(100% - 60px);
     max-width: 1028px;
     justify-content: right;
     margin: 4px 0px;

From 19719e019fbf6cf922e1e1a0245ed137f282a5e2 Mon Sep 17 00:00:00 2001
From: Bangarraju-Microsoft <v-golib@microsoft.com>
Date: Fri, 30 Aug 2024 12:16:28 +0530
Subject: [PATCH 11/12] removed background color for chat area

---
 ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css b/ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css
index 595ae813..5e496e2a 100644
--- a/ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css
+++ b/ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css
@@ -29,10 +29,7 @@ html, body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  /* background: radial-gradient(108.78% 108.78% at 50.02% 19.78%, #ffffff 57.29%, #eef6fe 100%);
-  box-shadow:
-    0px 2px 4px rgba(0, 0, 0, 0.14),
-    0px 0px 2px rgba(0, 0, 0, 0.12); */
+
   border-radius: 8px;
   overflow-y: auto;
   max-height: calc(100vh - 250px);

From e61b7dc755e11db5bb68f5534da7039048f5d364 Mon Sep 17 00:00:00 2001
From: Bangarraju-Microsoft <v-golib@microsoft.com>
Date: Fri, 30 Aug 2024 12:42:57 +0530
Subject: [PATCH 12/12] chat history lowere resolution changes

---
 .../components/ChatHistory/ChatHistoryPanel.module.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
index 102db634..67fc46a2 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
@@ -4,7 +4,15 @@
 
 .listContainer {
   overflow: hidden auto;
-  max-height: calc(90vh - 66px);
+  max-height: calc(90vh - 70px);
+}
+
+/* Media Query for lower resolutions or zoomed-in views */
+@media screen and (max-width: 1024px) {
+  .listContainer {
+    overflow: hidden auto;
+    max-height: calc(90vh - 100px);
+  }
 }
 
 .itemCell {