feat: Feedback buttons (#423)

* feat: Feedback buttons

* cr

Author: bracesproul

frontend/app/api/runs/feedback/route.ts

@@ -0,0 +1,88 @@
+import { Client, Feedback } from "langsmith";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json();
+    const { runId, feedbackKey, score, comment } = body;
+
+    if (!runId || !feedbackKey) {
+      return NextResponse.json(
+        { error: "`runId` and `feedbackKey` are required." },
+        { status: 400 },
+      );
+    }
+
+    const lsClient = new Client({
+      apiKey: process.env.LANGCHAIN_API_KEY,
+    });
+
+    const feedback = await lsClient.createFeedback(runId, feedbackKey, {
+      score,
+      comment,
+    });
+
+    return NextResponse.json(
+      { success: true, feedback: feedback },
+      { status: 200 },
+    );
+  } catch (error) {
+    console.error("Failed to process feedback request:", error);
+
+    return NextResponse.json(
+      { error: "Failed to submit feedback." },
+      { status: 500 },
+    );
+  }
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    const searchParams = req.nextUrl.searchParams;
+    const runId = searchParams.get("runId");
+    const feedbackKey = searchParams.get("feedbackKey");
+
+    if (!runId || !feedbackKey) {
+      return new NextResponse(
+        JSON.stringify({
+          error: "`runId` and `feedbackKey` are required.",
+        }),
+        {
+          status: 400,
+          headers: { "Content-Type": "application/json" },
+        },
+      );
+    }
+
+    const lsClient = new Client({
+      apiKey: process.env.LANGCHAIN_API_KEY,
+    });
+
+    const runFeedback: Feedback[] = [];
+
+    const run_feedback = lsClient.listFeedback({
+      runIds: [runId],
+      feedbackKeys: [feedbackKey],
+    });
+
+    for await (const feedback of run_feedback) {
+      runFeedback.push(feedback);
+    }
+
+    return new NextResponse(
+      JSON.stringify({
+        feedback: runFeedback,
+      }),
+      {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      },
+    );
+  } catch (error) {
+    console.error("Failed to fetch feedback:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch feedback." },
+      { status: 500 },
+    );
+  }
+}

frontend/app/components/chat-interface/messages.tsx

@@ -5,9 +5,13 @@ import {
   useMessage,
   useThreadRuntime,
 } from "@assistant-ui/react";
-import { type FC } from "react";
+import { useState, type FC } from "react";
 
 import { MarkdownText } from "../ui/assistant-ui/markdown-text";
+import { useGraphContext } from "@/app/contexts/GraphContext";
+import { useRuns } from "@/app/hooks/useRuns";
+import { TooltipIconButton } from "../ui/assistant-ui/tooltip-icon-button";
+import { ThumbsDownIcon, ThumbsUpIcon } from "lucide-react";
 
 export const UserMessage: FC = () => {
   return (
@@ -19,6 +23,59 @@ export const UserMessage: FC = () => {
   );
 };
 
+function FeedbackButtons() {
+  const {
+    graphData: { runId, isStreaming },
+  } = useGraphContext();
+  const { sendFeedback } = useRuns();
+  const [feedback, setFeedback] = useState<"good" | "bad">();
+
+  const feedbackKey = "user_feedback";
+  const goodScore = 1;
+  const badScore = 0;
+
+  if (!runId || isStreaming) return null;
+
+  if (feedback) {
+    return (
+      <div className="flex gap-2 items-center mt-4">
+        {feedback === "good" ? (
+          <ThumbsUpIcon className="w-4 h-4 text-green-500" />
+        ) : (
+          <ThumbsDownIcon className="w-4 h-4 text-red-500" />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-2 items-center mt-4">
+      <TooltipIconButton
+        delayDuration={200}
+        variant="ghost"
+        tooltip="Good response"
+        onClick={() => {
+          sendFeedback(runId, feedbackKey, goodScore);
+          setFeedback("good");
+        }}
+      >
+        <ThumbsUpIcon className="w-4 h-4" />
+      </TooltipIconButton>
+      <TooltipIconButton
+        delayDuration={200}
+        variant="ghost"
+        tooltip="Bad response"
+        onClick={() => {
+          sendFeedback(runId, feedbackKey, badScore);
+          setFeedback("bad");
+        }}
+      >
+        <ThumbsDownIcon className="w-4 h-4" />
+      </TooltipIconButton>
+    </div>
+  );
+}
+
 export const AssistantMessage: FC = () => {
   const threadRuntime = useThreadRuntime();
   const threadState = threadRuntime.getState();
@@ -34,6 +91,7 @@ export const AssistantMessage: FC = () => {
         {shouldRenderMessageBreak ? (
           <hr className="relative left-1/2 -translate-x-1/2 w-[90vw] sm:w-[45vw] mt-4 sm:mt-6 border-gray-600" />
         ) : null}
+        {isLast && <FeedbackButtons />}
       </div>
     </MessagePrimitive.Root>
   );