Inline assist

"use client"
import * as React from "react"
import { InlineAssist, type InlineAssistRequest } from "@/components/ui/inline-assist"
const initial = `Close for Q3 is basically done. We're still waiting on 3 vendor credits from Halcyon Freight, which means accounts payable is a little higher than it should be. In order to finish on time we need the credits by Friday, otherwise we'll book an accrual and fix it in October.
Revenue came in at $4.82M, up 12% on Q2. Most of the growth came from the Team plan, which grew faster then we expected after the price change in July. Churn stayed flat at 1.9%.`
const rules: Record<string, [RegExp, string][]> = {  shorter: [    [/basically /g, ""],    [/still /g, ""],    [/a little higher than it should be/g, "overstated"],    [/In order to/g, "To"],    [/, which means/g, ", so"],    [/, otherwise we'll/g, " or we'll"],    [/Most of the growth came from/g, "Growth came from"],    [/ after the price change in July/g, ""],  ],  formal: [    [/basically done/g, "substantially complete"],    [/We're/g, "We are"],    [/we'll/g, "we will"],    [/a little higher than it should be/g, "temporarily overstated"],    [/fix it/g, "reverse it"],    [/came in at/g, "was"],  ],  grammar: [    [/faster then/g, "faster than"],    [/We're still waiting/g, "We are still waiting"],  ],}
function rewrite({ instruction, selection }: InlineAssistRequest) {  const key = /short|concise|trim/i.test(instruction)    ? "shorter"    : /formal|professional/i.test(instruction)      ? "formal"      : /grammar|spell|typo/i.test(instruction)        ? "grammar"        : "formal"  let out = selection  for (const [pattern, replacement] of rules[key]) out = out.replace(pattern, replacement)  if (out === selection && key === "shorter") {    const cut = selection.lastIndexOf(", ")    if (cut > selection.length / 2) out = selection.slice(0, cut) + "."  }  return out}
export default function InlineAssistMemo() {  const [value, setValue] = React.useState(initial)
  return (    <div className="mx-auto w-full max-w-2xl self-start rounded-xl border bg-card shadow-xs">      <div className="flex items-baseline justify-between gap-3 border-b px-5 py-3">        <h3 className="text-sm font-medium">Q3 close memo</h3>        <span className="text-[13px] text-muted-foreground">Select text, then press ⌘K</span>      </div>      <div className="px-5 py-4">        <InlineAssist          value={value}          onValueChange={setValue}          onGenerate={(request) =>            new Promise((resolve, reject) => {              const id = setTimeout(() => resolve(rewrite(request)), 1400)              request.signal.addEventListener("abort", () => {                clearTimeout(id)                reject(new Error("aborted"))              })            })          }        />      </div>    </div>  )}

"use client"
import * as React from "react"
import { Button } from "@/components/ui/button"import { InlineAssist } from "@/components/ui/inline-assist"
const initial = `Hi Lena, sorry about this. Looks like you got charged twice on October 14 because the card retry ran after the first payment already went through. I've refunded the second charge of $480.00, you should see it in 5 to 10 business days.`
const warmer = `Hi Lena, I'm really sorry for the trouble. You were charged twice on October 14: our card retry ran after your first payment had already gone through. I've refunded the second charge of $480.00, and it should reach your account within 5 to 10 business days.`
export default function InlineAssistReply() {  const [value, setValue] = React.useState(initial)
  return (    <div className="flex w-full max-w-xl flex-col rounded-xl border bg-card shadow-xs">      <div className="border-b px-4 py-2.5 text-[13px] text-muted-foreground">        Reply to <span className="font-medium text-foreground">Lena Fischer</span>, ticket #48213      </div>      <div className="px-4 py-3">        <InlineAssist          value={value}          onValueChange={setValue}          suggestions={["Make it warmer", "Make it shorter", "Add next steps"]}          contentClassName="text-sm leading-6"          onGenerate={({ selection, instruction, signal }) =>            new Promise((resolve, reject) => {              const id = setTimeout(() => {                if (selection === initial) resolve(warmer)                else if (/short/i.test(instruction)) resolve(selection.replace(/, you should see it.*$/, "."))                else if (/next/i.test(instruction))                  resolve(`${selection} If it has not arrived by October 31, reply here and I will chase it with our bank.`)                else resolve(selection.replace(/sorry about this/, "I'm really sorry for the trouble").replace(/Looks like you got/, "You were"))              }, 1200)              signal.addEventListener("abort", () => {                clearTimeout(id)                reject(new Error("aborted"))              })            })          }        />      </div>      <div className="flex items-center justify-end gap-2 border-t px-4 py-2.5">        <Button variant="ghost" size="sm">          Save draft        </Button>        <Button size="sm">Send reply</Button>      </div>    </div>  )}