solved citation onclick issue in ReactMarkdown with custom component.

JSv4 · Jun 10, 2024 · bdfe0eb · bdfe0eb
1 parent 8f063dd
commit bdfe0eb
Showing 1 changed file with 18 additions and 1 deletion.
diff --git a/frontend/src/components/queries/QueryResultsViewer.tsx b/frontend/src/components/queries/QueryResultsViewer.tsx
@@ -183,7 +183,24 @@ const QueryResultsViewer: React.FC<QueryResultsViewerProps> = ({
         </Card>
         <Segment>
           <Header as="h3">Response</Header>
-          <ReactMarkdown>{query_obj.response || ""}</ReactMarkdown>
+          <ReactMarkdown
+            components={{
+              a: ({ href, children }) => (
+                <a
+                  href={href}
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    console.log(event, href);
+                  }}
+                >
+                  {children}
+                </a>
+              ),
+            }}
+          >
+            {query_obj.response || ""}
+          </ReactMarkdown>
         </Segment>
       </Grid.Column>
     </Grid>