From 9e86e76a0cb1fda5876406171ef8b8b2597025ed Mon Sep 17 00:00:00 2001
From: thivy <thivyakanth@gmail.com>
Date: Thu, 2 Nov 2023 10:58:05 +1100
Subject: [PATCH] Update citation view

---
 .../chat/chat-ui/markdown/citation-slider.tsx |  4 +--
 .../chat/chat-ui/markdown/citation.tsx        | 29 +++++++++++++++++--
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/features/chat/chat-ui/markdown/citation-slider.tsx b/src/features/chat/chat-ui/markdown/citation-slider.tsx
index 0dab38dfa..9cd906c40 100644
--- a/src/features/chat/chat-ui/markdown/citation-slider.tsx
+++ b/src/features/chat/chat-ui/markdown/citation-slider.tsx
@@ -25,12 +25,12 @@ export const CitationSlider: FC<SliderProps> = (props) => {
         <SheetTrigger>
           <input type="hidden" name="id" value={props.id} />
           <Button
-            variant="default"
+            variant="outline"
             size="sm"
             formAction={formAction}
             value={22}
           >
-            {props.index}. {props.name}
+            {props.index}
           </Button>
         </SheetTrigger>
         <SheetContent>
diff --git a/src/features/chat/chat-ui/markdown/citation.tsx b/src/features/chat/chat-ui/markdown/citation.tsx
index 3913626d3..69e884ca2 100644
--- a/src/features/chat/chat-ui/markdown/citation.tsx
+++ b/src/features/chat/chat-ui/markdown/citation.tsx
@@ -27,12 +27,35 @@ export const citationConfig: Config = {
 };
 
 export const Citation: FC<Props> = (props: Props) => {
+  // group citations by name
+  const citations = props.items.reduce((acc, citation) => {
+    const { name } = citation;
+    if (!acc[name]) {
+      acc[name] = [];
+    }
+    acc[name].push(citation);
+    return acc;
+  }, {} as Record<string, Citation[]>);
+
   return (
     <div className="interactive-citation p-4 border mt-4 flex flex-col rounded-md gap-2">
-      {props.items.map((item, index: number) => {
+      {Object.entries(citations).map(([name, items], index: number) => {
         return (
-          <div key={index}>
-            <CitationSlider index={index + 1} name={item.name} id={item.id} />
+          <div key={index} className="flex flex-col gap-2">
+            <div className="font-semibold text-sm">{name}</div>
+            <div className="flex gap-2">
+              {items.map((item, index: number) => {
+                return (
+                  <div key={index}>
+                    <CitationSlider
+                      index={index + 1}
+                      name={item.name}
+                      id={item.id}
+                    />
+                  </div>
+                );
+              })}
+            </div>
           </div>
         );
       })}