fix: assistant message displaying (#475)

lunary-ai · Aug 4, 2024 · 1d35d76 · 1d35d76
1 parent a553a6d
commit 1d35d76
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/packages/frontend/components/SmartViewer/Message.tsx b/packages/frontend/components/SmartViewer/Message.tsx
@@ -307,12 +307,17 @@ function ChatMessageContent({
   onChange,
   editable,
 }) {
-  const hasTextContent =
-    typeof data?.text === "string" || typeof data?.content === "string"
+  const textContent = data?.text || data?.content
+  const hasTextContent = typeof textContent === "string"
   const hasImageContent = Array.isArray(data?.content)
   const hasFunctionCall = data?.functionCall
   const hasToolCalls = data?.toolCalls || data?.tool_calls
 
+  let renderTextMessage = hasTextContent && (!compact || !hasToolCalls)
+  if (hasTextContent && textContent.length === 0 && !editable) {
+    renderTextMessage = false
+  }
+
   return (
     <Stack gap="xs">
       {typeof data?.name === "string" && !compact && (
@@ -337,7 +342,7 @@ function ChatMessageContent({
         />
       )}
 
-      {hasTextContent && (!compact || !hasToolCalls) && (
+      {renderTextMessage && (
         <TextMessage
           data={data}
           compact={compact}
@@ -437,6 +442,11 @@ export function ChatMessage({
 
   const color = getColorForRole(data?.role)
 
+  if (data.role === "AIMessageChunk") {
+    // Fix for wrong name passed down inside the langchain SDK
+    data.role = "assistant"
+  }
+
   // Add/remove the 'id' and 'name' props required on tool calls
   useEffect(() => {
     if (!data || !editable) return

diff --git a/packages/frontend/pages/traces/[id].tsx b/packages/frontend/pages/traces/[id].tsx
@@ -77,7 +77,6 @@ function TraceTree({
         <Box>
           {!isLastOfParent && (
             <svg
-              height="calc(100% + 3px)"
               width={20}
               strokeWidth={1}
               stroke="var(--mantine-color-gray-5)"
@@ -86,6 +85,7 @@ function TraceTree({
                 position: "absolute",
                 left: 1,
                 top: -3,
+                height: "calc(100% + 3px",
               }}
             >
               <line x1={10} y1="0" x2={10} y2="100%" />
@@ -104,11 +104,11 @@ function TraceTree({
             strokeLinecap="square"
             stroke="var(--mantine-color-gray-5)"
             fill="none"
-            stroke-linejoin="round"
+            strokeLinejoin="round"
           >
             <path
               d="M19 19h-6a8 8 0 0 1 -8 -8v-6"
-              vector-effect="non-scaling-stroke"
+              vectorEffect="non-scaling-stroke"
             />
           </svg>