Inline AI edit is a production-ready ai component from BJORK UI, packaged for shadcn registries.
"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useState } from "react";
import { InlineAiEdit, SAMPLE_DOCUMENT, mockRewrite } from "@/components/ui/bjork-inline-ai-edit";
const POSED = "It is a lot more faster then before and it actually understands what you mean";
const POSE_START = SAMPLE_DOCUMENT.indexOf(POSED);
const POSE = {
start: POSE_START,
end: POSE_START + POSED.length,
proposal: "It is much faster, and it understands what you mean",
label: "Improve",
};
function Demo({
doc,
setDoc,
run,
}: {
doc: string;
setDoc: (doc: string) => void;
run: number;
}) {
const isPreview = false;
if (isPreview) {
return (
<div className="w-[min(600px,calc(100vw-56px))] pb-12">
<InlineAiEdit defaultValue={SAMPLE_DOCUMENT} pose={POSE} />
</div>
);
}
return (
<div className="flex w-[min(600px,calc(100vw-56px))] flex-col items-stretch gap-6 pb-10">
<InlineAiEdit key={run} value={doc} onValueChange={setDoc} onRewrite={mockRewrite} />
<div className="flex flex-wrap items-center justify-center gap-3">
<span className="font-mono text-[11px] text-[color:var(--bjork-text-faint)]">Select text, or click a paragraph and press ⌘K</span>
</div>
</div>
);
}
function SourceDemo(){
const [doc, setDoc] = useState(SAMPLE_DOCUMENT);
const [run, setRun] = useState(0);
const reset = () => {
setDoc(SAMPLE_DOCUMENT);
setRun((r) => r + 1);
};
return <>
<Demo doc={doc} setDoc={setDoc} run={run} />
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}