@clikvn/agent-widget-embedded 0.0.1-dev

package/src/services/chat.service.ts

@@ -0,0 +1,164 @@
+import FlowiseClient, { StreamResponse } from '../models/FlowiseClient';
+import {
+  API_CHAT_MESSAGE,
+  API_CHATS,
+  API_CREATE_ATTACHMENTS,
+  API_PREDICTION,
+  API_VERSION,
+} from './apis';
+import { ChatRequestType, ChatType } from '../types/chat.type';
+import { CommonChatType } from '../types/common.type';
+import {
+  AttachmentUploadResult,
+  ChatMessageType,
+  PredictionData,
+} from '../types/flowise.type';
+import { request } from '../utils/requestUtils';
+
+export const createChat = async ({
+  accessToken,
+  req,
+  apiHost,
+}: {
+  accessToken?: string;
+  req: ChatRequestType;
+  apiHost: string;
+}): Promise<ChatType> => {
+  const url = accessToken ? `${API_CHATS}` : `${API_VERSION}${API_CHATS}`;
+  let headers: any = {
+    'Content-Type': 'application/json',
+  };
+  if (accessToken) {
+    headers = {
+      ...headers,
+      Authorization: `Bearer ${accessToken}`,
+    };
+  }
+
+  return request({
+    host: apiHost,
+    url,
+    headers,
+    method: 'POST',
+    body: JSON.stringify(req),
+  });
+};
+
+export const predict = async ({
+  accessToken,
+  req,
+  onUpdate,
+  apiHost,
+}: {
+  accessToken?: string;
+  req: PredictionData;
+  apiHost: string;
+  onUpdate?: (chunk: StreamResponse) => void;
+}): Promise<StreamResponse[]> => {
+  const url = accessToken
+    ? `${API_PREDICTION}`
+    : `${API_VERSION}${API_PREDICTION}`;
+  const result: any[] = [];
+  const flowise = new FlowiseClient({
+    baseUrl: url,
+    accessToken: accessToken,
+    host: apiHost,
+  });
+
+  try {
+    const completion: any = await flowise.createPrediction(req);
+    for await (const chunk of completion) {
+      result.push(chunk);
+      onUpdate?.(chunk);
+    }
+  } catch (error) {
+    console.error('Error:', error);
+  }
+
+  return result;
+};
+
+export const getChatMessage = async ({
+  accessToken,
+  chatId,
+  apiHost,
+}: {
+  accessToken?: string;
+  chatId: string;
+  apiHost: string;
+}): Promise<ChatMessageType[]> => {
+  const headers = accessToken
+    ? {
+        Authorization: `Bearer ${accessToken}`,
+        'Content-Type': 'application/json',
+      }
+    : {};
+
+  const url = accessToken
+    ? `${API_CHAT_MESSAGE}/${chatId}`
+    : `${API_VERSION}${API_CHAT_MESSAGE}/${chatId}`;
+
+  return request({
+    host: apiHost,
+    url,
+    headers,
+    method: 'GET',
+  });
+};
+
+export const createAttachments = async ({
+  accessToken,
+  chatId,
+  body,
+  apiHost,
+}: {
+  accessToken?: string;
+  chatId: string;
+  apiHost: string;
+  body: any;
+}): Promise<AttachmentUploadResult[]> => {
+  const headers = accessToken
+    ? {
+        Authorization: `Bearer ${accessToken}`,
+        // 'Content-Type': 'application/json',
+      }
+    : {};
+  const url = accessToken
+    ? `${API_CREATE_ATTACHMENTS}/${chatId}`
+    : `${API_VERSION}${API_CREATE_ATTACHMENTS}/${chatId}`;
+
+  return request({
+    host: apiHost,
+    url,
+    headers,
+    method: 'POST',
+    body,
+  });
+};
+
+export const getById = async ({
+  accessToken,
+  id,
+  apiHost,
+}: {
+  accessToken?: string;
+  id: string;
+  apiHost: string;
+}): Promise<CommonChatType> => {
+  const headers = accessToken
+    ? {
+        Authorization: `Bearer ${accessToken}`,
+        'Content-Type': 'application/json',
+      }
+    : {};
+  const url = accessToken
+    ? `${API_CHATS}/${id}`
+    : `${API_VERSION}${API_CHATS}/${id}`;
+
+  return request({
+    host: apiHost,
+    url,
+    headers,
+    method: 'GET',
+  });
+};

package/src/types/bot.type.ts

@@ -0,0 +1,10 @@
+export interface BotType {
+  id: string;
+  created: string;
+  lastModifiedDate: string;
+  name: string;
+  chatflowId: string;
+  chatflowConfig: any;
+  hidden: boolean;
+  avatar: string;
+}

package/src/types/chat.type.ts

@@ -0,0 +1,11 @@
+import { CommonChatType } from './common.type';
+import { UserType } from './user.type';
+
+export interface ChatType extends CommonChatType {
+  user: UserType;
+}
+
+export interface ChatRequestType {
+  title: string;
+  chatflowId?: string;
+}

package/src/types/common.type.ts

@@ -0,0 +1,11 @@
+import { BotType } from './bot.type';
+
+export interface CommonChatType {
+  id: string;
+  created?: Date;
+  lastModifiedDate?: Date;
+  title: string;
+  chatflowId: string;
+  type: 'PRIVATE' | 'ANONYMOUS';
+  bot: BotType;
+}

package/src/types/flowise.type.ts

@@ -0,0 +1,99 @@
+export type MessageRoleType = 'apiMessage' | 'userMessage';
+
+export interface PredictionData {
+  chatflowId?: string;
+  question: string;
+  overrideConfig?: Record<string, any>;
+  chatId?: string;
+  streaming?: boolean;
+  history?: IMessage[];
+  uploads?: IFileUpload[];
+  leadEmail?: string;
+  action?: IAction;
+  language?: string;
+}
+
+export interface ChatMessageType {
+  action?: IAction;
+  artifacts?: any;
+  chatId?: string;
+  chatType?: string;
+  chatflowid?: string;
+  content?: string;
+  createdDate?: string | Date;
+  followUpPrompts?: any;
+  id?: string;
+  leadEmail?: string;
+  role: MessageRoleType;
+  sessionId?: string;
+  usedTools?: ToolUsage[];
+  sourceDocuments?: SourceDocument[];
+  fileUploads?: IFileUpload[];
+  fileAnnotations?: FileAnnotation[];
+  agentReasoning?: AgentReasoning[];
+}
+
+export interface IAction {
+  id?: string;
+  elements?: Array<{
+    type: string;
+    label: string;
+  }>;
+  mapping?: {
+    approve: string;
+    reject: string;
+    toolCalls: any[];
+  };
+}
+
+export interface IFileUpload {
+  tempId?: string;
+  data?: string;
+  type: string;
+  name: string;
+  mime: string;
+}
+
+export interface IMessage {
+  message: string;
+  type: MessageRoleType;
+  role?: MessageRoleType;
+  content?: string;
+}
+
+export interface ToolUsage {
+  tool: string;
+  toolInput: {
+    input: string;
+  };
+  toolOutput: string;
+}
+
+export interface SourceDocument {
+  pageContent: string;
+  metadata: {
+    author: string;
+    date: string;
+  };
+}
+
+export interface AgentReasoning {
+  agentName: string;
+  messages: string[];
+  nodeName: string;
+  nodeId: string;
+  usedTools: ToolUsage[];
+  sourceDocuments: SourceDocument[];
+}
+
+export interface FileAnnotation {
+  filePath: string;
+  fileName: string;
+}
+
+export interface AttachmentUploadResult {
+  name: string;
+  mimeType: string;
+  size: string;
+  content: string;
+}

package/src/types/user.type.ts

@@ -0,0 +1,15 @@
+import { CommonChatType } from './common.type';
+
+export interface UserType {
+  id: string;
+  created?: Date;
+  lastModifiedDate?: Date;
+  phoneNumber?: string;
+  name?: string;
+  email: string;
+  userClik: number;
+  chats?: CommonChatType[];
+
+  user?: number;
+  authorities?: string[];
+}

package/src/utils/commonUtils.ts

@@ -0,0 +1,47 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};
+
+export function getLocalStorage(key: string) {
+  if (typeof window !== 'undefined') {
+    return JSON.parse(localStorage.getItem(key) || '[]');
+  }
+  return [];
+}
+
+export function generateUUID(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+export const generateExtendedFileName = (originalFileName: string) => {
+  // Extract the name and extension from the original file name
+  const dotIndex = originalFileName.lastIndexOf('.');
+  const baseName =
+    dotIndex === -1
+      ? originalFileName
+      : originalFileName.substring(0, dotIndex);
+  const extension = dotIndex === -1 ? '' : originalFileName.substring(dotIndex);
+
+  // Get the current date and time
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are 0-11
+  const day = String(now.getDate()).padStart(2, '0');
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  const seconds = String(now.getSeconds()).padStart(2, '0');
+
+  // Create the new unique file name
+  return `${baseName}_${year}${month}${day}_${hours}${minutes}${seconds}${extension}`;
+};
+
+export const sleep = async (duration: number): Promise<void> => {
+  return new Promise((resolve) => setTimeout(resolve, duration));
+};

package/src/utils/functionUtils.ts

@@ -0,0 +1,17 @@
+export const nonNull = (obj: any): boolean => {
+  return obj !== null && obj !== undefined;
+};
+
+export const toQuery = (params: any, delimiter = '&') => {
+  const keys = Object.keys(params);
+
+  return keys.reduce((str, key, index) => {
+    let query = `${str}${key}=${params[key]}`;
+
+    if (index < keys.length - 1) {
+      query += delimiter;
+    }
+
+    return query;
+  }, '');
+};

package/src/utils/requestUtils.ts

@@ -0,0 +1,113 @@
+import { BE_API, LANGUAGE_HEADER } from '../commons/constants';
+import { processTextStream } from './streamUtils';
+
+type RequestPropsTypes = {
+  host?: string;
+  url?: string;
+  method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
+  streamProtocol?: 'data' | 'text';
+  onStreamUpdate?: (chunks: { content: string }[]) => void;
+  onStreamFinish?: (result: { content: string }) => void;
+  [x: string]: any;
+};
+
+const defaultHeaders = { 'Content-Type': 'application/json' };
+
+export const request = async (props: RequestPropsTypes): Promise<any> => {
+  const {
+    host = BE_API,
+    url = '',
+    method = 'GET',
+    headers = { ...defaultHeaders, ...props.headers },
+    params,
+    streamProtocol,
+    onStreamUpdate,
+    onStreamFinish,
+    ...options
+  } = props;
+  let apiLanguage: string = LANGUAGE_HEADER.en;
+  if (headers?.language) {
+    apiLanguage = LANGUAGE_HEADER[headers.language];
+  }
+
+  const customHeader = { ...headers, language: apiLanguage };
+  const requestInit = {
+    method,
+    headers: customHeader,
+    ...options,
+  };
+
+  let queryString = '';
+  let apiUrl = '';
+
+  // Generate query string if params exist
+  if (!!params && !!Object.keys(params).length) {
+    queryString = Object.keys(params)
+      .filter((key) => !!params[key])
+      .map((key) => {
+        const val: string[] | string = params[key];
+        if (Array.isArray(val)) {
+          return val
+            .map((v) => `${encodeURIComponent(key)}=${encodeURIComponent(v)}`)
+            .join('&');
+        }
+
+        return `${encodeURIComponent(key)}=${encodeURIComponent(val)}`;
+      })
+      .join('&');
+
+    apiUrl = `${url}?${queryString}`;
+  }
+
+  try {
+    const response = await fetch(`${host}${apiUrl || url}`, {
+      ...requestInit,
+    });
+
+    if (!response.ok) {
+      console.error(
+        new Error(`API request failed with status ${response.status}`)
+      );
+      return null;
+    }
+
+    if (!response.body) {
+      console.error(new Error('The response body is empty.'));
+      return null;
+    }
+
+    if (!streamProtocol) {
+      return response.json();
+    }
+
+    switch (streamProtocol) {
+      case 'text': {
+        const resultMessage = {
+          content: '',
+        };
+
+        await processTextStream({
+          stream: response.body as any,
+          onTextPart: (chunk) => {
+            resultMessage.content += chunk;
+
+            // note: creating a new message object is required for Solid.js streaming
+            onStreamUpdate?.([{ ...resultMessage }]);
+          },
+        });
+
+        // in text mode, we don't have usage information or finish reason:
+        onStreamFinish?.(resultMessage);
+        return;
+      }
+
+      default: {
+        console.error(new Error(`Unknown stream protocol: ${streamProtocol}`));
+        return null;
+      }
+    }
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};

package/src/utils/streamUtils.ts

@@ -0,0 +1,18 @@
+export const processTextStream = async ({
+  stream,
+  onTextPart,
+}: {
+  stream: ReadableStream<Uint8Array>;
+  onTextPart: (chunk: string) => Promise<void> | void;
+}): Promise<void> => {
+  const reader = stream.pipeThrough(new TextDecoderStream()).getReader();
+
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) {
+      break;
+    }
+    await onTextPart(value);
+  }
+};

package/src/web.ts

@@ -0,0 +1,6 @@
+import { parseAgentVoice, injectAgentVoiceInWindow } from './window';
+
+const agentVoice = parseAgentVoice();
+injectAgentVoiceInWindow(agentVoice);
+
+export default agentVoice;

package/src/window.ts

@@ -0,0 +1,55 @@
+import { agentWidgetElementName } from './constants';
+import { registerWebComponents } from './register';
+import { EVENT_TYPE } from './models';
+
+let elementUsed: Element | undefined;
+
+type VoiceAgentWidget = {
+  apiHost: string;
+  agentId: string;
+  overrideConfig?: {
+    chatId?: string | undefined;
+  } & Record<string, unknown>;
+  theme?: {
+    avatar?: string;
+  } & Record<string, unknown>;
+  listeners?: Record<EVENT_TYPE, (props: any) => void>;
+};
+export const initWidget = (props: VoiceAgentWidget & { id?: string }) => {
+  destroy();
+  const element: any = props.id
+    ? document.getElementById(props.id)
+    : document.querySelector(agentWidgetElementName);
+  if (!element) throw new Error(`${agentWidgetElementName} element not found.`);
+  if (customElements.get(agentWidgetElementName)) {
+    element.updateAttributes(props);
+  } else {
+    Object.assign(element, props);
+    registerWebComponents();
+  }
+};
+
+export const destroy = () => {
+  elementUsed?.remove();
+};
+
+type AgentWidget = {
+  initWidget: typeof initWidget;
+  destroy: typeof destroy;
+};
+
+declare const window:
+  | {
+      AgentWidget: AgentWidget | undefined;
+    }
+  | undefined;
+
+export const parseAgentVoice = () => ({
+  initWidget,
+  destroy,
+});
+
+export const injectAgentVoiceInWindow = (agent: AgentWidget) => {
+  if (typeof window === 'undefined') return;
+  window.AgentWidget = { ...agent };
+};

package/tailwind.config.cjs

@@ -0,0 +1,122 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+function rem2px(input, fontSize = 16) {
+  if (input == null) {
+    return input;
+  }
+  switch (typeof input) {
+    case 'object':
+      if (Array.isArray(input)) {
+        return input.map((val) => rem2px(val, fontSize));
+      }
+      // eslint-disable-next-line no-case-declarations
+      const ret = {};
+      for (const key in input) {
+        ret[key] = rem2px(input[key], fontSize);
+      }
+      return ret;
+    case 'string':
+      return input.replace(
+        /(\d*\.?\d+)rem$/,
+        (_, val) => `${parseFloat(val) * fontSize}px`
+      );
+    case 'function':
+      return eval(
+        input
+          .toString()
+          .replace(
+            /(\d*\.?\d+)rem/g,
+            (_, val) => `${parseFloat(val) * fontSize}px`
+          )
+      );
+    default:
+      return input;
+  }
+}
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['class'],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    ...rem2px(defaultTheme),
+    fontFamily: {
+      sans: ['Be Vietnam Pro', 'sans-serif'],
+      mono: ['Be Vietnam Pro', 'sans-serif'],
+    },
+    extend: {
+      keyframes: {
+        'fade-in': {
+          '0%': {
+            opacity: '0',
+          },
+          '100%': {
+            opacity: '1',
+          },
+        },
+      },
+      animation: {
+        'fade-in': 'fade-in 0.3s ease-out',
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        chart: {
+          1: 'hsl(var(--chart-1))',
+          2: 'hsl(var(--chart-2))',
+          3: 'hsl(var(--chart-3))',
+          4: 'hsl(var(--chart-4))',
+          5: 'hsl(var(--chart-5))',
+        },
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))',
+        },
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
+};