Update citation view

microsoft · Nov 1, 2023 · 9e86e76 · 9e86e76
1 parent a0a256a
commit 9e86e76
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git 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
@@ -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>
         );
       })}