From e690e550d421abbbfd16bf56f2a1107b3e0f1f92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daphn=C3=A9=20Popin?= <PopDaph@users.noreply.github.com>
Date: Tue, 3 Oct 2023 21:02:13 +0200
Subject: [PATCH] Use Button.List on Agent suggestions (#1934)

---
 .../conversation/AgentSuggestion.tsx          | 60 ++++++++++---------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/front/components/assistant/conversation/AgentSuggestion.tsx b/front/components/assistant/conversation/AgentSuggestion.tsx
index 807a037c2282..68288eaef87f 100644
--- a/front/components/assistant/conversation/AgentSuggestion.tsx
+++ b/front/components/assistant/conversation/AgentSuggestion.tsx
@@ -37,36 +37,38 @@ export function AgentSuggestion({
         Which Assistant would you like to talk with?
       </div>
       <div className="mt-3 flex flex-col gap-2 sm:flex-row">
-        {agents.slice(0, 3).map((agent) => (
-          <div key={`message-${userMessage.sId}-suggestion-${agent.sId}`}>
-            <Button
-              size="xs"
-              variant="avatar"
-              label={`@${agent.name}`}
-              onClick={() => selectSuggestionHandler(agent)}
-              avatar={agent.pictureUrl}
-            />
-          </div>
-        ))}
-        <AssistantPicker
-          owner={owner}
-          assistants={agents.slice(3)}
-          onItemClick={async (agent) => {
-            if (!loading) {
-              setLoading(true);
-              await selectSuggestionHandler(agent);
-              setLoading(false);
+        <Button.List isWrapping={true}>
+          {agents.slice(0, 3).map((agent) => (
+            <div key={`message-${userMessage.sId}-suggestion-${agent.sId}`}>
+              <Button
+                size="xs"
+                variant="avatar"
+                label={`@${agent.name}`}
+                onClick={() => selectSuggestionHandler(agent)}
+                avatar={agent.pictureUrl}
+              />
+            </div>
+          ))}
+          <AssistantPicker
+            owner={owner}
+            assistants={agents.slice(3)}
+            onItemClick={async (agent) => {
+              if (!loading) {
+                setLoading(true);
+                await selectSuggestionHandler(agent);
+                setLoading(false);
+              }
+            }}
+            pickerButton={
+              <Button
+                variant="tertiary"
+                size="xs"
+                icon={RobotIcon}
+                label="Select another"
+              />
             }
-          }}
-          pickerButton={
-            <Button
-              variant="tertiary"
-              size="xs"
-              icon={RobotIcon}
-              label="Select another"
-            />
-          }
-        />
+          />
+        </Button.List>
       </div>
     </div>
   );