Repository: Significant-Gravitas/Auto-GPT
File: autogpt_platform/frontend/src/components/OttoChatWidget.tsx (TypeScript)

Code before:
import React, { useEffect, useState, useRef } from "react";
import { useSearchParams, usePathname } from "next/navigation";
import { useToast } from "@/components/ui/use-toast";
import useAgentGraph from "../hooks/useAgentGraph";
import ReactMarkdown from "react-markdown";
import { GraphID } from "@/lib/autogpt-server-api/types";
import { askOtto } from "@/app/(platform)/build/actions";

interface Message {
  type: "user" | "assistant";
  content: string;
}

const OttoChatWidget = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [messages, setMessages] = useState<Message[]>([]);
  const [inputValue, setInputValue] = useState("");
  const [isProcessing, setIsProcessing] = useState(false);
  const [includeGraphData, setIncludeGraphData] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const flowID = searchParams.get("flowID");
  const { nodes, edges } = useAgentGraph(
    flowID ? (flowID as GraphID) : undefined,
  );
  const { toast } = useToast();

  useEffect(() => {
    // Add welcome message when component mounts
    if (messages.length === 0) {
      setMessages([
        {
          type: "assistant",
          content: "Hello im Otto! Ask me anything about AutoGPT!",
        },
      ]);
    }
  }, [messages.length]);

  useEffect(() => {
    // Scroll to bottom whenever messages change
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!inputValue.trim() || isProcessing) return;

    const userMessage = inputValue.trim();
    setInputValue("");

Review comment (suggestion):
In the end, only `flowID` was really being used, so I replaced all of this with just the `graphID` input parameter

Code after:
import React, { useEffect, useState, useRef } from "react";
import ReactMarkdown from "react-markdown";

import type { GraphID } from "@/lib/autogpt-server-api/types";
import { askOtto } from "@/app/(platform)/build/actions";
import { cn } from "@/lib/utils";

interface Message {
  type: "user" | "assistant";
  content: string;
}

export default function OttoChatWidget({
  graphID,
  className,
}: {
  graphID?: GraphID;
  className?: string;
}): React.ReactNode {
  const [isOpen, setIsOpen] = useState(false);
  const [messages, setMessages] = useState<Message[]>([]);
  const [inputValue, setInputValue] = useState("");
  const [isProcessing, setIsProcessing] = useState(false);
  const [includeGraphData, setIncludeGraphData] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Add welcome message when component mounts
    if (messages.length === 0) {
      setMessages([
        {
          type: "assistant",
          content: "Hello, I am Otto! Ask me anything about AutoGPT!",
        },
      ]);
    }
  }, [messages.length]);

  useEffect(() => {
    // Scroll to bottom whenever messages change
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!inputValue.trim() || isProcessing) return;

    const userMessage = inputValue.trim();
    setInputValue("");
    setIsProcessing(true);