@plasius/chatbot 1.0.0 → 1.0.1

package/src/client.ts

@@ -0,0 +1,254 @@
+export type ChatRole = "system" | "user" | "assistant";
+
+export interface ChatMessage {
+  role: ChatRole;
+  content: string;
+}
+
+export interface ChatbotUsage {
+  limit: number;
+  used: number;
+  remaining: number;
+  exhausted: boolean;
+}
+
+export interface ChatbotReply {
+  reply: string;
+  model: string;
+  usage: ChatbotUsage;
+}
+
+export interface ChatbotUsageResponse {
+  usage: ChatbotUsage;
+}
+
+export interface ChatbotClientOptions {
+  endpoint?: string;
+  credentials?: RequestCredentials;
+  headers?: HeadersInit | (() => HeadersInit | Promise<HeadersInit>);
+  fetchFn?: typeof fetch;
+  csrfCookieName?: string;
+  csrfHeaderName?: string;
+  bootstrapCsrf?: boolean;
+}
+
+interface ErrorPayload {
+  error?: string;
+  message?: string;
+  usage?: ChatbotUsage;
+}
+
+export class ChatbotClientError extends Error {
+  status: number;
+  code?: string;
+  usage?: ChatbotUsage;
+
+  constructor(status: number, message: string, code?: string, usage?: ChatbotUsage) {
+    super(message);
+    this.name = "ChatbotClientError";
+    this.status = status;
+    this.code = code;
+    this.usage = usage;
+  }
+}
+
+const DEFAULT_ENDPOINT = "/ai/chatbot";
+const DEFAULT_CSRF_COOKIE_NAME = "csrf-token";
+const DEFAULT_CSRF_HEADER_NAME = "x-csrf-token";
+
+function resolveFetch(fetchFn?: typeof fetch): typeof fetch {
+  const resolved = fetchFn ?? (typeof fetch !== "undefined" ? fetch : undefined);
+  if (!resolved) {
+    throw new Error("No fetch implementation is available.");
+  }
+  return resolved;
+}
+
+async function resolveHeaders(
+  headers?: HeadersInit | (() => HeadersInit | Promise<HeadersInit>)
+): Promise<HeadersInit | undefined> {
+  if (!headers) return undefined;
+  if (typeof headers === "function") {
+    return await headers();
+  }
+  return headers;
+}
+
+function readCookie(name: string): string | undefined {
+  if (typeof document === "undefined" || typeof document.cookie !== "string") {
+    return undefined;
+  }
+
+  const entry = document.cookie
+    .split(";")
+    .map((part) => part.trim())
+    .find((value) => value.startsWith(`${name}=`));
+
+  if (!entry) return undefined;
+
+  const [, rawValue = ""] = entry.split("=");
+  try {
+    return decodeURIComponent(rawValue);
+  } catch {
+    return rawValue;
+  }
+}
+
+function normalizeUsage(value: unknown): ChatbotUsage | undefined {
+  if (!value || typeof value !== "object") return undefined;
+  const usage = value as Record<string, unknown>;
+  if (
+    typeof usage.limit !== "number" ||
+    typeof usage.used !== "number" ||
+    typeof usage.remaining !== "number" ||
+    typeof usage.exhausted !== "boolean"
+  ) {
+    return undefined;
+  }
+
+  return {
+    limit: usage.limit,
+    used: usage.used,
+    remaining: usage.remaining,
+    exhausted: usage.exhausted,
+  };
+}
+
+async function parseBody(response: Response): Promise<unknown> {
+  const contentType = response.headers.get("content-type") ?? "";
+  if (contentType.includes("application/json")) {
+    return await response.json();
+  }
+
+  const text = await response.text();
+  if (!text) return undefined;
+  try {
+    return JSON.parse(text) as unknown;
+  } catch {
+    return text;
+  }
+}
+
+function normalizeError(status: number, body: unknown): ChatbotClientError {
+  const payload = body && typeof body === "object" ? (body as ErrorPayload) : undefined;
+  const fallbackMessage =
+    status === 401
+      ? "Sign in to use chatbot."
+      : status === 429
+        ? "Chatbot usage limit reached."
+        : "Chatbot request failed.";
+  const message = payload?.message ?? fallbackMessage;
+
+  return new ChatbotClientError(status, message, payload?.error, payload?.usage);
+}
+
+async function ensureCsrfToken(
+  fetcher: typeof fetch,
+  endpoint: string,
+  options: ChatbotClientOptions,
+  baseHeaders: HeadersInit
+): Promise<string | undefined> {
+  const cookieName = options.csrfCookieName ?? DEFAULT_CSRF_COOKIE_NAME;
+  const existing = readCookie(cookieName);
+  if (existing || options.bootstrapCsrf === false) {
+    return existing;
+  }
+
+  await fetcher(endpoint, {
+    method: "GET",
+    credentials: options.credentials ?? "include",
+    headers: baseHeaders,
+  });
+
+  return readCookie(cookieName);
+}
+
+export async function getChatbotUsage(
+  options: ChatbotClientOptions = {}
+): Promise<ChatbotUsageResponse> {
+  const fetcher = resolveFetch(options.fetchFn);
+  const endpoint = options.endpoint ?? DEFAULT_ENDPOINT;
+  const customHeaders = await resolveHeaders(options.headers);
+
+  const response = await fetcher(endpoint, {
+    method: "GET",
+    credentials: options.credentials ?? "include",
+    headers: {
+      Accept: "application/json",
+      ...(customHeaders ?? {}),
+    },
+  });
+
+  const body = await parseBody(response);
+  if (!response.ok) {
+    throw normalizeError(response.status, body);
+  }
+
+  if (!body || typeof body !== "object") {
+    throw new Error("Invalid chatbot usage response.");
+  }
+  const usage = normalizeUsage((body as Record<string, unknown>).usage);
+  if (!usage) {
+    throw new Error("Invalid chatbot usage response.");
+  }
+
+  return { usage };
+}
+
+export async function sendChatbotMessage(
+  payload: {
+    message: string;
+    history?: ChatMessage[];
+    systemPrompt?: string;
+  },
+  options: ChatbotClientOptions = {}
+): Promise<ChatbotReply> {
+  const fetcher = resolveFetch(options.fetchFn);
+  const endpoint = options.endpoint ?? DEFAULT_ENDPOINT;
+  const customHeaders = await resolveHeaders(options.headers);
+  const baseHeaders: HeadersInit = {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+    ...(customHeaders ?? {}),
+  };
+
+  const csrfToken = await ensureCsrfToken(fetcher, endpoint, options, baseHeaders);
+  const csrfHeader = options.csrfHeaderName ?? DEFAULT_CSRF_HEADER_NAME;
+  const requestHeaders = csrfToken
+    ? {
+        ...baseHeaders,
+        [csrfHeader]: csrfToken,
+      }
+    : baseHeaders;
+
+  const response = await fetcher(endpoint, {
+    method: "POST",
+    credentials: options.credentials ?? "include",
+    headers: requestHeaders,
+    body: JSON.stringify({
+      message: payload.message,
+      history: payload.history ?? [],
+      systemPrompt: payload.systemPrompt,
+    }),
+  });
+
+  const body = await parseBody(response);
+  if (!response.ok) {
+    throw normalizeError(response.status, body);
+  }
+
+  if (!body || typeof body !== "object") {
+    throw new Error("Invalid chatbot response.");
+  }
+
+  const content = body as Record<string, unknown>;
+  const reply = content.reply;
+  const model = content.model;
+  const usage = normalizeUsage(content.usage);
+
+  if (typeof reply !== "string" || typeof model !== "string" || !usage) {
+    throw new Error("Invalid chatbot response.");
+  }
+
+  return { reply, model, usage };
+}

package/src/index.ts

@@ -1 +1,2 @@
 export { default as ChatBot } from "./chatbot.js";
+export * from "./client.js";

package/src/styles/chatbot.module.css

@@ -1,106 +1,139 @@
-/* src/components/Chatbot.css */
 .chatbotcontainer {
   display: flex;
   flex-direction: column;
-  height: 100vh;
   width: 100%;
-  max-width: 600px;
+  max-width: 720px;
   margin: 0 auto;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  background: #f9f9f9;
+  border: 1px solid #d1d7e0;
+  border-radius: 12px;
+  background: #f7f9fc;
+  min-height: 70vh;
+  overflow: hidden;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #d1d7e0;
+  background: #eef3fb;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #1f2a3d;
+}
+
+.usage {
+  font-size: 13px;
+  font-weight: 600;
+  color: #4c5970;
+}
+
+.notice {
+  padding: 10px 16px;
+  font-size: 13px;
+  border-bottom: 1px solid #d1d7e0;
+  background: #fff8db;
+  color: #6f5200;
 }
 
 .messagesbox {
   flex: 1;
-  padding: 10px;
+  padding: 12px;
   overflow-y: auto;
-  background: #fff;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .message {
   display: flex;
-  margin-bottom: 10px;
 }
 
-.message.user {
-  justify-content: flex-end;
+.user {
+  margin-left: auto;
 }
 
-.message.system {
-  justify-content: flex-start;
+.assistant,
+.system {
+  margin-right: auto;
 }
 
 .bubble {
-  max-width: 60%;
-  padding: 10px 15px;
-  border-radius: 15px;
+  max-width: 85%;
+  padding: 10px 12px;
+  border-radius: 12px;
+  line-height: 1.4;
+  word-break: break-word;
+  white-space: pre-wrap;
   font-size: 14px;
-  line-height: 1.5;
-  position: relative;
-  word-wrap: break-word;
-}
-
-.message.user .bubble {
-  background: #007bff;
-  color: #fff;
-}
-
-.message.system .bubble {
-  background: #e9ecef;
-  color: #333;
-}
-
-.bubble::after {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
 }
 
-.message.user .bubble::after {
-  right: -10px;
-  top: 50%;
-  border-width: 10px 0 10px 10px;
-  border-color: transparent transparent transparent #007bff;
-  transform: translateY(-50%);
+.user .bubble {
+  background: #2463eb;
+  color: #ffffff;
 }
 
-.message.system .bubble::after {
-  left: -10px;
-  top: 50%;
-  border-width: 10px 10px 10px 0;
-  border-color: transparent #e9ecef transparent transparent;
-  transform: translateY(-50%);
+.assistant .bubble,
+.system .bubble {
+  background: #edf2fa;
+  color: #182230;
 }
 
 .inputbox {
   display: flex;
   align-items: center;
+  gap: 8px;
   padding: 10px;
-  border-top: 1px solid #ddd;
-  background: #fff;
+  border-top: 1px solid #d1d7e0;
+  background: #f7f9fc;
+  position: relative;
 }
 
 .inputbox input {
   flex: 1;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 20px;
+  border: 1px solid #c3cedf;
+  border-radius: 999px;
+  padding: 10px 14px;
   font-size: 14px;
 }
 
-.emojiicon, .sendicon {
-  margin-left: 10px;
+.inputbox input:disabled {
+  cursor: not-allowed;
+  opacity: 0.75;
+  background: #f1f4f9;
+}
+
+.iconButton {
+  width: 36px;
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #c3cedf;
+  border-radius: 999px;
+  background: #ffffff;
   cursor: pointer;
-  color: whitesmoke;
 }
 
-.emojiicon {
-  font-size: 20px;
+.iconButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 
+.emojiicon,
 .sendicon {
-  font-size: 20px;
-}
+  color: #2f4f95;
+  font-size: 16px;
+}
+
+.emojiPicker {
+  position: absolute;
+  right: 44px;
+  bottom: 52px;
+  z-index: 20;
+}