Function ChatMessageBubble

components/ChatMessageBubble.tsx:11–125

(props: {
  message: ChatWindowMessage;
  aiEmoji?: React.JSX.Element;
  onRemovePressed?: () => void;
})

import { Feedback } from 'langsmith';

export function ChatMessageBubble(props: {
  message: ChatWindowMessage;
  aiEmoji?: React.JSX.Element;
  onRemovePressed?: () => void;
}) {
  const { role, content, runId } = props.message;

  const colorClassName =
    role === "user" ? "bg-sky-600" : "bg-slate-50 text-black";
  const alignmentClassName =
    role === "user" ? "ml-auto" : "mr-auto";
  const prefix = role === "user" ? "🧑" : props.aiEmoji;

  const [isLoading, setIsLoading] = useState(false);
  const [feedback, setFeedback] = useState<Feedback | null>(null);
  const [comment, setComment] = useState("");
  const [showCommentForm, setShowCommentForm] = useState(false);

  async function handleScoreButtonPress(e: React.MouseEvent<HTMLButtonElement, MouseEvent>, score: number) {
    e.preventDefault();
    setComment("");
    await sendFeedback(score);
  }

  async function handleCommentSubmission(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const score = typeof feedback?.score === "number" ? feedback.score : 0;
    await sendFeedback(score);
  }

  async function sendFeedback(score: number) {
    if (isLoading) {
      return;
    }

    setIsLoading(true);

    const response = await fetch("api/feedback", {
      method: feedback?.id ? "PUT" : "POST",
      body: JSON.stringify({
        id: feedback?.id,
        run_id: runId,
        score,
        comment,
      })
    });

    const json = await response.json();

    if (json.error) {
      toast(json.error, {
        theme: "dark"
      });
      return;
    } else if (feedback?.id && comment) {
      toast("Response recorded! Go to https://smith.langchain.com and check it out in under your run's \"Feedback\" pane.", {
        theme: "dark",
        autoClose: 3000,