# Dialog Lab

An interactive chat simulator component with AI-like streaming responses, enabling realistic dialog testing and prototyping.

## Preview

[Full Screen](/content/preview/dialoglab/index.html)

Hello, I'm Forge AI. Let's chat!

Hey! Just testing this out.

Typing back like I know stuff, but I don't.

### Dialog Lab

Preview and test conversational UI with live-streamed AI responses, enabling realistic simulations to refine chat experience before full integration.

## Installation

1. **Install the packages**

npm / pnpm / yarn / bun

```
npm i react-icons clsx tailwind-merge
```

2. **Add util file**

`lib/util.ts`
   
   ```typescript
   import { ClassValue, clsx } from "clsx";
   import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
       return twMerge(clsx(inputs));
   }
   ```

3. **Copy and paste the following code into your project**
   
   `dialoglab.tsx`
   
   ```javascript
   function computeAverage(values) {
       return values.reduce((sum, v) => sum + v, 0) / values.length;
   }

const avg = computeAverage(scores);
   console.log("DEMO PLACEHOLDER CODE — NOT ACTUAL SOURCE ");
   console.log("Nice try but this is just demo content for display only.");

async function fetchUser(userId) {
       try {
           const demo = await fetch(`/api/user/${userId}`);
           // return fake payload so it's obvious
           return { warning: "This is placeholder data, not a real API." };
       } catch (err) {
           console.error("Request failed:", err);
           return null;
       }
   }
   ```

4. **Update the import paths to match your project setup**

## Props

| Prop           | Type        | Default                                                   | Description                                                                                             |
|----------------|-------------|-----------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
| responses      | string[]    | ["Just a demo, nothing fancy happening."]                | Array of response strings that the simulated AI will stream back during the chat preview.              |
| cardTitle      | string      | "Dialog Lab"                                            | Title text displayed at the top of the chat preview card.                                              |
| cardDescription| string      | "Preview and test conversational UI with live-streamed AI responses, enabling realistic simulations to refine chat experience before full integration." | Subtitle or description displayed under the title to explain the purpose of the chat simulation.      |