相距反应 SDK

在 React 中构建一个随时可用的支持部件, 包含良好的默认, 快速的样式 , 当你需要更进一步的时候,一个可调和的API.

安装

bun add @cossistant/react

导入样式

在您的应用根使用一个样式表 :

import "@cossistant/react/styles.css";

或者,如果你的应用程序已经使用 Tailwind CSS v4 :

import "@cossistant/react/support.css";

快速启动

如果您想要 Cossistant 拥有运行时间, 请使用下拉部件: 客户端 使用寿命周期、访问者背景、网络保护状态、路线、开放状态、槽和 本地化.

import { LazySupport } from "@cossistant/react/lazy-support";
import { SupportProvider } from "@cossistant/react/provider";
import "@cossistant/react/styles.css";
import { Suspense } from "react";

export function App() {
  return (
    <SupportProvider publicKey="pk_live_...">
      <Suspense fallback={null}>
        <LazySupport />
      </Suspense>
    </SupportProvider>
  );
}

LazySupport 密码分割电池组件。 它与飞船 默认触发器、路由器、主页、对话页、时间表、作曲器 在初始应用程序块中保留 UI 时设置了样式钩 。 使用 Support 从 @cossistant/react/support 当有急切的部件或化合物时 子组件, 如 Support.Trigger 需要这样做.

无头初级

在您想要拥有UI状态并通过时直接使用钩子和原始字 明确的客户端。 这不需要将子树包入 SupportProvider。 。 。 .

import { CossistantClient } from "@cossistant/core";
import { SupportTrigger } from "@cossistant/react/primitives/trigger";
import { useSubmitFeedback } from "@cossistant/react/hooks/use-submit-feedback";
import { useState } from "react";

const client = new CossistantClient({ publicKey: "pk_live_..." });

export function CustomFeedbackButton() {
  const [open, setOpen] = useState(false);
  const feedback = useSubmitFeedback({ client });

  return (
    <div>
      <SupportTrigger
        className="rounded-md bg-black px-3 py-2 text-white"
        isOpen={open}
        onToggleOpen={() => setOpen((value) => !value)}
        unreadCount={0}
      >
        {({ isOpen }) => (isOpen ? "Close" : "Send feedback")}
      </SupportTrigger>

      {open ? (
        <button
          onClick={() =>
            feedback.mutate({
              rating: 5,
              source: "headless",
              visitorId: "visitor_123",
            })
          }
          type="button"
        >
          Send rating
        </button>
      ) : null}
    </div>
  );
}

提供者- 选项钩包括 useSubmitFeedback, (中文(简体) ), useSendMessage, (中文(简体) ), useCreateConversation, (中文(简体) ), useFileUpload,以及 useFeedbackForm如果 client 实值 省去它们返回到 SupportProvider; 如果没有客户端, 则失败 带有明显的缺失客户端错误.

反馈快速启动

使用 Feedback 当您想要轻量级/ 评论部件时, 需要以 同样的访客背景.

import { Feedback, SupportProvider } from "@cossistant/react";
import "@cossistant/react/styles.css";

export function App() {
  return (
    <SupportProvider publicKey="pk_live_...">
      <Feedback topics={["Bug", "Feature request", "UX", "Other"]} />
    </SupportProvider>
  );
}

Feedback 支持与支持部件相同的受控开放模式 :

import { Feedback } from "@cossistant/react/feedback";
import { useState } from "react";

export function ControlledFeedback() {
  const [open, setOpen] = useState(false);

  return (
    <Feedback.Root open={open} onOpenChange={setOpen}>
      <Feedback.Trigger asChild>
        <button type="button">Feedback?</button>
      </Feedback.Trigger>

      <Feedback.Content side="bottom" align="end">
        <div className="p-4">Build any feedback UI here.</div>
      </Feedback.Content>
    </Feedback.Root>
  );
}

支持打字钩

以 :

• classNames.trigger
• classNames.content
• slotProps

默认支持部件也暴露出稳定的 DOM 钩:

• data-slot
• data-state
• data-page
• data-support-mode

反馈型钩

以 :

• classNames.trigger
• classNames.content

默认反馈部件也暴露出稳定的 DOM 钩:

• data-slot
• data-state
• data-feedback-*

常见时间段包括: feedback-root, (中文(简体) ), feedback-trigger, (中文(简体) ), feedback-content, (中文(简体) ), feedback-panel, (中文(简体) ), feedback-form, (中文(简体) ), feedback-rating-field,以及 feedback-submit。 。 。 .

将第一部分交换到 slots

使用 slots 当你想要比重建整个部件树更好的DX时.

import {
  Support,
  type SupportHomePageSlotProps,
  type SupportTriggerSlotProps,
} from "@cossistant/react";
import * as React from "react";

function mergeClassNames(...classes: Array<string | undefined>) {
  return classes.filter(Boolean).join(" ");
}

const CustomBubble = React.forwardRef<
  HTMLButtonElement,
  SupportTriggerSlotProps
>(function CustomBubble({ isOpen, unreadCount, toggle, className, ...props }, ref) {
  return (
    <button
      {...props}
      className={mergeClassNames("fixed right-4 bottom-4 z-[9999]", className)}
      onClick={toggle}
      ref={ref}
      type="button"
    >
      {isOpen ? "Close" : "Need help?"} ({unreadCount})
    </button>
  );
});

function CustomHomePage({
  quickOptions,
  startConversation,
}: SupportHomePageSlotProps) {
  return (
    <div className="flex h-full flex-col gap-3 p-6">
      <h2 className="text-2xl font-semibold">Real support, instantly.</h2>
      {quickOptions.map((option) => (
        <button
          key={option}
          onClick={() => startConversation(option)}
          type="button"
        >
          {option}
        </button>
      ))}
    </div>
  );
}

<Support
  slots={{
    trigger: CustomBubble,
    homePage: CustomHomePage,
  }}
  slotProps={{
    content: {
      className: "rounded-3xl border shadow-2xl",
    },
  }}
/>;

完全组成 Support.Root

使用 Support.Root 需要自定义外壳、 明确页注册或 内置 在这个模式下,您拥有触发布局类.

import { Support } from "@cossistant/react";

function LaunchChecklistPage() {
  return <div className="p-6">Your custom home page</div>;
}

export function App() {
  return (
    <Support.Root open>
      <Support.Trigger asChild>
        <button className="fixed right-4 bottom-4 z-[9999]" type="button">
          Compose support
        </button>
      </Support.Trigger>

      <Support.Content className="rounded-3xl border shadow-2xl">
        <Support.Router>
          <Support.Page component={LaunchChecklistPage} name="HOME" />
        </Support.Router>
      </Support.Content>
    </Support.Root>
  );
}

更多文档

• 反应支持文件
• 自定义指南
• 路线指南