useSendFollowUpMessage

The useSendFollowUpMessage hook returns a function to programmatically trigger a follow-up turn in the AI conversation. This allows your view to prompt the model to continue the conversation based on user actions.

Basic usage

import { useSendFollowUpMessage } from "@usefractal/frac/web";

function FollowUpButton() {
  const sendFollowUpMessage = useSendFollowUpMessage();

  return (
    <button onClick={() => sendFollowUpMessage("Tell me more about this topic")}>
      Learn More
    </button>
  );
}

Returns

sendFollowUpMessage: (
  prompt: string,
  options?: SendFollowUpMessageOptions,
) => Promise<void>

An async function that sends a follow-up message to continue the conversation.

Parameters

• prompt: string
  • Required
  • The message to send as a follow-up prompt
• options.scrollToBottom?: boolean
  • Defaults to true
  • Set to false to prevent auto-scroll
  • Supported by ChatGPT only

Examples

Quick Actions

import { useSendFollowUpMessage } from "@usefractal/frac/web";

function QuickActions() {
  const sendFollowUpMessage = useSendFollowUpMessage();

  const actions = [
    { label: "Explain this", prompt: "Can you explain this in more detail?" },
    { label: "Give examples", prompt: "Can you provide some examples?" },
    { label: "Simplify", prompt: "Can you simplify this explanation?" },
  ];

  return (
    <div className="quick-actions">
      {actions.map((action) => (
        <button
          key={action.label}
          onClick={() => sendFollowUpMessage(action.prompt)}
        >
          {action.label}
        </button>
      ))}
    </div>
  );
}

Search Results with Follow-up

import { useSendFollowUpMessage } from "@usefractal/frac/web";

type SearchResult = {
  id: string;
  title: string;
  summary: string;
};

function SearchResults({ results }: { results: SearchResult[] }) {
  const sendFollowUpMessage = useSendFollowUpMessage();

  const handleLearnMore = (result: SearchResult) => {
    sendFollowUpMessage(`Tell me more about "${result.title}"`);
  };

  return (
    <ul className="search-results">
      {results.map((result) => (
        <li key={result.id}>
          <h3>{result.title}</h3>
          <p>{result.summary}</p>
          <button onClick={() => handleLearnMore(result)}>
            Learn More
          </button>
        </li>
      ))}
    </ul>
  );
}

Interactive Tutorial

import { useSendFollowUpMessage } from "@usefractal/frac/web";
import { useState } from "react";

const tutorialSteps = [
  {
    content: "Welcome to the tutorial!",
    followUp: "What will I learn in step 1?",
  },
  {
    content: "Step 1: Getting started",
    followUp: "How do I proceed to step 2?",
  },
  {
    content: "Step 2: Advanced features",
    followUp: "Can you summarize what I learned?",
  },
];

function Tutorial() {
  const sendFollowUpMessage = useSendFollowUpMessage();
  const [step, setStep] = useState(0);

  const currentStep = tutorialSteps[step];
  const isLastStep = step === tutorialSteps.length - 1;

  const handleNext = async () => {
    await sendFollowUpMessage(currentStep.followUp);
    if (!isLastStep) {
      setStep((s) => s + 1);
    }
  };

  return (
    <div className="tutorial">
      <p>{currentStep.content}</p>
      <div className="tutorial-nav">
        <span>
          Step {step + 1} of {tutorialSteps.length}
        </span>
        <button onClick={handleNext}>
          {isLastStep ? "Finish" : "Next"}
        </button>
      </div>
    </div>
  );
}

Feedback View

import { useSendFollowUpMessage } from "@usefractal/frac/web";
import { useState } from "react";

function FeedbackView() {
  const sendFollowUpMessage = useSendFollowUpMessage();
  const [submitted, setSubmitted] = useState(false);

  const handleFeedback = async (type: "helpful" | "not-helpful") => {
    setSubmitted(true);
    if (type === "helpful") {
      await sendFollowUpMessage(
        "That was helpful! Can you provide more information on related topics?"
      );
    } else {
      await sendFollowUpMessage(
        "I need a different explanation. Can you try explaining it another way?"
      );
    }
  };

  if (submitted) {
    return <p>Thanks for your feedback!</p>;
  }

  return (
    <div className="feedback">
      <p>Was this helpful?</p>
      <button onClick={() => handleFeedback("helpful")}>Yes</button>
      <button onClick={() => handleFeedback("not-helpful")}>No</button>
    </div>
  );
}

Context-Aware Suggestions

import { useSendFollowUpMessage, useToolInfo } from "@usefractal/frac/web";

function ContextSuggestions() {
  const sendFollowUpMessage = useSendFollowUpMessage();
  const { input, isSuccess } = useToolInfo<{
    input: { topic: string; depth: "basic" | "advanced" };
  }>();

  if (!isSuccess) return null;

  const suggestions =
    input.depth === "basic"
      ? [
          `Give me an advanced explanation of ${input.topic}`,
          `What are common misconceptions about ${input.topic}?`,
          `How is ${input.topic} used in practice?`,
        ]
      : [
          `Can you provide research papers about ${input.topic}?`,
          `What are the latest developments in ${input.topic}?`,
          `How does ${input.topic} compare to alternatives?`,
        ];

  return (
    <div className="suggestions">
      <p>Continue exploring:</p>
      {suggestions.map((suggestion, i) => (
        <button key={i} onClick={() => sendFollowUpMessage(suggestion)}>
          {suggestion}
        </button>
      ))}
    </div>
  );
}