# Text Response

Clean prose styling for a standard assistant answer with inline code.

- Category: Text Outputs
- Source: AICSS (https://www.aicss.dev/components/text-response)
- Author: @kvnkld (https://x.com/kvnkld)
- Styling: Self-contained CSS with CSS custom properties (design tokens). Theme-aware via [data-theme] (light/dark).

## Instructions

Add this component to the project. Keep the styling self-contained. Map the design tokens (CSS custom properties) to the project's theme if they are not already defined.

## Code

### React - `TextResponse.tsx`

```tsx
"use client";

import styles from "./TextResponse.module.css";
import type { ReactNode } from "react";

export function TextResponse({ children }: { children?: ReactNode }) {
  return <div className={styles.prose}>{children}</div>;
}

```

### React - `TextResponse.module.css`

```css
/* Theme follows the nearest [data-theme] ancestor (preview switch),
   then .dark, then the OS when no data-theme is set. */
:global(:root),
:global([data-theme="light"]) {
  --tr-fg: #1a1a1a;
  --tr-code-bg: #f4f5f7;
}
:global([data-theme="dark"]),
:global(.dark) {
  --tr-fg: #f5f5f5;
  --tr-code-bg: #242424;
}
@media (prefers-color-scheme: dark) {
  :global(:root:not([data-theme])) {
    --tr-fg: #f5f5f5;
    --tr-code-bg: #242424;
  }
}

.prose { font-size: 14px; line-height: 19px; color: var(--tr-fg, #1a1a1a); }
.prose p { margin-bottom: 10px; }
.prose p:last-child { margin-bottom: 0; }
.prose code { font-family: ui-monospace, monospace; font-size: 12.5px; color: inherit; background: var(--tr-code-bg, #f4f5f7); padding: 3px 5px 1px; border-radius: 5px; }

```

### Vue - `TextResponse.vue`

```vue
<template>
  <div class="prose"><slot /></div>
</template>

<style scoped>
/* Theme follows the nearest [data-theme] ancestor, then .dark, then the OS. */
:global(:root),
:global([data-theme="light"]) {
  --tr-fg: #1a1a1a;
  --tr-code-bg: #f4f5f7;
}
:global([data-theme="dark"]),
:global(.dark) {
  --tr-fg: #f5f5f5;
  --tr-code-bg: #242424;
}
@media (prefers-color-scheme: dark) {
  :global(:root:not([data-theme])) {
  --tr-fg: #f5f5f5;
  --tr-code-bg: #242424;
  }
}
.prose { font-size: 14px; line-height: 19px; color: var(--tr-fg, #1a1a1a); }
.prose :deep(p) { margin-bottom: 10px; }
.prose :deep(p):last-child { margin-bottom: 0; }
.prose :deep(code) { font-family: ui-monospace, monospace; font-size: 12.5px; color: inherit; background: var(--tr-code-bg, #f4f5f7); padding: 3px 5px 1px; border-radius: 5px; }
</style>
```

### Svelte - `TextResponse.svelte`

```svelte
<div class="prose"><slot /></div>

<style>
/* Theme follows the nearest [data-theme] ancestor, then .dark, then the OS. */
:global(:root),
:global([data-theme="light"]) {
  --tr-fg: #1a1a1a;
  --tr-code-bg: #f4f5f7;
}
:global([data-theme="dark"]),
:global(.dark) {
  --tr-fg: #f5f5f5;
  --tr-code-bg: #242424;
}
@media (prefers-color-scheme: dark) {
  :global(:root:not([data-theme])) {
  --tr-fg: #f5f5f5;
  --tr-code-bg: #242424;
  }
}
.prose { font-size: 14px; line-height: 19px; color: var(--tr-fg, #1a1a1a); }
.prose :global(p) { margin-bottom: 10px; }
.prose :global(p):last-child { margin-bottom: 0; }
.prose :global(code) { font-family: ui-monospace, monospace; font-size: 12.5px; color: inherit; background: var(--tr-code-bg, #f4f5f7); padding: 3px 5px 1px; border-radius: 5px; }
</style>
```