From 3163ba1c1711000aac58af9c9ede1739334ea995 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 3 Jun 2024 22:22:27 -0400
Subject: updated pdfViewer worker.  fixed PDFbox action to set pdfcache.  
 cleaned up messagecomponent

---
 .../views/nodes/ChatBox/MessageComponent.tsx       | 110 ++++++++-------------
 1 file changed, 43 insertions(+), 67 deletions(-)

(limited to 'src/client/views/nodes/ChatBox/MessageComponent.tsx')

diff --git a/src/client/views/nodes/ChatBox/MessageComponent.tsx b/src/client/views/nodes/ChatBox/MessageComponent.tsx
index fced0b4d5..ccdf1ae24 100644
--- a/src/client/views/nodes/ChatBox/MessageComponent.tsx
+++ b/src/client/views/nodes/ChatBox/MessageComponent.tsx
@@ -1,11 +1,24 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
 /* eslint-disable react/require-default-props */
-import React from 'react';
-import { observer } from 'mobx-react';
 import { MathJax, MathJaxContext } from 'better-react-mathjax';
+import { observer } from 'mobx-react';
+import React from 'react';
+import * as Tb from 'react-icons/tb';
 import ReactMarkdown from 'react-markdown';
-import { TbCircle0Filled, TbCircle1Filled, TbCircle2Filled, TbCircle3Filled, TbCircle4Filled, TbCircle5Filled, TbCircle6Filled, TbCircle7Filled, TbCircle8Filled, TbCircle9Filled } from 'react-icons/tb';
 import { AssistantMessage } from './types';
 
+const TbCircles = [
+    Tb.TbCircleNumber0Filled,
+    Tb.TbCircleNumber1Filled,
+    Tb.TbCircleNumber2Filled,
+    Tb.TbCircleNumber3Filled,
+    Tb.TbCircleNumber4Filled,
+    Tb.TbCircleNumber5Filled,
+    Tb.TbCircleNumber6Filled,
+    Tb.TbCircleNumber7Filled,
+    Tb.TbCircleNumber8Filled,
+    Tb.TbCircleNumber9Filled,
+];
 interface MessageComponentProps {
     message: AssistantMessage;
     toggleToolLogs: (index: number) => void;
@@ -17,89 +30,52 @@ interface MessageComponentProps {
     isCurrent?: boolean;
 }
 
-const MessageComponent: React.FC<MessageComponentProps> = function ({ message, toggleToolLogs, expandedLogIndex, goToLinkedDoc, index, showModal, setCurrentFile, isCurrent = false }) {
-    // const messageClass = `${message.role} ${isCurrent ? 'current-message' : ''}`;
-
-    const LinkRenderer = ({ href, children }: { href: string; children: React.ReactNode }) => {
-        // console.log(href + " " + children)
-        const regex = /([a-zA-Z0-9_.!-]+)~~~(citation|file_path)/;
-        const matches = href.match(regex);
-        // console.log(href)
-        // console.log(matches)
-        const url = matches ? matches[1] : href;
-        const linkType = matches ? matches[2] : null;
-        if (linkType === 'citation') {
-            switch (children) {
-                case '0':
-                    children = <TbCircle0Filled />;
-                    break;
-                case '1':
-                    children = <TbCircle1Filled />;
-                    break;
-                case '2':
-                    children = <TbCircle2Filled />;
-                    break;
-                case '3':
-                    children = <TbCircle3Filled />;
-                    break;
-                case '4':
-                    children = <TbCircle4Filled />;
-                    break;
-                case '5':
-                    children = <TbCircle5Filled />;
-                    break;
-                case '6':
-                    children = <TbCircle6Filled />;
-                    break;
-                case '7':
-                    children = <TbCircle7Filled />;
-                    break;
-                case '8':
-                    children = <TbCircle8Filled />;
-                    break;
-                case '9':
-                    children = <TbCircle9Filled />;
-                    break;
-                default:
-                    break;
-            }
-        }
-        // console.log(linkType)
-        const style = {
-            color: 'lightblue',
-            verticalAlign: linkType === 'citation' ? 'super' : 'baseline',
-            fontSize: linkType === 'citation' ? 'smaller' : 'inherit',
-        };
+function LinkRendererWrapper(goToLinkedDoc: any, showModal: any, setCurrentFile: any) {
+    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 (
+            // eslint-disable-next-line jsx-a11y/anchor-is-valid
             <a
                 href="#"
                 onClick={e => {
                     e.preventDefault();
-                    if (linkType === 'citation') {
-                        goToLinkedDoc(url);
-                    } else if (linkType === 'file_path') {
-                        showModal();
-                        setCurrentFile({ url });
+                    switch (linkType) {
+                        case 'citation':
+                            goToLinkedDoc(url);
+                            break;
+                        case 'file_path':
+                            showModal();
+                            setCurrentFile({ url });
+                            break;
+                        default:
                     }
                 }}
-                style={style}>
-                {children}
+                style={{
+                    color: 'lightblue',
+                    verticalAlign: linkType === 'citation' ? 'super' : 'baseline',
+                    fontSize: linkType === 'citation' ? 'smaller' : 'inherit',
+                }}>
+                {Children ? <Children /> : null}
             </a>
         );
-    };
-
+    }
+    return LinkRenderer;
+}
+const MessageComponent: React.FC<MessageComponentProps> = function ({ message, toggleToolLogs, expandedLogIndex, goToLinkedDoc, index, showModal, setCurrentFile, isCurrent = false }) {
+    // const messageClass = `${message.role} ${isCurrent ? 'current-message' : ''}`;
     return (
         <div className={`message ${message.role}`}>
             <MathJaxContext>
                 <MathJax dynamic hideUntilTypeset="every">
-                    <ReactMarkdown components={{ a: LinkRenderer }}>{message.text ? message.text : ''}</ReactMarkdown>
+                    <ReactMarkdown components={{ a: LinkRendererWrapper(goToLinkedDoc, showModal, setCurrentFile) }}>{message.text}</ReactMarkdown>
                 </MathJax>
             </MathJaxContext>
             {message.image && <img src={message.image} alt="" />}
             <div className="message-footer">
                 {message.tool_logs && (
-                    <button className="toggle-logs-button" onClick={() => toggleToolLogs(index)}>
+                    <button type="button" className="toggle-logs-button" onClick={() => toggleToolLogs(index)}>
                         {expandedLogIndex === index ? 'Hide Code Interpreter Logs' : 'Show Code Interpreter Logs'}
                     </button>
                 )}
-- 
cgit v1.2.3-70-g09d2


From 025b6740a5da616349a9d959d4f3fcd4fc5d420b Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 4 Jun 2024 08:51:52 -0400
Subject: more messageComponent cleanup

---
 .../views/nodes/ChatBox/MessageComponent.scss      | 10 +++++
 .../views/nodes/ChatBox/MessageComponent.tsx       | 44 +++++++++-------------
 2 files changed, 27 insertions(+), 27 deletions(-)
 create mode 100644 src/client/views/nodes/ChatBox/MessageComponent.scss

(limited to 'src/client/views/nodes/ChatBox/MessageComponent.tsx')

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 (
-- 
cgit v1.2.3-70-g09d2

