@tungpastry/pupperfish-react

React UI kit and client abstractions for Pupperfish host applications.

What it is

Use this package when you want ready-made UI for a grounded assistant.

It includes:

• PupperfishChatShell
• PupperfishWidgetShell
• PupperfishDock
• TradeImageGalleryManager
• createLocalStoragePupperfishUiSignalStore(...)

The package is UI-only. Your host app must provide a working PupperfishClient. TradeImageGalleryManager is intentionally generic. Host-specific form UX, dictionaries, and note suggestion logic should live in the host app, not in this package.

Composer behavior

• mặc định: Enter để submit
• Shift+Enter để xuống dòng
• nếu consumer cần behavior bảo thủ hơn, dùng composerSubmitMode="meta-enter-to-submit"

Install

npm install @tungpastry/pupperfish-react @tungpastry/pupperfish-framework react react-dom

Minimal usage

import { PupperfishChatShell } from "@tungpastry/pupperfish-react";
import "@tungpastry/pupperfish-react/styles.css";

<PupperfishChatShell
  client={client}
  branding={{
    assistantName: "Pupperfish",
    assistantTitle: "Grounded retrieval assistant",
  }}
/>;

Required client surface

Your PupperfishClient must implement:

• retrieve
• getLog
• listLogImages
• uploadLogImage
• updateImage
• deleteImage

Host-specific upload UIs

If your product needs a domain-specific chart/image manager, inject it into the shell instead of forking the package:

<PupperfishChatShell
  client={client}
  branding={{ assistantName: "Pupperfish" }}
  renderTradeImageManager={({ client, entryUid, title, compact }) => (
    <MyHostTradeImageManager
      client={client}
      entryUid={entryUid}
      title={title}
      compact={compact}
    />
  )}
/>

Styling

Do not forget to import the package stylesheet:

import "@tungpastry/pupperfish-react/styles.css";

Read next

• Root README
• Architecture guide
• API reference
• Troubleshooting