@websolutespa/bom-mixer-llm 0.0.1

package/src/llm/scss/style.scss

@@ -0,0 +1,29 @@
+@import './vars';
+@import './mixin';
+@import './typography';
+@import './spacing';
+@import './breakpoints';
+@import './reset';
+@import './base';
+@import './layout';
+@import '../components/Trigger/style';
+@import '../components/Background/style';
+@import '../components/Main/style';
+@import '../components/Header/style';
+@import '../components/Intro/style';
+@import '../components/QuickLinks/style';
+@import '../components/Prompt/style';
+@import '../components/Text/style';
+@import '../components/Event/style';
+@import '../components/EventGroup/style';
+@import '../components/Cta/style';
+@import '../components/Poi/style';
+@import '../components/PoiGroup/style';
+@import '../components/Thread/style';
+@import '../components/Tripadvisor/style';
+@import '../components/Canvas/style';
+@import '../components/FormRequest/style';
+@import '../components/FormRecap/style';
+@import '../components/FormRecapSuccess/style';
+@import '../components/FormRecapError/style';
+@import '../components/BusyIndicator/style';

package/src/llm/utils.tsx

@@ -0,0 +1,12 @@
+type Nl2BrProps = {
+  text?: string
+};
+
+export const Nl2Br = (props: Nl2BrProps) => {
+  const lines = props.text?.split('\\n').map(function(line, n){
+    return (n == 0) ? [line] : [<br key={n} />, line];
+  });
+  return <span>{lines}</span>;
+};
+
+export const clamp = (min:number, max:number) => Math.min(Math.max(min + (window.innerWidth - 375) / (1920 - 375) * (max - min), min), max);

package/src/types.ts

@@ -0,0 +1,215 @@
+import { IMedia } from '@websolutespa/bom-core';
+
+export type LlmChunkLog = Record<string, unknown> & {
+  type: 'log';
+};
+
+export type LlmChunkError = {
+  type: 'error';
+  error: unknown;
+};
+
+export type LlmChunkInfo = {
+  type: 'info';
+  threadId: string;
+};
+
+export type LlmChunkEnd = {
+  type: 'end';
+};
+
+export type LlmChunkString = {
+  type: 'string';
+  content: string;
+};
+
+export type LlmChunkImage = {
+  type: 'image';
+  id: string;
+  src: string;
+};
+
+export type LlmChunkEvent = {
+  type: 'event';
+  id: string;
+  title: string;
+  abstract: string;
+  place: string;
+  url: string;
+  image: string;
+  date?: string;
+  time?: string;
+};
+
+export type LlmChunkEventItem = Omit<LlmChunkEvent, 'type'> & { type: 'eventItem' };
+
+export type LlmChunkEventGroup = {
+  type: 'eventGroup';
+  items: LlmChunkEventItem[];
+};
+
+export type LlmChunkPoi = {
+  type: 'poi';
+  id: string;
+  title: string;
+  abstract: string;
+  time?: string;
+  place: string;
+  url: string;
+  image: string;
+};
+
+export type LlmChunkPoiItem = Omit<LlmChunkPoi, 'type'> & { type: 'poiItem' };
+
+export type LlmChunkPoiGroup = {
+  type: 'poiGroup';
+  items: LlmChunkPoiItem[];
+};
+
+export type LlmChunkTripadvisor = {
+  type: 'tripadvisor';
+  id: string;
+  title: string;
+  rating: number;
+  reviews: number;
+  priceRange: string;
+  cuisine: string;
+  address: string;
+  url: string;
+  book: string;
+  image: string;
+};
+
+export type LlmChunkTripadvisorItem = Omit<LlmChunkTripadvisor, 'type'> & { type: 'tripadvisorItem' };
+
+export type LlmChunkTripadvisorGroup = {
+  type: 'tripadvisorGroup';
+  items: LlmChunkTripadvisorItem[];
+};
+
+export type LlmChunkFormRequest = {
+  type: 'formRequest';
+};
+
+export type LlmChunkFormRecap = {
+  type: 'formRecap';
+};
+
+export type LlmChunkFormRecapSuccess = {
+  type: 'formRecapSuccess';
+};
+
+export type LlmChunkFormRecapError = {
+  type: 'formRecapError';
+};
+
+export type LlmChunkKnownItem =
+  LlmChunkEnd
+  | LlmChunkEvent
+  | LlmChunkEventGroup
+  | LlmChunkEventItem
+  | LlmChunkError
+  | LlmChunkFormRequest
+  | LlmChunkFormRecap
+  | LlmChunkFormRecapSuccess
+  | LlmChunkFormRecapError
+  | LlmChunkImage
+  | LlmChunkInfo
+  | LlmChunkLog
+  | LlmChunkPoi
+  | LlmChunkPoiGroup
+  | LlmChunkPoiItem
+  | LlmChunkString
+  | LlmChunkTripadvisor
+  | LlmChunkTripadvisorGroup
+  | LlmChunkTripadvisorItem;
+
+export type LlmChunkUnknown = Record<string, unknown> & { type: Exclude<string, LlmChunkKnownItem['type']> };
+
+export type LlmChunkItem = LlmChunkKnownItem;
+
+export type LlmChunkType = Exclude<LlmChunkKnownItem['type'], 'string' | 'info' | 'end' | 'formRequest' | 'formRecap' | 'formRecapSuccess' | 'formRecapError'>;
+
+export type LlmItem = Extract<LlmChunkItem, { type: LlmChunkType }>;
+
+// export type ToDiscriminatedUnion<T> = { [K in keyof T]: { type: K, value: T[K] } }[keyof T];
+// type StuctureMappedType<T extends LlmChunkType> = { [K in T]: Array<LlmChunkItem<K>> };
+// export type LlmChunkItems<T extends LlmChunkType = LlmChunkType> = Record<T, (item: Extract<LlmChunkItem, { type: T }>) => string>;
+
+export type LlmChunk = string | LlmChunkItem;
+
+export type LlmCredentials = {
+  apiKey: string;
+  appKey: string;
+};
+
+export type LlmMessage = {
+  content: string;
+  role: string; // assistant, user
+};
+
+export type LlmDecodedMessage = LlmMessage & {
+  chunks: LlmChunkItem[];
+};
+
+export type StreamRequest = LlmCredentials & {
+  messages: LlmMessage[];
+  threadId?: string;
+};
+
+export type StreamResponse = {
+  chunks: LlmChunkItem[];
+  threadId: string;
+};
+
+export type LlmCard = {
+  icon?: IMedia;
+  body: string;
+  title: string;
+  message?: string;
+};
+
+export type LlmSampleInputText = {
+  id: string;
+  sampleInputText: string;
+};
+
+export type LlmContents = {
+  collapsedWelcomeText: string;
+  collapsedWelcomeTextHover?: string;
+  extendedWelcomeText: string;
+  layoutBuilder: LlmCard[];
+  logo?: IMedia;
+  logoMini?: IMedia;
+  sampleInputTexts: LlmSampleInputText[];
+  shortWelcomeText: string;
+};
+
+export type LlmThread = {
+  messages: LlmMessage[];
+  threadId: string;
+};
+
+export type LlmDecodedThread = {
+  messages: LlmDecodedMessage[];
+  threadId: string;
+};
+
+export type LlmWebhook = {
+  webhook: string;
+};
+
+export type LlmWebhooks = LlmWebhook[];
+
+export type LlmMode = 'site' | 'chat';
+
+export type LlmApp = {
+  mode: LlmMode;
+  contents: LlmContents;
+  thread?: LlmThread;
+  webhooks?: LlmWebhooks;
+};
+
+export type LlmUiStatus = {
+  open: boolean;
+};

package/src/useLlm/cors.ts

@@ -0,0 +1,124 @@
+type StaticOrigin = boolean | string | RegExp | (boolean | string | RegExp)[];
+
+type OriginFn = (origin: string | undefined, req: Request) => StaticOrigin | Promise<StaticOrigin>;
+
+interface CorsOptions {
+  allowedHeaders?: string | string[]
+  credentials?: boolean
+  exposedHeaders?: string | string[]
+  maxAge?: number
+  methods?: string | string[]
+  optionsSuccessStatus?: number
+  origin?: StaticOrigin | OriginFn
+  preflightContinue?: boolean
+}
+
+const defaultOptions: CorsOptions = {
+  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
+  optionsSuccessStatus: 204,
+  origin: '*',
+  preflightContinue: false,
+};
+
+export async function cors(request: Request, response: Response, userOptions?: CorsOptions) {
+  const options = { ...defaultOptions, ...userOptions };
+  const { headers } = response;
+  const originHeaders = await originHeadersFromReq(request, options.origin ?? false);
+  if (!originHeaders) {
+    return response;
+  }
+  // setting headers
+  const mergeHeaders = (v: string, k: string) => {
+    if (k === 'Vary') {
+      headers.append(k, v);
+    } else {
+      headers.set(k, v);
+    }
+  };
+  originHeaders.forEach(mergeHeaders);
+  if (options.credentials) {
+    headers.set('Access-Control-Allow-Credentials', 'true');
+  }
+  const exposed = Array.isArray(options.exposedHeaders)
+    ? options.exposedHeaders.join(',')
+    : options.exposedHeaders;
+  if (exposed) {
+    headers.set('Access-Control-Expose-Headers', exposed);
+  }
+  // case method options;
+  if (request.method === 'OPTIONS') {
+    if (options.methods) {
+      const methods = Array.isArray(options.methods)
+        ? options.methods.join(',')
+        : options.methods;
+      headers.set('Access-Control-Allow-Methods', methods);
+    }
+    getAllowedHeaders(request, options.allowedHeaders).forEach(mergeHeaders);
+    if (typeof options.maxAge === 'number') {
+      headers.set('Access-Control-Max-Age', String(options.maxAge));
+    }
+    if (options.preflightContinue) {
+      return response;
+    }
+    headers.set('Content-Length', '0');
+    return new Response(null, { status: options.optionsSuccessStatus, headers });
+  }
+  // case method <> option
+  return response;
+}
+
+export function initCors(options?: CorsOptions) {
+  return (request: Request, response: Response) => cors(request, response, options);
+}
+
+function isOriginAllowed(origin: string, allowedOrigin: StaticOrigin): boolean {
+  return Array.isArray(allowedOrigin)
+    ? allowedOrigin.some((x) => isOriginAllowed(origin, x))
+    : typeof allowedOrigin === 'string'
+      ? origin === allowedOrigin
+      : allowedOrigin instanceof RegExp
+        ? allowedOrigin.test(origin)
+        : !!allowedOrigin;
+}
+
+function getOriginHeaders(origin: string | undefined, allowedOrigin: StaticOrigin) {
+  const headers = new Headers();
+  if (allowedOrigin === '*') {
+    headers.set('Access-Control-Allow-Origin', '*');
+  } else if (typeof allowedOrigin === 'string') {
+    headers.set('Access-Control-Allow-Origin', allowedOrigin);
+    headers.append('Vary', 'Origin');
+  } else {
+    const allowed = isOriginAllowed(origin ?? '', allowedOrigin);
+    if (allowed && origin) {
+      headers.set('Access-Control-Allow-Origin', origin);
+    }
+    headers.append('Vary', 'Origin');
+  }
+  return headers;
+}
+
+async function originHeadersFromReq(request: Request, allowedOrigin: StaticOrigin | OriginFn) {
+  const origin = request.headers.get('Origin') || undefined;
+  allowedOrigin = typeof allowedOrigin === 'function'
+    ? await allowedOrigin(origin, request)
+    : allowedOrigin;
+  if (!allowedOrigin) {
+    return;
+  }
+  return getOriginHeaders(origin, allowedOrigin);
+}
+
+function getAllowedHeaders(request: Request, allowed?: string | string[]) {
+  const headers = new Headers();
+  if (!allowed) {
+    allowed = request.headers.get('Access-Control-Request-Headers')!;
+    headers.append('Vary', 'Access-Control-Request-Headers');
+  } else if (Array.isArray(allowed)) {
+    allowed = allowed.join(',');
+  }
+  if (allowed) {
+    headers.set('Access-Control-Allow-Headers', allowed);
+  }
+  return headers;
+}

package/src/useLlm/emitter.ts

@@ -0,0 +1,29 @@
+export type EventCallback = (...data: any[]) => void;
+
+export class Emitter {
+  events = new Map<string, EventCallback[]>();
+
+  on(event: string, callback: EventCallback) {
+    const callbacks = this.events.get(event) || [];
+    callbacks.push(callback);
+    if (!this.events.has(event)) {
+      this.events.set(event, callbacks);
+    }
+  }
+
+  off(event: string, callback: EventCallback) {
+    if (this.events.has(event)) {
+      const callbacks = this.events.get(event)!.filter((c) => c !== callback);
+      this.events.set(event, callbacks);
+    }
+  }
+
+  emit(event: string, ...data: unknown[]) {
+    if (this.events.has(event)) {
+      this.events.get(event)!.forEach((callback) => {
+        callback(...data);
+        // setTimeout(() => callback(...data), 0);
+      });
+    }
+  }
+}