@hef2024/llmasaservice-ui 0.20.0 → 0.20.2

package/src/AgentPanel.tsx

@@ -159,7 +159,9 @@ const AgentPanel: React.FC<AgentPanelProps & ExtraProps> = ({
   useEffect(() => {
     const fetchAgentData = async () => {
       try {
-        const fetchUrl = `https://api.llmasaservice.io/agents/${agent}`;
+        const fetchUrl = url.endsWith("dev")
+          ? `https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev/agents/${agent}`
+          : `https://api.llmasaservice.io/agents/${agent}`;
 
         const response = await fetch(fetchUrl, {
           method: "GET",

package/src/ChatPanel.tsx

@@ -2467,15 +2467,23 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   };
 
   const convertMarkdownToHTML = (markdown: string): string => {
-    const html = ReactDOMServer.renderToStaticMarkup(
+    const markdownContent = (
       <ReactMarkdown
-        className={markdownClass}
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[rehypeRaw]}
       >
         {markdown}
       </ReactMarkdown>
     );
+    const html = ReactDOMServer.renderToStaticMarkup(
+      markdownClass ? (
+        <div className={markdownClass}>
+          {markdownContent}
+        </div>
+      ) : (
+        markdownContent
+      )
+    );
     return html;
   };
 
@@ -2796,13 +2804,23 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
           {initialMessage && initialMessage !== "" ? (
             <div className="history-entry">
               <div className="response">
-                <ReactMarkdown
-                  className={markdownClass}
-                  remarkPlugins={[remarkGfm]}
-                  rehypePlugins={[rehypeRaw]}
-                >
-                  {initialMessage}
-                </ReactMarkdown>
+                {markdownClass ? (
+                  <div className={markdownClass}>
+                    <ReactMarkdown
+                      remarkPlugins={[remarkGfm]}
+                      rehypePlugins={[rehypeRaw]}
+                    >
+                      {initialMessage}
+                    </ReactMarkdown>
+                  </div>
+                ) : (
+                  <ReactMarkdown
+                    remarkPlugins={[remarkGfm]}
+                    rehypePlugins={[rehypeRaw]}
+                  >
+                    {initialMessage}
+                  </ReactMarkdown>
+                )}
               </div>
             </div>
           ) : null}
@@ -2877,9 +2895,8 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
                         // Get the processed content that includes action buttons from history
                         // During streaming, use the most recent history entry if it exists
                         if (lastKey && history[lastKey] && history[lastKey].content) {
-                          return (
+                          const content = (
                             <ReactMarkdown
-                              className={markdownClass}
                               remarkPlugins={[remarkGfm]}
                               rehypePlugins={[rehypeRaw]}
                               components={{ /*a: CustomLink,*/ code: CodeBlock }}
@@ -2887,22 +2904,34 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
                               {history[lastKey].content}
                             </ReactMarkdown>
                           );
+                          return markdownClass ? (
+                            <div className={markdownClass}>{content}</div>
+                          ) : (
+                            content
+                          );
                         }
                         
                         // Fallback to cleaned text if no processed history exists yet
                         const { cleanedText } = processThinkingTags(
                           response || ""
                         );
-                        return cleanedText && cleanedText.length > 0 ? (
-                          <ReactMarkdown
-                            className={markdownClass}
-                            remarkPlugins={[remarkGfm]}
-                            rehypePlugins={[rehypeRaw]}
-                            components={{ /*a: CustomLink,*/ code: CodeBlock }}
-                          >
-                            {cleanedText}
-                          </ReactMarkdown>
-                        ) : null;
+                        if (cleanedText && cleanedText.length > 0) {
+                          const content = (
+                            <ReactMarkdown
+                              remarkPlugins={[remarkGfm]}
+                              rehypePlugins={[rehypeRaw]}
+                              components={{ /*a: CustomLink,*/ code: CodeBlock }}
+                            >
+                              {cleanedText}
+                            </ReactMarkdown>
+                          );
+                          return markdownClass ? (
+                            <div className={markdownClass}>{content}</div>
+                          ) : (
+                            content
+                          );
+                        }
+                        return null;
                       })()}
                     </div>
                   ) : (
@@ -2913,14 +2942,25 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
                         renderThinkingBlocks()}
 
                       {/* Show the main content (cleaned of thinking tags) */}
-                      <ReactMarkdown
-                        className={markdownClass}
-                        remarkPlugins={[remarkGfm]}
-                        rehypePlugins={[rehypeRaw]}
-                        components={{ /*a: CustomLink,*/ code: CodeBlock }}
-                      >
-                        {processThinkingTags(historyEntry.content).cleanedText}
-                      </ReactMarkdown>
+                      {markdownClass ? (
+                        <div className={markdownClass}>
+                          <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            rehypePlugins={[rehypeRaw]}
+                            components={{ /*a: CustomLink,*/ code: CodeBlock }}
+                          >
+                            {processThinkingTags(historyEntry.content).cleanedText}
+                          </ReactMarkdown>
+                        </div>
+                      ) : (
+                        <ReactMarkdown
+                          remarkPlugins={[remarkGfm]}
+                          rehypePlugins={[rehypeRaw]}
+                          components={{ /*a: CustomLink,*/ code: CodeBlock }}
+                        >
+                          {processThinkingTags(historyEntry.content).cleanedText}
+                        </ReactMarkdown>
+                      )}
                     </div>
                   )}
 

package/src/components/ui/Button.tsx

@@ -59,3 +59,4 @@ export default Button;
 
 
 
+

package/src/components/ui/Dialog.tsx

@@ -155,3 +155,4 @@ export default Dialog;
 
 
 
+

package/src/components/ui/Input.tsx

@@ -35,3 +35,4 @@ export default Input;
 
 
 
+

package/src/components/ui/Select.tsx

@@ -158,3 +158,4 @@ export default Select;
 
 
 
+

package/src/components/ui/ToolInfoModal.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+interface ToolInfoModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  data: { calls: any[]; responses: any[] } | null;
+}
+
+const ToolInfoModal: React.FC<ToolInfoModalProps> = ({
+  isOpen,
+  onClose,
+  data,
+}) => {
+  if (!isOpen || !data) return null;
+
+  return (
+    <div className="ai-chat-modal-overlay" onClick={onClose}>
+      <div
+        className="ai-chat-modal-content ai-chat-tool-info-modal"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="ai-chat-modal-header">
+          <h3>Tool Information</h3>
+          <button 
+            className="ai-chat-modal-close"
+            onClick={onClose}
+            aria-label="Close"
+          >
+            ×
+          </button>
+        </div>
+        
+        <div className="ai-chat-modal-body ai-chat-tool-info-container">
+          <div className="ai-chat-tool-info-section">
+            <h4>Tool Calls</h4>
+            <textarea
+              className="ai-chat-tool-info-json"
+              readOnly
+              value={JSON.stringify(data.calls, null, 2)}
+            />
+          </div>
+          <div className="ai-chat-tool-info-section">
+            <h4>Tool Responses</h4>
+            <textarea
+              className="ai-chat-tool-info-json"
+              readOnly
+              value={JSON.stringify(data.responses, null, 2)}
+            />
+          </div>
+        </div>
+        
+        <div className="ai-chat-modal-footer">
+          <button 
+            className="ai-chat-modal-button ai-chat-modal-button--primary"
+            onClick={onClose}
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ToolInfoModal;
+
+
+
+

package/src/components/ui/Tooltip.tsx

@@ -75,3 +75,4 @@ export default Tooltip;
 
 
 
+

package/src/components/ui/index.ts

@@ -22,3 +22,4 @@ export type { DialogProps, DialogFooterProps } from './Dialog';
 
 
 
+