SmartParaphraseArea

Textarea variant of SmartParaphraseBox. Built-in sparkle button rewrites in place; autoResize grows to fit; streaming supported.

Preview

import { useState } from 'react';
import { SmartProvider, SmartParaphraseArea } from '@extedcoud/smart-components';
import { createMockClient } from '@extedcoud/smart-components/adapters/mock';

const client = createMockClient({
complete: async (req) => 'Thank you for getting back to me. I will look into this and respond tomorrow.',
});

export function Example() {
const [value, setValue] = useState(
  'thx for getting back to me, lemme check on this and circle back tmrw',
);
return (
  <SmartProvider client={client}>
    <SmartParaphraseArea
      value={value}
      onChange={setValue}
      autoResize
      rows={3}
      instruction="Rewrite in a polished, professional tone."
    />
  </SmartProvider>
);
}

import { useState } from 'react';import { SmartProvider, SmartParaphraseArea } from '@extedcoud/smart-components';import { createMockClient } from '@extedcoud/smart-components/adapters/mock';const client = createMockClient({complete: async (req) => 'Thank you for getting back to me. I will look into this and respond tomorrow.',});export function Example() {const [value, setValue] = useState(  'thx for getting back to me, lemme check on this and circle back tmrw',);return (  <SmartProvider client={client}>    <SmartParaphraseArea      value={value}      onChange={setValue}      autoResize      rows={3}      instruction="Rewrite in a polished, professional tone."    />  </SmartProvider>);}

Styled example

A composer-card chrome with a floating circular sparkle button and a footer status row.

Polish your reply✦ AI polish

14 wordsAuto-accepts when the rewrite is ready.

'use client';
import { useState } from 'react';
import { SmartProvider, SmartParaphraseArea } from '@extedcoud/smart-components';
import { makeRewriteMock } from '@/lib/mock-client';

const client = makeRewriteMock();

export default function SmartParaphraseAreaStylized() {
  const [value, setValue] = useState(
    'thx for getting back to me, lemme check on this and circle back tmrw',
  );
  return (
    <SmartProvider client={client}>
      <div className="w-full max-w-xl">
        <div className="overflow-hidden rounded-2xl border border-fd-border bg-fd-card shadow-sm">
          <div className="flex items-center justify-between border-b border-fd-border bg-fd-secondary/40 px-4 py-2 text-xs text-fd-muted-foreground">
            <span className="font-medium">Polish your reply</span>
            <span className="rounded-full bg-violet-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-violet-600 dark:text-violet-300">
              ✦ AI polish
            </span>
          </div>
          <SmartParaphraseArea
            value={value}
            onChange={setValue}
            autoResize
            rows={3}
            instruction="Rewrite this text in a polished, professional tone. Keep the same meaning."
            wrapperClassName="relative block"
            className="w-full resize-none bg-transparent px-4 py-3 pr-14 text-base text-fd-foreground outline-none"
            style={{ fontSize: 16 }}
            buttonClassName="absolute bottom-3 right-3 inline-flex h-11 min-h-[44px] w-11 items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500 to-violet-500 text-white shadow-lg shadow-violet-500/30 transition hover:scale-105 disabled:opacity-50"
            buttonAriaLabel="Polish to professional tone"
          />
          <div className="flex items-center justify-between border-t border-fd-border bg-fd-secondary/30 px-4 py-2 text-[11px] text-fd-muted-foreground">
            <span>{value.split(/\s+/).filter(Boolean).length} words</span>
            <span>Auto-accepts when the rewrite is ready.</span>
          </div>
        </div>
      </div>
    </SmartProvider>
  );
}

'use client';import { useState } from 'react';import { SmartProvider, SmartParaphraseArea } from '@extedcoud/smart-components';import { makeRewriteMock } from '@/lib/mock-client';const client = makeRewriteMock();export default function SmartParaphraseAreaStylized() {  const [value, setValue] = useState(    'thx for getting back to me, lemme check on this and circle back tmrw',  );  return (    <SmartProvider client={client}>      <div className="w-full max-w-xl">        <div className="overflow-hidden rounded-2xl border border-fd-border bg-fd-card shadow-sm">          <div className="flex items-center justify-between border-b border-fd-border bg-fd-secondary/40 px-4 py-2 text-xs text-fd-muted-foreground">            <span className="font-medium">Polish your reply</span>            <span className="rounded-full bg-violet-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-violet-600 dark:text-violet-300">              ✦ AI polish            </span>          </div>          <SmartParaphraseArea            value={value}            onChange={setValue}            autoResize            rows={3}            instruction="Rewrite this text in a polished, professional tone. Keep the same meaning."            wrapperClassName="relative block"            className="w-full resize-none bg-transparent px-4 py-3 pr-14 text-base text-fd-foreground outline-none"            style={{ fontSize: 16 }}            buttonClassName="absolute bottom-3 right-3 inline-flex h-11 min-h-[44px] w-11 items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500 to-violet-500 text-white shadow-lg shadow-violet-500/30 transition hover:scale-105 disabled:opacity-50"            buttonAriaLabel="Polish to professional tone"          />          <div className="flex items-center justify-between border-t border-fd-border bg-fd-secondary/30 px-4 py-2 text-[11px] text-fd-muted-foreground">            <span>{value.split(/\s+/).filter(Boolean).length} words</span>            <span>Auto-accepts when the rewrite is ready.</span>          </div>        </div>      </div>    </SmartProvider>  );}

Props

Prop	Type	Default	Description
value*	string	—	Controlled textarea value.
onChange*	(value: string) => void	—	Called on user input and when a rewrite is accepted.
context	string	—	Optional context string included in the prompt.
instruction	string	—	Default rewrite instruction.
stream	boolean	false	Use the streaming capability for faster first paint.
maxTokens	number	512	Max tokens for the rewrite call.
temperature	number	0.4	Sampling temperature.
disableAI	boolean	false	Hide the button and no-op imperative rewrite().
autoResize	boolean	false	Auto-grow the textarea to fit content.
icon	ReactNode	—	Custom icon for the button. Defaults to a built-in sparkle SVG.
buttonAriaLabel	string	'Paraphrase'	Accessible label for the button.
buttonClassName	string	—	Class name applied to the button.
buttonStyle	CSSProperties	—	Inline style applied to the button.
renderButton	(args: ParaphraseButtonRenderArgs) => ReactNode	—	Full custom render for the button.
wrapperClassName	string	—	Class name applied to the outer wrapper.
onRewriteStart	() => void	—	Called when a rewrite starts.
onRewriteAccept	(rewrite: string) => void	—	Called when a rewrite is accepted.
onRewriteError	(error: Error) => void	—	Called when a rewrite errors.
...rest	TextareaHTMLAttributes<HTMLTextAreaElement>	—	All native textarea props minus value, onChange, defaultValue.

SmartParaphraseArea

Preview

Styled example

Props

On this page