@edvisory/okmd-ai-widget NPM

OKMD AI Widget

A React widget component that provides AI chat functionality with OKMD's AI service.

Features

AI Chat interface with floating button and expandable chat box
Real-time message streaming
Message history and conversation starters
File attachments support
Citations and references
Character limit warnings
Usage quota management
Like/Dislike feedback system
Responsive design

Installation

Requirements

This package has the following peer dependencies:

React ^18.3.1
React DOM ^18.3.1
@tanstack/react-query ^5.59.16
@hookform/resolvers ^3.10.0
antd ^5.21.6
axios ^1.7.7

Environment Configuration

Configure the environment variables in src/constants/env.ts:

Variable	Description	Required
NEXT_PUBLIC_APP_URL	Base URL of your application	Yes
NEXT_PUBLIC_API_ENDPOINT	API endpoint for OKMD AI service	Yes

Example configuration:

These environment variables are used for:

Authentication endpoints
API communication
Login redirects

Usage

Import the widget:
Add the widget to your React application:

Props

Prop	Type	Required	Description
apiKey	string	Yes	API key for authentication with OKMD AI service
onLogin	() => void	No	Callback function when login is required
onChatChange	(chats: ChatSessionChatMessageType[]) => void	No	Callback function when chat messages change
onClose	() => void	No	Callback function when chat box is closed
onOpen	() => void	No	Callback function when chat box is opened

Example usage in react project

import React from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; // required for react-query
import { OkmdAiWidget } from "okmd-ai-widget"; // import widget
import "@edvisory/okmd-ai-widget/dist/esm/index.css"; // import styles

const queryClient = new QueryClient({
  defaultOptions: {
    // your default options
  },
});

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <OkmdAiWidget apiKey="your-api-key" />
    </QueryClientProvider>
  );
};

Example usage in nextjs project

import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; // required for react-query
import "@edvisory/okmd-ai-widget/dist/esm/index.css"; // import styles

const OkmdAiWidget = dynamic(
  () => import("@edvisory/okmd-ai-widget").then((mod) => mod.OkmdAiWidget),
  { ssr: false }
);

const queryClient = new QueryClient({
  defaultOptions: {
    // your default options
  },
});

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <OkmdAiWidget apiKey="your-api-key" />
    </QueryClientProvider>
  );
};