2 files changed, 27 insertions, 27 deletions
diff --git a/src/client/views/nodes/ChatBox/MessageComponent.scss b/src/client/views/nodes/ChatBox/MessageComponent.scss
new file mode 100644
index 000000000..6fcc0e5e7
--- /dev/null
+++ b/src/client/views/nodes/ChatBox/MessageComponent.scss
@@ -0,0 +1,10 @@
+MessageComponent-citation {
+    color: lightblue;
+    vertical-align: super;
+    font-size: smaller;
+}
+MessageComponent-file_path {
+    color: lightblue;
+    vertical-align: baseline;
+    font-size: inherit;
+}
diff --git a/src/client/views/nodes/ChatBox/MessageComponent.tsx b/src/client/views/nodes/ChatBox/MessageComponent.tsx
index ccdf1ae24..f27a18891 100644
--- a/src/client/views/nodes/ChatBox/MessageComponent.tsx
+++ b/src/client/views/nodes/ChatBox/MessageComponent.tsx
@@ -5,6 +5,7 @@ import { observer } from 'mobx-react';
 import React from 'react';
 import * as Tb from 'react-icons/tb';
 import ReactMarkdown from 'react-markdown';
+import './MessageComponent.scss';
 import { AssistantMessage } from './types';
 
 const TbCircles = [
@@ -30,39 +31,28 @@ interface MessageComponentProps {
     isCurrent?: boolean;
 }
 
-function LinkRendererWrapper(goToLinkedDoc: any, showModal: any, setCurrentFile: any) {
+const LinkRendererWrapper = (goToLinkedDoc: (url: string) => void, showModal: () => void, setCurrentFile: (file: { url: string }) => void) =>
     function LinkRenderer({ href, children }: { href?: string; children?: React.ReactNode }) {
-        const [, url, linkType] = href?.match(/([a-zA-Z0-9_.!-]+)~~~(citation|file_path)/) ?? [undefined, href, null];
-        const Children = linkType === 'citation' ? null : TbCircles[Number(children)];
-
-        return (
+        const Children = TbCircles[Number(children)]; // pascal case variable needed to convert IconType to JSX.Element tag
+        const [, aurl, linkType] = href?.match(/([a-zA-Z0-9_.!-]+)~~~(citation|file_path)/) ?? [undefined, href, null];
+        const renderType = (content: JSX.Element | null, click: (url: string) => void):JSX.Element => (
             // eslint-disable-next-line jsx-a11y/anchor-is-valid
-            <a
+            <a className={`MessageComponent-${linkType}`}
                 href="#"
                 onClick={e => {
                     e.preventDefault();
-                    switch (linkType) {
-                        case 'citation':
-                            goToLinkedDoc(url);
-                            break;
-                        case 'file_path':
-                            showModal();
-                            setCurrentFile({ url });
-                            break;
-                        default:
-                    }
-                }}
-                style={{
-                    color: 'lightblue',
-                    verticalAlign: linkType === 'citation' ? 'super' : 'baseline',
-                    fontSize: linkType === 'citation' ? 'smaller' : 'inherit',
+                    aurl && click(aurl);
                 }}>
-                {Children ? <Children /> : null}
-            </a>
-        );
-    }
-    return LinkRenderer;
-}
+                {content}
+            </a> 
+        ); // prettier-ignore
+        switch (linkType) {
+            case 'citation':   return renderType(<Children />, (url: string) => goToLinkedDoc(url));
+            case 'file_path':  return renderType(null, (url: string) => { showModal(); setCurrentFile({ url }); });
+            default:           return null;
+        } // prettier-ignore
+    };
+
 const MessageComponent: React.FC<MessageComponentProps> = function ({ message, toggleToolLogs, expandedLogIndex, goToLinkedDoc, index, showModal, setCurrentFile, isCurrent = false }) {
     // const messageClass = `${message.role} ${isCurrent ? 'current-message' : ''}`;
     return (