React và Next.js

Orbz không cung cấp thành phần React riêng. React và Next.js dùng cùng phần tử <orb-z> như mọi framework khác.

React

Import điểm vào trình duyệt một lần từ điểm vào ứng dụng phía máy khách hoặc mô-đun thành phần chạy trong trình duyệt:


import "@neongate-ai/orbz/react-types";
import "@neongate-ai/orbz/browser";
import { useState } from "react";
import type { OrbzState } from "@neongate-ai/orbz";
 
export function AssistantPresence() {
  const [state, setState] = useState<OrbzState>("idle");
 
  return (
    <div role="status" aria-live="polite">
      <orb-z state={state} size="300px" />
      <span>Assistant is {state}</span>
      <button type="button" onClick={() => setState("listening")}>
        Listen
      </button>
    </div>
  );
}

Next.js App Router

Đặt đăng ký và trạng thái tương tác trong ranh giới phía máy khách. Thành phần máy chủ vẫn có thể hiển thị thành phần máy khách bình thường.


"use client";
 
import "@neongate-ai/orbz/react-types";
import "@neongate-ai/orbz/browser";
 
export function AssistantPresence() {
  return <orb-z state="thinking" size="300px" />;
}

Điểm vào an toàn với SSR: không làm gì khi thiếu customElements và định nghĩa phần tử khi gói phía máy khách thực thi.

Khai báo kiểu cho thẻ tùy chỉnh

Import phần mở rộng kiểu JSX tùy chọn một lần trong ứng dụng TypeScript React hoặc Next.js:


import '@neongate-ai/orbz/react-types'

Việc này giúp TypeScript nhận biết <orb-z>. Nó không tạo thành phần React, lớp bọc, adapter runtime hoặc phụ thuộc React trong runtime Orbz.

Gán thuộc tính có cấu trúc

Bộ máy giọng nói, luồng hội thoại và nhà cung cấp trí tuệ là đối tượng JavaScript, không phải thuộc tính HTML. Gán qua ref trước lần chạy hội thoại đầu tiên được lên lịch:


"use client";
 
import "@neongate-ai/orbz/react-types";
import "@neongate-ai/orbz/browser";
import { useCallback } from "react";
import type {
  OrbzElement,
  OrbzVoiceEnginePort
} from "@neongate-ai/orbz";
 
interface ProductPresenceProps {
  voiceEngine: OrbzVoiceEnginePort;
}
 
export function ProductPresence(props: ProductPresenceProps) {
  const setElement = useCallback(
    (element: HTMLElement | null) => {
      if (element) {
        (element as OrbzElement).voiceEngine = props.voiceEngine;
      }
    },
    [props.voiceEngine]
  );
 
  return <orb-z ref={setElement} state="idle" />;
}

Các ví dụ React và Next.js trong kho mã dùng cách tiếp cận phần tử gốc này.