Streaming Response

Display component for AI streaming responses with typewriter effect, markdown rendering, and action buttons.

Preview

Install Summary

Component Files

File	Path
streaming-response.tsx	components/ai-assist/streaming-response/streaming-response.tsx
response-actions.tsx	components/ai-assist/streaming-response/response-actions.tsx
types.ts	components/ai-assist/streaming-response/types.ts
index.ts	components/ai-assist/streaming-response/index.ts

Utility Files

File	Path
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add button skeleton

Terminal

bash

npm install @phosphor-icons/react

Installation

Component Files

The component consists of the following files:

1. streaming-response.tsx

streaming-response.tsx

tsx

"use client";

import { useState, useEffect, useRef, useCallback } from "react";
import { CircleNotch, Robot } from "@phosphor-icons/react";
import { cn } from "@/lib/utils";

2. response-actions.tsx

response-actions.tsx

tsx

"use client";

import { Copy, ArrowClockwise, ThumbsUp, ThumbsDown, Check } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

3. types.ts

types.ts

tsx

export interface StreamingResponseProps {
  content: string;
  isStreaming?: boolean;
  onCopy?: () => void;
  onRegenerate?: () => void;

4. index.ts

index.ts

tsx

export { StreamingResponse, AIResponseCard } from "./streaming-response";
export type { StreamingResponseProps } from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/page.tsx

tsx

"use client";

import { AIResponseCard, StreamingResponse } from "@/components/ai-assist";

export default function ResponsePage() {