From 7285b0a33ef270cf3d38e5e35e383af7954e8b9a Mon Sep 17 00:00:00 2001
From: JunichiSugiura <jun.sugiura.jp@gmail.com>
Date: Fri, 20 Dec 2024 10:07:11 +0900
Subject: [PATCH 1/5] Show messages in one section

---
 .../src/components/session/CollapsibleRow.tsx |  33 ----
 .../src/components/session/ContractCard.tsx   |  48 ++---
 .../src/components/session/MessageCard.tsx    | 177 +++++++++++-------
 .../session/UnverifiedSessionSummary.tsx      |   6 +-
 4 files changed, 124 insertions(+), 140 deletions(-)
 delete mode 100644 packages/keychain/src/components/session/CollapsibleRow.tsx

diff --git a/packages/keychain/src/components/session/CollapsibleRow.tsx b/packages/keychain/src/components/session/CollapsibleRow.tsx
deleted file mode 100644
index 8ef1276fb..000000000
--- a/packages/keychain/src/components/session/CollapsibleRow.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { PropsWithChildren, useState } from "react";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  CheckboxIcon,
-} from "@cartridge/ui-next";
-
-interface CollapsibleRowProps extends PropsWithChildren {
-  title: string;
-}
-
-export function CollapsibleRow({ title, children }: CollapsibleRowProps) {
-  const [value, setValue] = useState("");
-
-  return (
-    <Accordion type="single" collapsible value={value} onValueChange={setValue}>
-      <AccordionItem value={title} className="flex flex-col">
-        <AccordionTrigger hideIcon className="hover:bg-accent rounded-md">
-          <div className="flex items-center gap-1 py-2">
-            <CheckboxIcon variant={value ? "minus-line" : "plus-line"} />
-            <div>{title}</div>
-          </div>
-        </AccordionTrigger>
-
-        <AccordionContent className="ml-5 flex flex-col">
-          {children}
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}
diff --git a/packages/keychain/src/components/session/ContractCard.tsx b/packages/keychain/src/components/session/ContractCard.tsx
index be698621e..fd8101a08 100644
--- a/packages/keychain/src/components/session/ContractCard.tsx
+++ b/packages/keychain/src/components/session/ContractCard.tsx
@@ -9,15 +9,7 @@ import {
   AccordionTrigger,
 } from "@cartridge/ui-next";
 import { formatAddress } from "@cartridge/utils";
-import {
-  Divider,
-  HStack,
-  Link,
-  Spacer,
-  Stack,
-  Text,
-  VStack,
-} from "@chakra-ui/react";
+import { Divider, HStack, Spacer, Stack, Text, VStack } from "@chakra-ui/react";
 import { useExplorer } from "@starknet-react/core";
 import { constants } from "starknet";
 import { Method } from "@cartridge/presets";
@@ -42,19 +34,10 @@ export function ContractCard({
   return (
     <Card>
       <CardHeader icon={icon}>
-        <HStack py={4}>
-          <Text
-            color="text.primary"
-            fontSize="xs"
-            fontWeight="bold"
-            textTransform="uppercase"
-          >
-            {title}
-          </Text>
-          <Spacer />
-          <Link
-            color="text.secondary"
-            fontSize="xs"
+        <div className="flex items-center justify-between">
+          <div className="text-xs font-bold uppercase">{title}</div>
+          <a
+            className="text-xs text-muted-foreground cursor-pointer hover:underline"
             href={
               chainId === constants.StarknetChainId.SN_MAIN ||
               chainId === constants.StarknetChainId.SN_SEPOLIA
@@ -62,21 +45,21 @@ export function ContractCard({
                 : `#`
             }
             target="_blank"
+            rel="noreferrer"
           >
             {formatAddress(address, { first: 5, last: 5 })}
-          </Link>
-        </HStack>
+          </a>
+        </div>
       </CardHeader>
+
       <CardContent>
         <Accordion type="multiple" defaultValue={["methods"]}>
-          <AccordionItem value="methods">
-            <AccordionTrigger>
-              <Text color="text.secondary" fontSize="xs">
-                Approve{" "}
-                <Text as="span" color="text.secondaryAccent" fontWeight="bold">
-                  {methods.length} {methods.length > 1 ? "methods" : "method"}
-                </Text>
-              </Text>
+          <AccordionItem value="methods" className="flex flex-col gap-3">
+            <AccordionTrigger className="text-xs text-muted-foreground">
+              Approve{" "}
+              <span className="text-accent-foreground font-bold">
+                {methods.length} {methods.length > 1 ? "methods" : "method"}
+              </span>
             </AccordionTrigger>
             <AccordionContent>
               <Stack
@@ -84,7 +67,6 @@ export function ContractCard({
                 spacing={0}
                 borderColor="darkGray.800"
                 borderRadius="md"
-                mt="14px"
                 divider={<Divider borderColor="solid.bg" />}
               >
                 {methods.map((method) => (
diff --git a/packages/keychain/src/components/session/MessageCard.tsx b/packages/keychain/src/components/session/MessageCard.tsx
index cab41f31f..67c19cd99 100644
--- a/packages/keychain/src/components/session/MessageCard.tsx
+++ b/packages/keychain/src/components/session/MessageCard.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { PropsWithChildren, useState } from "react";
 import {
   Card,
   CardContent,
@@ -10,67 +10,17 @@ import {
   CardIcon,
   PencilIcon,
   AccordionTrigger,
+  CheckboxIcon,
 } from "@cartridge/ui-next";
 import { ArrowTurnDownIcon, Badge } from "@cartridge/ui-next";
 import { StarknetEnumType, StarknetMerkleType } from "@starknet-io/types-js";
 import { SignMessagePolicy } from "@cartridge/presets";
-import { Text } from "@chakra-ui/react";
-
-import { CollapsibleRow } from "./CollapsibleRow";
-
-interface MessageContentProps {
-  message: SignMessagePolicy;
-}
-
-function MessageContent({ message: m }: MessageContentProps) {
-  return (
-    <CardContent className="text-muted-foreground flex flex-col">
-      {/* Domain section */}
-      {Object.values(m.domain).filter((f) => typeof f !== "undefined").length >
-        0 && (
-        <CollapsibleRow key="domain" title="domain">
-          {m.domain.name && (
-            <ValueRow values={[{ name: "name", value: m.domain.name }]} />
-          )}
-          {/* ... other domain fields ... */}
-        </CollapsibleRow>
-      )}
-
-      <ValueRow values={[{ name: "primaryType", value: m.primaryType }]} />
-
-      <CollapsibleRow title="types">
-        {Object.entries(m.types).map(([name, types]) => (
-          <CollapsibleRow key={name} title={name}>
-            {types.map((t) => (
-              <ValueRow
-                key={t.name}
-                values={[
-                  { name: "name", value: t.name },
-                  { name: "type", value: t.type },
-                  ...(["enum", "merkletree"].includes(t.name)
-                    ? [
-                        {
-                          name: "contains",
-                          value: (t as StarknetEnumType | StarknetMerkleType)
-                            .contains,
-                        },
-                      ]
-                    : []),
-                ]}
-              />
-            ))}
-          </CollapsibleRow>
-        ))}
-      </CollapsibleRow>
-    </CardContent>
-  );
-}
 
 interface MessageCardProps {
-  message: SignMessagePolicy;
+  messages: SignMessagePolicy[];
 }
 
-export function MessageCard({ message }: MessageCardProps) {
+export function MessageCard({ messages }: MessageCardProps) {
   return (
     <Card>
       <CardHeader
@@ -83,33 +33,118 @@ export function MessageCard({ message }: MessageCardProps) {
         <CardTitle className="text-foreground">Sign Message</CardTitle>
       </CardHeader>
 
-      <Accordion type="single" defaultValue="message" collapsible>
-        <AccordionItem value="message">
-          <CardContent>
-            <AccordionTrigger>
-              <Text color="text.secondary" fontSize="xs">
-                The application will be able to sign the following message on
-                your behalf
-              </Text>
-            </AccordionTrigger>
-          </CardContent>
-
-          <AccordionContent>
-            <MessageContent message={message} />
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
+      <CardContent>
+        <MessageContent messages={messages} />
+      </CardContent>
     </Card>
   );
 }
 
+interface MessageContentProps {
+  messages: SignMessagePolicy[];
+}
+
+function MessageContent({ messages }: MessageContentProps) {
+  return (
+    <Accordion type="single" defaultValue="message" collapsible>
+      <AccordionItem value="message" className="flex flex-col gap-3">
+        <AccordionTrigger
+          className="text-xs text-muted-foreground"
+          color="text.secondary"
+        >
+          Approve{" "}
+          <span className="text-accent-foreground font-bold">
+            {messages.length} {messages.length > 1 ? "message" : "messages"}
+          </span>
+        </AccordionTrigger>
+
+        <AccordionContent className="text-xs">
+          {messages.map((m) => (
+            <>
+              {/* Domain section */}
+              {Object.values(m.domain).filter((f) => typeof f !== "undefined")
+                .length > 0 && (
+                <CollapsibleRow key="domain" title="domain">
+                  {m.domain.name && (
+                    <ValueRow
+                      values={[{ name: "name", value: m.domain.name }]}
+                    />
+                  )}
+                  {/* ... other domain fields ... */}
+                </CollapsibleRow>
+              )}
+
+              <ValueRow
+                values={[{ name: "primaryType", value: m.primaryType }]}
+              />
+
+              <CollapsibleRow title="types">
+                {Object.entries(m.types).map(([name, types]) => (
+                  <CollapsibleRow key={name} title={name}>
+                    {types.map((t) => (
+                      <ValueRow
+                        key={t.name}
+                        values={[
+                          { name: "name", value: t.name },
+                          { name: "type", value: t.type },
+                          ...(["enum", "merkletree"].includes(t.name)
+                            ? [
+                                {
+                                  name: "contains",
+                                  value: (
+                                    t as StarknetEnumType | StarknetMerkleType
+                                  ).contains,
+                                },
+                              ]
+                            : []),
+                        ]}
+                      />
+                    ))}
+                  </CollapsibleRow>
+                ))}
+              </CollapsibleRow>
+            </>
+          ))}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+interface CollapsibleRowProps extends PropsWithChildren {
+  title: string;
+}
+
+export function CollapsibleRow({ title, children }: CollapsibleRowProps) {
+  const [value, setValue] = useState("");
+
+  return (
+    <Accordion type="single" collapsible value={value} onValueChange={setValue}>
+      <AccordionItem value={title} className="flex flex-col">
+        <AccordionTrigger hideIcon className="hover:bg-accent rounded-md">
+          <div className="flex items-center gap-1 py-1">
+            <CheckboxIcon
+              variant={value ? "minus-line" : "plus-line"}
+              size="sm"
+            />
+            <div>{title}</div>
+          </div>
+        </AccordionTrigger>
+
+        <AccordionContent className="ml-5 flex flex-col">
+          {children}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
 interface ValueRowProps {
   values: { name: string; value: string | number }[];
 }
 
 export function ValueRow({ values }: ValueRowProps) {
   return (
-    <div className="flex items-center py-2">
+    <div className="flex items-center py-1">
       <ArrowTurnDownIcon />
       <div className="flex items-center gap-2">
         {values.map((f) => (
diff --git a/packages/keychain/src/components/session/UnverifiedSessionSummary.tsx b/packages/keychain/src/components/session/UnverifiedSessionSummary.tsx
index f9c86e0dd..ec35ed500 100644
--- a/packages/keychain/src/components/session/UnverifiedSessionSummary.tsx
+++ b/packages/keychain/src/components/session/UnverifiedSessionSummary.tsx
@@ -28,9 +28,9 @@ export function UnverifiedSessionSummary({
         );
       })}
 
-      {policies.messages?.map((message, index) => (
-        <MessageCard key={index} message={message} />
-      ))}
+      {policies.messages?.length && (
+        <MessageCard messages={policies.messages} />
+      )}
     </div>
   );
 }

From 4fadc5be50863e83fd3fae7fec8446a66b91fb1b Mon Sep 17 00:00:00 2001
From: JunichiSugiura <jun.sugiura.jp@gmail.com>
Date: Fri, 20 Dec 2024 10:27:37 +0900
Subject: [PATCH 2/5] Get rid of chakra from ContractCard

---
 .../src/components/session/ContractCard.tsx   | 42 +++++++------------
 1 file changed, 14 insertions(+), 28 deletions(-)

diff --git a/packages/keychain/src/components/session/ContractCard.tsx b/packages/keychain/src/components/session/ContractCard.tsx
index fd8101a08..397591b97 100644
--- a/packages/keychain/src/components/session/ContractCard.tsx
+++ b/packages/keychain/src/components/session/ContractCard.tsx
@@ -9,7 +9,6 @@ import {
   AccordionTrigger,
 } from "@cartridge/ui-next";
 import { formatAddress } from "@cartridge/utils";
-import { Divider, HStack, Spacer, Stack, Text, VStack } from "@chakra-ui/react";
 import { useExplorer } from "@starknet-react/core";
 import { constants } from "starknet";
 import { Method } from "@cartridge/presets";
@@ -54,7 +53,7 @@ export function ContractCard({
 
       <CardContent>
         <Accordion type="multiple" defaultValue={["methods"]}>
-          <AccordionItem value="methods" className="flex flex-col gap-3">
+          <AccordionItem value="methods" className="flex flex-col gap-4">
             <AccordionTrigger className="text-xs text-muted-foreground">
               Approve{" "}
               <span className="text-accent-foreground font-bold">
@@ -62,41 +61,28 @@ export function ContractCard({
               </span>
             </AccordionTrigger>
             <AccordionContent>
-              <Stack
-                border="1px solid"
-                spacing={0}
-                borderColor="darkGray.800"
-                borderRadius="md"
-                divider={<Divider borderColor="solid.bg" />}
-              >
+              <div className="bg-background border border-background rounded-md flex flex-col gap-px">
                 {methods.map((method) => (
-                  <VStack
+                  <div
                     key={method.entrypoint}
-                    p={3}
-                    gap={3}
-                    align="flex-start"
+                    className="flex flex-col bg-secondary gap-4 p-3 first:rounded-t-md last:rounded-b-md text-xs"
                   >
-                    <HStack w="full">
-                      <Text
-                        fontSize="xs"
-                        color="text.primary"
-                        fontWeight="bold"
-                      >
+                    <div className="flex items-center justify-between">
+                      <div className="font-bold">
                         {method.name ?? humanizeString(method.entrypoint)}
-                      </Text>
-                      <Spacer />
-                      <Text fontSize="xs" color="text.secondaryAccent">
+                      </div>
+                      <div className="text-accent-foreground">
                         {method.entrypoint}
-                      </Text>
-                    </HStack>
+                      </div>
+                    </div>
                     {method.description && (
-                      <Text fontSize="xs" color="text.secondary">
+                      <div className="text-muted-foreground">
                         {method.description}
-                      </Text>
+                      </div>
                     )}
-                  </VStack>
+                  </div>
                 ))}
-              </Stack>
+              </div>
             </AccordionContent>
           </AccordionItem>
         </Accordion>

From 173339a8d2aa5f02f795bff033c269a2538d0483 Mon Sep 17 00:00:00 2001
From: JunichiSugiura <jun.sugiura.jp@gmail.com>
Date: Fri, 20 Dec 2024 10:38:49 +0900
Subject: [PATCH 3/5] Add code icon to contract card

---
 .../src/components/session/ContractCard.tsx   | 53 +++++++++++--------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/packages/keychain/src/components/session/ContractCard.tsx b/packages/keychain/src/components/session/ContractCard.tsx
index 397591b97..3ba0273be 100644
--- a/packages/keychain/src/components/session/ContractCard.tsx
+++ b/packages/keychain/src/components/session/ContractCard.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import {
   Card,
   CardContent,
@@ -7,6 +6,8 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
+  CardIcon,
+  CodeIcon,
 } from "@cartridge/ui-next";
 import { formatAddress } from "@cartridge/utils";
 import { useExplorer } from "@starknet-react/core";
@@ -32,7 +33,15 @@ export function ContractCard({
 
   return (
     <Card>
-      <CardHeader icon={icon}>
+      <CardHeader
+        icon={
+          icon ?? (
+            <CardIcon>
+              <CodeIcon variant="solid" />
+            </CardIcon>
+          )
+        }
+      >
         <div className="flex items-center justify-between">
           <div className="text-xs font-bold uppercase">{title}</div>
           <a
@@ -60,29 +69,27 @@ export function ContractCard({
                 {methods.length} {methods.length > 1 ? "methods" : "method"}
               </span>
             </AccordionTrigger>
-            <AccordionContent>
-              <div className="bg-background border border-background rounded-md flex flex-col gap-px">
-                {methods.map((method) => (
-                  <div
-                    key={method.entrypoint}
-                    className="flex flex-col bg-secondary gap-4 p-3 first:rounded-t-md last:rounded-b-md text-xs"
-                  >
-                    <div className="flex items-center justify-between">
-                      <div className="font-bold">
-                        {method.name ?? humanizeString(method.entrypoint)}
-                      </div>
-                      <div className="text-accent-foreground">
-                        {method.entrypoint}
-                      </div>
+            <AccordionContent className="bg-background border border-background rounded-md gap-px">
+              {methods.map((method) => (
+                <div
+                  key={method.entrypoint}
+                  className="flex flex-col bg-secondary gap-4 p-3 first:rounded-t-md last:rounded-b-md text-xs"
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="font-bold">
+                      {method.name ?? humanizeString(method.entrypoint)}
+                    </div>
+                    <div className="text-accent-foreground">
+                      {method.entrypoint}
                     </div>
-                    {method.description && (
-                      <div className="text-muted-foreground">
-                        {method.description}
-                      </div>
-                    )}
                   </div>
-                ))}
-              </div>
+                  {method.description && (
+                    <div className="text-muted-foreground">
+                      {method.description}
+                    </div>
+                  )}
+                </div>
+              ))}
             </AccordionContent>
           </AccordionItem>
         </Accordion>

From 2bd31de75240c12e1b8071cac3cdaf653e0eff4b Mon Sep 17 00:00:00 2001
From: JunichiSugiura <jun.sugiura.jp@gmail.com>
Date: Fri, 20 Dec 2024 10:39:40 +0900
Subject: [PATCH 4/5] Style message card with multi messages

---
 .../src/components/session/MessageCard.tsx    | 93 ++++++++++---------
 .../session/UnverifiedSessionSummary.tsx      |  1 -
 2 files changed, 48 insertions(+), 46 deletions(-)

diff --git a/packages/keychain/src/components/session/MessageCard.tsx b/packages/keychain/src/components/session/MessageCard.tsx
index 67c19cd99..6068aa963 100644
--- a/packages/keychain/src/components/session/MessageCard.tsx
+++ b/packages/keychain/src/components/session/MessageCard.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useState } from "react";
+import { PropsWithChildren, useState } from "react";
 import {
   Card,
   CardContent,
@@ -54,56 +54,59 @@ function MessageContent({ messages }: MessageContentProps) {
         >
           Approve{" "}
           <span className="text-accent-foreground font-bold">
-            {messages.length} {messages.length > 1 ? "message" : "messages"}
+            {messages.length} {messages.length > 1 ? "messages" : "message"}
           </span>
         </AccordionTrigger>
 
-        <AccordionContent className="text-xs">
-          {messages.map((m) => (
-            <>
-              {/* Domain section */}
-              {Object.values(m.domain).filter((f) => typeof f !== "undefined")
-                .length > 0 && (
-                <CollapsibleRow key="domain" title="domain">
-                  {m.domain.name && (
-                    <ValueRow
-                      values={[{ name: "name", value: m.domain.name }]}
-                    />
-                  )}
-                  {/* ... other domain fields ... */}
-                </CollapsibleRow>
-              )}
-
-              <ValueRow
-                values={[{ name: "primaryType", value: m.primaryType }]}
-              />
-
-              <CollapsibleRow title="types">
-                {Object.entries(m.types).map(([name, types]) => (
-                  <CollapsibleRow key={name} title={name}>
-                    {types.map((t) => (
+        <AccordionContent className="text-xs flex flex-col bg-background border border-background rounded-md gap-px">
+          {messages.map((m, i) => (
+            <div className="flex flex-col bg-secondary gap-4 p-3 first:rounded-t-md last:rounded-b-md">
+              <div className="font-bold">{m.name ?? `Message ${i + 1}`}</div>
+              <div className="flex flex-col bg-secondary gap-1 ">
+                {/* Domain section */}
+                {Object.values(m.domain).filter((f) => typeof f !== "undefined")
+                  .length > 0 && (
+                  <CollapsibleRow key="domain" title="domain">
+                    {m.domain.name && (
                       <ValueRow
-                        key={t.name}
-                        values={[
-                          { name: "name", value: t.name },
-                          { name: "type", value: t.type },
-                          ...(["enum", "merkletree"].includes(t.name)
-                            ? [
-                                {
-                                  name: "contains",
-                                  value: (
-                                    t as StarknetEnumType | StarknetMerkleType
-                                  ).contains,
-                                },
-                              ]
-                            : []),
-                        ]}
+                        values={[{ name: "name", value: m.domain.name }]}
                       />
-                    ))}
+                    )}
+                    {/* ... other domain fields ... */}
                   </CollapsibleRow>
-                ))}
-              </CollapsibleRow>
-            </>
+                )}
+
+                <ValueRow
+                  values={[{ name: "primaryType", value: m.primaryType }]}
+                />
+
+                <CollapsibleRow title="types">
+                  {Object.entries(m.types).map(([name, types]) => (
+                    <CollapsibleRow key={name} title={name}>
+                      {types.map((t) => (
+                        <ValueRow
+                          key={t.name}
+                          values={[
+                            { name: "name", value: t.name },
+                            { name: "type", value: t.type },
+                            ...(["enum", "merkletree"].includes(t.name)
+                              ? [
+                                  {
+                                    name: "contains",
+                                    value: (
+                                      t as StarknetEnumType | StarknetMerkleType
+                                    ).contains,
+                                  },
+                                ]
+                              : []),
+                          ]}
+                        />
+                      ))}
+                    </CollapsibleRow>
+                  ))}
+                </CollapsibleRow>
+              </div>
+            </div>
           ))}
         </AccordionContent>
       </AccordionItem>
diff --git a/packages/keychain/src/components/session/UnverifiedSessionSummary.tsx b/packages/keychain/src/components/session/UnverifiedSessionSummary.tsx
index ec35ed500..f65f1695d 100644
--- a/packages/keychain/src/components/session/UnverifiedSessionSummary.tsx
+++ b/packages/keychain/src/components/session/UnverifiedSessionSummary.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { toArray } from "@cartridge/controller";
 import { ParsedSessionPolicies } from "@/hooks/session";
 

From 3c3d266bbdd09f339e8fcf8ba30177f4d59f2dc7 Mon Sep 17 00:00:00 2001
From: JunichiSugiura <jun.sugiura.jp@gmail.com>
Date: Fri, 20 Dec 2024 17:53:36 +0900
Subject: [PATCH 5/5] Add key to mapped div

---
 packages/keychain/src/components/session/MessageCard.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/keychain/src/components/session/MessageCard.tsx b/packages/keychain/src/components/session/MessageCard.tsx
index 6068aa963..0ce117c65 100644
--- a/packages/keychain/src/components/session/MessageCard.tsx
+++ b/packages/keychain/src/components/session/MessageCard.tsx
@@ -60,7 +60,10 @@ function MessageContent({ messages }: MessageContentProps) {
 
         <AccordionContent className="text-xs flex flex-col bg-background border border-background rounded-md gap-px">
           {messages.map((m, i) => (
-            <div className="flex flex-col bg-secondary gap-4 p-3 first:rounded-t-md last:rounded-b-md">
+            <div
+              key={m.domain.name ?? i}
+              className="flex flex-col bg-secondary gap-4 p-3 first:rounded-t-md last:rounded-b-md"
+            >
               <div className="font-bold">{m.name ?? `Message ${i + 1}`}</div>
               <div className="flex flex-col bg-secondary gap-1 ">
                 {/* Domain section */}