Cleanup ux code

Author: loukratz-bv

ui/components/FlowResponseCard.tsx

@@ -8,6 +8,7 @@
 
 import { FeedbackButton } from "@/components/feedback";
 import { Alert, AlertDescription } from "@/components/ui/Alert";
+import { getTelemetryIdsFromValue, METADATA_FIELD } from "@/lib/telemetry";
 
 import { MarkdownContainer } from "./MarkdownContainer";
 import {
@@ -164,35 +165,13 @@ export default function FlowResponseCard({
       ? (responseData as Record<string, ResponseData>).outputs || responseData
       : responseData || {};
 
-  // Extract metadata (span_id, trace_id) from response
-  const metadata =
-    responseData && typeof responseData === "object"
-      ? (responseData as Record<string, unknown>).metadata
-      : null;
-
-  const spanId =
-    metadata && typeof metadata === "object"
-      ? (metadata as Record<string, unknown>).span_id
-      : null;
-
-  const traceId =
-    metadata && typeof metadata === "object"
-      ? (metadata as Record<string, unknown>).trace_id
-      : null;
-
-  const showFeedback =
-    feedbackConfig &&
-    telemetryEnabled &&
-    spanId &&
-    traceId &&
-    typeof spanId === "string" &&
-    typeof traceId === "string";
+  const telemetryIds = getTelemetryIdsFromValue(responseData);
 
   return (
     <div className="space-y-4">
       {responseSchema.properties &&
         Object.entries(responseSchema.properties)
-          .filter(([propertyName]) => propertyName !== "metadata")
+          .filter(([propertyName]) => propertyName !== METADATA_FIELD)
           .map(([propertyName, propertySchema]) => {
             const value = (outputsData as Record<string, ResponseData>)[
               propertyName
@@ -212,13 +191,12 @@ export default function FlowResponseCard({
             );
           })}
 
-      {showFeedback && (
+      {feedbackConfig && telemetryEnabled && telemetryIds && (
         <div className="pt-4 border-t">
           <FeedbackButton
             feedbackConfig={feedbackConfig}
-            spanId={spanId}
-            traceId={traceId}
-            telemetryEnabled={telemetryEnabled}
+            spanId={telemetryIds.spanId}
+            traceId={telemetryIds.traceId}
           />
         </div>
       )}

ui/components/FlowResponseTable.tsx

@@ -22,6 +22,7 @@ import { useMemo, useState } from "react";
 import { FeedbackButton } from "@/components/feedback";
 import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
+import { getTelemetryIdsFromMetadata, METADATA_FIELD } from "@/lib/telemetry";
 
 import type { SchemaProperty, ResponseData } from "@/types";
 import type { FeedbackConfig } from "@/types/FlowMetadata";
@@ -84,42 +85,40 @@ export default function FlowResponseTable({
   const columns = useMemo<ColumnDef<Record<string, ResponseData>>[]>(() => {
     if (!responseSchema?.properties) return [];
 
-    const dataColumns = Object.entries(responseSchema.properties)
-      .filter(([key]) => key !== "metadata")
-      .map(([key, schema]) => {
-        const prop = schema as SchemaProperty;
-        return {
-          accessorKey: key,
-          header: prop.title || key,
-          cell: ({ row }) => {
-            const value = row.original[key];
-            return formatCellValue(value, prop.qtype_type);
-          },
-        };
-      });
+    const dataColumns: ColumnDef<Record<string, ResponseData>>[] =
+      Object.entries(responseSchema.properties)
+        .filter(([key]) => key !== METADATA_FIELD)
+        .map(([key, schema]) => {
+          const prop = schema as SchemaProperty;
+          return {
+            accessorKey: key,
+            header: prop.title || key,
+            cell: (ctx) => {
+              const value = ctx.row.original[key];
+              return formatCellValue(value, prop.qtype_type);
+            },
+          };
+        });
 
     // Add feedback column if enabled
     if (feedbackConfig && telemetryEnabled) {
       dataColumns.push({
         id: "feedback",
         header: "Feedback",
-        cell: ({ row }) => {
-          const metadata = row.original.metadata as
-            | Record<string, unknown>
-            | undefined;
-          const spanId = metadata?.span_id as string | undefined;
-          const traceId = metadata?.trace_id as string | undefined;
+        cell: (ctx) => {
+          const telemetryIds = getTelemetryIdsFromMetadata(
+            ctx.row.original[METADATA_FIELD],
+          );
 
-          if (!spanId || !traceId) {
+          if (!telemetryIds) {
             return null;
           }
 
           return (
             <FeedbackButton
               feedbackConfig={feedbackConfig}
-              spanId={spanId}
-              traceId={traceId}
-              telemetryEnabled={telemetryEnabled}
+              spanId={telemetryIds.spanId}
+              traceId={telemetryIds.traceId}
             />
           );
         },
@@ -144,18 +143,23 @@ export default function FlowResponseTable({
   });
 
   const handleDownloadCSV = () => {
+    const exportableProperties = Object.entries(
+      responseSchema?.properties ?? {},
+    )
+      .filter(([key]) => key !== METADATA_FIELD)
+      .map(([key, schema]) => ({
+        key,
+        schema: schema as SchemaProperty,
+      }));
+
     const csvData = table.getFilteredRowModel().rows.map((row) => {
       const rowData: Record<string, string> = {};
-      columns.forEach((col) => {
-        const key = (col as { accessorKey: string }).accessorKey;
-        const propertySchema = responseSchema?.properties?.[key] as
-          | SchemaProperty
-          | undefined;
-        rowData[String(col.header)] = formatCellValue(
-          row.original[key],
-          propertySchema?.qtype_type,
-        );
-      });
+
+      for (const { key, schema } of exportableProperties) {
+        const header = schema.title || key;
+        rowData[header] = formatCellValue(row.original[key], schema.qtype_type);
+      }
+
       return rowData;
     });
 

ui/components/chat/MessageBubble.tsx

@@ -2,6 +2,7 @@ import { Bot, User } from "lucide-react";
 
 import { FeedbackButton } from "@/components/feedback";
 import { Avatar, AvatarFallback } from "@/components/ui/Avatar";
+import { getTelemetryIdsFromMetadata } from "@/lib/telemetry";
 
 import { MarkdownContainer } from "../MarkdownContainer";
 import { Thinking } from "../outputs";
@@ -59,17 +60,14 @@ function MessageBubble({
     isStreaming,
   );
 
-  // Extract span_id and trace_id from metadata for feedback
-  const spanId = message.metadata?.span_id as string | undefined;
-  const traceId = message.metadata?.trace_id as string | undefined;
+  const telemetryIds = getTelemetryIdsFromMetadata(message.metadata);
 
   const showFeedback =
     !isUser &&
     !isStreaming &&
     feedbackConfig &&
     telemetryEnabled &&
-    spanId &&
-    traceId;
+    telemetryIds;
 
   return (
     <div
@@ -123,9 +121,8 @@ function MessageBubble({
           <div className="mt-2">
             <FeedbackButton
               feedbackConfig={feedbackConfig}
-              spanId={spanId}
-              traceId={traceId}
-              telemetryEnabled={telemetryEnabled}
+              spanId={telemetryIds.spanId}
+              traceId={telemetryIds.traceId}
             />
           </div>
         )}

ui/components/feedback/FeedbackButton.tsx

@@ -16,92 +16,65 @@ import { FeedbackExplanationModal } from "./FeedbackExplanationModal";
 import { RatingFeedback } from "./RatingFeedback";
 import { ThumbsFeedback } from "./ThumbsFeedback";
 
+import type { FeedbackData, FeedbackSubmission } from "@/types/Feedback";
 import type { FeedbackConfig } from "@/types/FlowMetadata";
 
 interface FeedbackButtonProps {
   feedbackConfig: FeedbackConfig;
   spanId: string;
   traceId: string;
-  telemetryEnabled: boolean;
 }
 
 export function FeedbackButton({
   feedbackConfig,
   spanId,
   traceId,
-  telemetryEnabled,
 }: FeedbackButtonProps) {
   const [submitted, setSubmitted] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [showExplanation, setShowExplanation] = useState(false);
-  const [pendingFeedback, setPendingFeedback] = useState<{
-    type: "thumbs" | "rating" | "category";
-    value?: boolean;
-    score?: number;
-    categories?: string[];
-  } | null>(null);
-
-  if (!telemetryEnabled) {
-    return null; // Don't show feedback if telemetry is not enabled
-  }
+  const [pendingFeedback, setPendingFeedback] = useState<FeedbackData | null>(
+    null,
+  );
 
   if (submitted) {
     return (
-      <div className="flex items-center gap-2 text-sm text-green-600">
-        <Check className="h-4 w-4" />
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Check className="h-4 w-4 text-primary" />
         <span>Feedback submitted</span>
       </div>
     );
   }
 
   if (isSubmitting) {
     return (
-      <div className="flex items-center gap-2 text-sm text-gray-500">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
         <Loader2 className="h-4 w-4 animate-spin" />
         <span>Submitting...</span>
       </div>
     );
   }
 
   const handleFeedbackSubmit = async (
-    feedback: {
-      type: "thumbs" | "rating" | "category";
-      value?: boolean;
-      score?: number;
-      categories?: string[];
-    },
+    feedback: FeedbackData,
     explanation?: string,
   ) => {
     setIsSubmitting(true);
     setError(null);
 
     try {
-      // Construct feedback data based on type
-      let feedbackData:
-        | { type: "thumbs"; value: boolean; explanation?: string }
-        | { type: "rating"; score: number; explanation?: string }
-        | { type: "category"; categories: string[]; explanation?: string };
-
-      if (feedback.type === "thumbs" && feedback.value !== undefined) {
-        feedbackData = { type: "thumbs", value: feedback.value, explanation };
-      } else if (feedback.type === "rating" && feedback.score !== undefined) {
-        feedbackData = { type: "rating", score: feedback.score, explanation };
-      } else if (feedback.type === "category" && feedback.categories) {
-        feedbackData = {
-          type: "category",
-          categories: feedback.categories,
-          explanation,
-        };
-      } else {
-        throw new Error("Invalid feedback data");
-      }
-
-      await apiClient.submitFeedback({
+      const feedbackWithExplanation: FeedbackData = explanation
+        ? { ...feedback, explanation }
+        : feedback;
+
+      const submission: FeedbackSubmission = {
         span_id: spanId,
         trace_id: traceId,
-        feedback: feedbackData,
-      });
+        feedback: feedbackWithExplanation,
+      };
+
+      await apiClient.submitFeedback(submission);
 
       setSubmitted(true);
       setPendingFeedback(null);
@@ -117,12 +90,7 @@ export function FeedbackButton({
     }
   };
 
-  const handleFeedbackClick = (feedback: {
-    type: "thumbs" | "rating" | "category";
-    value?: boolean;
-    score?: number;
-    categories?: string[];
-  }) => {
+  const handleFeedbackClick = (feedback: FeedbackData) => {
     // If explanation is enabled, show modal first
     if (feedbackConfig.explanation) {
       setPendingFeedback(feedback);
@@ -154,7 +122,7 @@ export function FeedbackButton({
         )}
       </div>
 
-      {error && <div className="text-sm text-red-600">{error}</div>}
+      {error && <div className="text-sm text-destructive">{error}</div>}
 
       {showExplanation && pendingFeedback && (
         <FeedbackExplanationModal

ui/components/feedback/FeedbackExplanationModal.tsx

@@ -7,10 +7,11 @@
 "use client";
 
 import { X } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
+import { Textarea } from "@/components/ui/textarea";
 
 interface FeedbackExplanationModalProps {
   isOpen: boolean;
@@ -25,6 +26,12 @@ export function FeedbackExplanationModal({
 }: FeedbackExplanationModalProps) {
   const [explanation, setExplanation] = useState("");
 
+  useEffect(() => {
+    if (!isOpen) {
+      setExplanation("");
+    }
+  }, [isOpen]);
+
   if (!isOpen) return null;
 
   const handleSubmit = () => {
@@ -36,7 +43,7 @@ export function FeedbackExplanationModal({
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-foreground/20">
       <Card className="w-full max-w-md p-6">
         <div className="flex items-center justify-between mb-4">
           <h3 className="text-lg font-semibold">Add Explanation (Optional)</h3>
@@ -51,11 +58,11 @@ export function FeedbackExplanationModal({
         </div>
 
         <div className="space-y-4">
-          <textarea
+          <Textarea
             value={explanation}
             onChange={(e) => setExplanation(e.target.value)}
             placeholder="Why did you give this feedback? (optional)"
-            className="w-full min-h-[100px] p-3 border rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="min-h-[100px] resize-none"
             autoFocus
           />