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

1. Import the widget:
2. 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>
  );
};

Features

Chat Interface

• Floating button with "Ask OKMD AI" text
• Expandable chat box
• Real-time message streaming
• Support for markdown formatting in responses

Conversation Management

• Pre-defined conversation starters
• Support for regenerating responses
• Feedback system (like/dislike)

User Experience

• Character limit warnings
• Usage quota management
• Loading states
• Error handling
• Responsive design for mobile and desktop

Publish to NPM

1. Patch version

npm version patch

2. Publish to NPM

npm publish

or

npm publish --access public

License

This project is proprietary software owned by Edvisory.

Support

For support, please contact the development team at Edvisory.