@evelan/ jexity- widget (英语)

任何网站的可嵌入的 AI 聊天部件 。 以单个方式添加客户支持聊天 <script> 标记或通过 npm.

快速启动

脚本标记( 不需要构建工具)

<script
  src="https://cdn.jexitychat.de/widget/latest/widget.js"
  data-org-slug="YOUR_ORG_SLUG"
  async
></script>

国家预防机制

npm install @evelan/jexity-widget

import { JexityChat } from '@evelan/jexity-widget'

const chat = JexityChat({
  orgSlug: 'YOUR_ORG_SLUG',
})

// Later:
chat.shutdown()

反应提供者

import { JexityChatProvider, useJexityChat } from '@evelan/jexity-widget/react'

function App() {
  return (
    <JexityChatProvider orgSlug="YOUR_ORG_SLUG">
      <HomePage />
    </JexityChatProvider>
  )
}

function HomePage() {
  const { open, close, toggle, isOpen } = useJexityChat()
  return <button onClick={open}>Chat with us</button>
}

已签名的用户: 在您的服务器上签名

@evelan/jexity-widget/server 为在服务器上签名的用户(Node 20+、Next.js 路由处理器、边缘运行时间、Convex、Deno、Bun)签名。 无依取相. 密钥决定了算法:来自Sign-in窗口的签入密钥会标出HS256,一个P-256的私人密钥(JWK),其公用半是已注册的口号ES256.

// app/api/jexity-pass/route.ts (Next.js)
import { createJexityPass } from '@evelan/jexity-widget/server'

export async function GET() {
  const user = await getSignedInUser() // your app's own login, checked on the server
  if (!user) return new Response('', { status: 401 })
  const pass = await createJexityPass(
    { userId: user.id, name: user.name, email: user.emailVerified ? user.email : null, accountId: user.companyId },
    process.env.JEXITY_SIGN_IN_KEY,
  )
  return new Response(pass)
}

它把通行证保存在Jexity接受的:一个长名被剪去,一个无效的电子邮件被漏掉, iat编号 :exp 秒,默认1小时({ lifetimeSeconds } 最多24小时的通行证)。 一个用户代号超过128个字符投出而不是被剪取,因此两个用户从不共享聊天. 断开的密钥会丢出一个永远不重复的固定消息.

配置

外观主题覆盖

theme 让您覆盖单个元素颜色。 未设置的密钥返回到 primaryColor 或品牌默认.

JexityChat({
  orgSlug: 'acme',
  theme: {
    bg: {
      trigger: '#1a1a2e',    // FAB background
      header: '#16213e',     // Chat header
      msgUser: '#0f3460',    // User bubble background
      msgBot: '#f5f5f5',     // Bot bubble background
      window: '#ffffff',     // Chat window background
      sendBtn: '#e94560',    // Send button background
    },
    text: {
      header: '#ffffff',     // Header text/icon color
      msgUser: '#ffffff',    // User bubble text
      msgBot: '#333333',     // Bot bubble text
      main: '#212121',       // Primary body text
      muted: '#888888',      // Secondary/muted text
    },
    border: {
      window: '#e0e0e0',     // Window border
      input: '#cccccc',      // Input field border
    },
  },
})

程序化 API

const chat = JexityChat(options)

chat.open()                    // Open the chat window
chat.close()                   // Close the chat window
chat.toggle()                  // Toggle open/closed
chat.ask("How do I crawl?")    // Open the chat and send this question
chat.shutdown()                // Remove widget from DOM
chat.logout()                  // Signed-in user signed out: forget this tab's chats, start over with the current pass
chat.isOpen                    // readonly boolean — current open state
chat.subscribe(cb)             // Subscribe to open/close changes
                               // Returns unsubscribe function

// Your user signed out, also before the chat has loaded on this page:
import { logout } from "@evelan/jexity-widget" // or "@evelan/jexity-widget/react"
logout()                       // Forget this tab's chats

// IIFE global (script tag):
window.JexityChat.open()
window.JexityChat.close()
window.JexityChat.toggle()
window.JexityChat.shutdown()

IIFE (脚本标记) 属性

所有选项都可设置为 data-* 属性 <script> 标签 :

<script
  src="https://cdn.jexitychat.de/widget/latest/widget.js"
  data-org-slug="acme-corp"
  data-locale="de"
  data-primary-color="#ff6600"
  data-trigger-icon="sparkles"
  data-trigger-radius="lg"
  data-trigger-label="Chat with us"
  data-hide-branding="true"
  data-convex-url="https://your-deployment.convex.cloud"
  async
></script>

然后在装入后进行程序控制 :

<script>
  window.JexityChat.open()
  window.JexityChat.shutdown()
</script>

构建产出

dist/
  widget.js          ← IIFE for <script> embed (CDN)
  index.mjs          ← ESM for bundlers (npm)
  react.mjs          ← React bindings (externalizes react + core)
  server.mjs/.cjs    ← createJexityPass for your server (no Preact, React or Convex)
  types/index.d.ts   ← TypeScript declarations (core)
  types/react.d.ts   ← TypeScript declarations (React)

目标规模: IIFE → 32 KB → 无害环境管理 → 42 KB(宽度)

发展

# From repo root:
pnpm dev --filter @evelan/jexity-widget

# Or directly:
cd apps/widget
pnpm dev

打开 http://localhost:3002 ——dev游乐场设有活化配置控制.

环境变量

创建 apps/widget/.env.local数字 :

# Convex deployment URL — used for both WebSocket (real-time) and HTTP actions (config fetch).
# The widget auto-derives .convex.site from .convex.cloud via convex-url.ts.
# Copy from packages/backend/.env.local (CONVEX_URL).
VITE_CONVEX_URL=https://<your-dev-deployment>.convex.cloud

# Reserved — not consumed yet. Future escape hatch if we ever swap Convex for
# a traditional REST backend (Express, Fastify, etc.). Once wired, widget code
# will read this instead of VITE_CONVEX_URL so the backend is hot-swappable
# via env alone.
# VITE_API_BASE_URL=https://api.example.com

URL 参数

构建

pnpm build          # Full build (all 5 outputs)
pnpm check-types    # Type-check only (fast)

许可证

麻省理工学院