@websolutespa/bom-llm 0.0.1

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@websolutespa/bom-llm",
+  "version": "0.0.1",
+  "description": "LLM module of the BOM Repository",
+  "keywords": [
+    "bom",
+    "llm"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/websolutespa/bom.git"
+  },
+  "scripts": {
+    "lint": "eslint *.ts*",
+    "test": "jest",
+    "test-watch": "npm test -- --watch",
+    "coverage:integration": "npm run test -- --coverage",
+    "coverage": "run-s -c --silent coverage:*",
+    "compile": "rollup -c ./rollup.config.js --bundleConfigAsCjs",
+    "prepack": "bom prepack",
+    "postpack": "bom postpack"
+  },
+  "dependencies": {
+    "@websolutespa/bom-core": "*",
+    "@websolutespa/bom-mixer-forms": "*",
+    "@websolutespa/bom-mixer-hooks": "*",
+    "@websolutespa/bom-mixer-icons": "*",
+    "@websolutespa/bom-mixer-llm": "*",
+    "framer-motion": "^10.16.12",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.11",
+    "react": "^18.2.0",
+    "swiper": "^8.3.2",
+    "zustand": "^4.4.0"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@babel/core": "^7.21.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@svgr/rollup": "^6.5.1",
+    "@types/cross-spawn": "latest",
+    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.2.18",
+    "@websolutespa/bom-cli": "*",
+    "@websolutespa/test": "*",
+    "@websolutespa/tsconfig": "*",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-styled-components": "^2.0.7",
+    "babel-preset-react-app": "^10.0.1",
+    "cross-spawn": "latest",
+    "eslint-config-websolute": "*",
+    "eslint": "^8.46.0",
+    "node-sass": "^8.0.0",
+    "npm-run-all": "^4.1.5",
+    "raw-loader": "^4.0.2",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.11",
+    "react": "^18.2.0",
+    "rimraf": "3.0.2",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^4.0.0",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "rollup": "^3.17.3",
+    "sass-loader": "^13.2.0",
+    "sass": "^1.66.1",
+    "ts-node": "^10.9.1",
+    "tsup": "^6.7.0",
+    "typescript": "^5.1.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "prepack": {
+    "types": "./dist/types/index.d.ts",
+    "main": "./dist/esm/index.js",
+    "module": "./dist/esm/index.js",
+    "source": "./src/index.ts"
+  },
+  "postpack": {
+    "types": "./src/index.ts",
+    "main": "./src/index.ts"
+  },
+  "types": "./dist/types/index.d.ts",
+  "main": "./dist/esm/index.js",
+  "module": "./dist/esm/index.js",
+  "source": "./src/index.ts"
+}

package/src/__tests/example.test.ts

@@ -0,0 +1,8 @@
+import '@testing-library/jest-dom';
+
+describe('Example', () => {
+  it('passes', async () => {
+    const value = 'test';
+    expect(value).toEqual(value);
+  });
+});

package/src/app.scss

@@ -0,0 +1,128 @@
+@import '../../../mixer/packages/ui/src/theme/mixins/scrollbar';
+
+.llm {
+
+  html,
+  body,
+  p,
+  ol,
+  ul,
+  li,
+  dl,
+  dt,
+  dd,
+  blockquote,
+  figure,
+  fieldset,
+  legend,
+  textarea,
+  pre,
+  iframe,
+  hr,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    padding: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: 100%;
+    font-weight: normal;
+  }
+
+  ul {
+    list-style: none;
+  }
+
+  button,
+  input,
+  select {
+    margin: 0;
+    padding: 0;
+  }
+
+  button {
+    border: none;
+    text-decoration: none;
+    background: none;
+    appearance: none;
+    font-family: inherit;
+    font-style: inherit;
+    font-variant-ligatures: inherit;
+    font-variant-caps: inherit;
+    font-variant-numeric: inherit;
+    font-variant-east-asian: inherit;
+    font-weight: inherit;
+    font-stretch: inherit;
+    text-rendering: inherit;
+    letter-spacing: inherit;
+    word-spacing: inherit;
+    line-height: inherit;
+    text-transform: none;
+    text-indent: inherit;
+    text-shadow: none;
+    text-align: inherit;
+  }
+
+  html {
+    box-sizing: border-box;
+    -webkit-text-size-adjust: none;
+    color-scheme: dark light;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+
+  img,
+  video {
+    height: auto;
+    max-width: 100%;
+  }
+
+  iframe {
+    border: 0;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  td,
+  th {
+    padding: 0;
+  }
+
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    block-size: 100%;
+    block-size: 100dvb;
+    font-size: 20px;
+    line-height: 1.5;
+    font-family: system-ui, sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  &__scroller {
+    @include scrollbar(rgba(255, 255, 255, 0.3));
+  }
+}

package/src/app.tsx

@@ -0,0 +1,125 @@
+// app css
+import './app.scss';
+// llm css
+import '@websolutespa/bom-mixer-llm/src/llm/scss/style.scss';
+// imports
+import { ILayout, IPage, isBrowser, localizeItem } from '@websolutespa/bom-core';
+import { ExtraProvider, LabelProvider, LayoutProvider, PageProvider } from '@websolutespa/bom-mixer-hooks';
+import { LlmComponent, LlmProvider } from '@websolutespa/bom-mixer-llm';
+import { useMemo } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorHandler } from './error-handler';
+import label from './label.json';
+import { LlmOptions } from './types';
+
+export function App({ locale, market, ...props }: LlmOptions) {
+  const data = useMemo<PageData>(() => {
+    if (isBrowser) {
+      const htmlLang = getHtmlLang();
+      const title = document.querySelector('title');
+      const description = document.querySelector('meta[name="description"]');
+      const canonical = document.querySelector('link[rel="canonical"]');
+      return {
+        locale: locale || htmlLang?.locale || 'it',
+        market: market || htmlLang?.market || 'ww',
+        origin: window.origin,
+        canonical: canonical?.getAttribute('href') || window.location.href,
+        title: title ? title.innerText : 'Untitled',
+        description: description?.getAttribute('content') || '',
+        slug: window.location.pathname,
+      };
+    } else {
+      return {
+        locale: locale || 'it',
+        market: market || 'ww',
+        origin: '',
+        canonical: '',
+        title: 'Untitled',
+        description: '',
+        slug: '',
+      };
+    }
+  }, [locale, market]);
+  const endpoint: string =
+    props.test ?
+      'https://bom-sample-basic-web-git-bom-llm-actarian.vercel.app' :
+      'https://ws-ai-ambassador-bowl.azurewebsites.net';
+  const layout: ILayout = {
+    labels: getLabels(data.locale),
+    locale: data.locale,
+    locales: [{
+      id: data.locale, title: data.locale,
+    }],
+    market: data.market,
+    markets: [{
+      id: data.market, title: data.market,
+    }],
+    menu: {},
+    topLevelHrefs: {},
+    topLevelRoutes: {},
+  };
+  const page: IPage = {
+    locale: data.locale,
+    market: data.market,
+    title: data.title,
+    abstract: data.description,
+    category: 'uncategorized',
+    slug: data.slug,
+    href: data.canonical,
+    id: 1,
+    alternates: [],
+    breadcrumb: [],
+    canonical: data.canonical,
+  };
+  const extra = {};
+  return (
+    <ErrorBoundary FallbackComponent={ErrorHandler}>
+      <LayoutProvider layout={layout}>
+        <LabelProvider>
+          <PageProvider page={page}>
+            <ExtraProvider extra={extra}>
+              <LlmProvider {...props} endpoint={endpoint} >
+                <LlmComponent />
+              </LlmProvider>
+            </ExtraProvider>
+          </PageProvider>
+        </LabelProvider>
+      </LayoutProvider>
+    </ErrorBoundary>
+  );
+}
+
+function getLabels(locale: string) {
+  return label.map(x => {
+    const localizedItem = localizeItem(x, locale, 'en');
+    return {
+      id: localizedItem.id,
+      schema: 'label',
+      text: localizedItem.text,
+    };
+  });
+}
+
+function getHtmlLang(): { locale: string, market: string } | undefined {
+  const html = document.querySelector('html');
+  const htmlLang = html?.getAttribute('lang');
+  if (htmlLang) {
+    const segments = htmlLang.toLowerCase().split('-');
+    return {
+      locale: segments[0],
+      market: segments[1] || 'ww',
+    };
+  } else {
+    return undefined;
+  }
+}
+
+type PageData = {
+  locale: string;
+  market: string;
+  origin: string;
+  canonical: string;
+  title: string;
+  description: string;
+  slug: string;
+};

package/src/error-handler.tsx

@@ -0,0 +1,20 @@
+
+export function ErrorHandler({ error, resetErrorBoundary }: { error: any, resetErrorBoundary?: () => void }) {
+  console.log('ErrorHandler.error', error);
+  return (
+    <div style={{ minHeight: '100vh', background: '#101010', color: '#eeeeee' }}>
+      <div>
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
+          <div>Unhandled Runtime Error</div>
+          <div>{error.message}</div>
+          {error.stack && (
+            <div>{error.stack}</div>
+          )}
+          {typeof resetErrorBoundary === 'function' && (
+            <button onClick={resetErrorBoundary}>Try again?</button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './main';

package/src/label.json

@@ -0,0 +1,128 @@
+[
+  {
+    "id": "llm.back",
+    "text": {
+      "en": "Back to website",
+      "it": "Torna al sito"
+    }
+  },
+  {
+    "id": "llm.button",
+    "text": {
+      "en": "Open",
+      "it": "Avvia"
+    }
+  },
+  {
+    "id": "llm.disclaimer",
+    "text": {
+      "en": "The answers you will receive are created automatically by processing both the information on our site and other information on the web. Always check the correctness of the information provided. <a url=\"#\" target=\"_blank\">Find out how it works</a>",
+      "it": "Le risposte che riceverai sono create automaticamente elaborando sia le informazioni presenti sul nostro sito che altre informazioni presenti sul web. Controlla sempre la correttezza delle informazioni fornite. <a url=\"#\" target=\"_blank\">Scopri come funziona</a>"
+    }
+  },
+  {
+    "id": "llm.eventPretitle",
+    "text": {
+      "en": "Don't miss this event!",
+      "it": "Non perderti questo evento!"
+    }
+  },
+  {
+    "id": "llm.tellMeMore",
+    "text": {
+      "en": "Tell me more",
+      "it": "Dimmi di più"
+    }
+  },
+  {
+    "id": "llm.tellMeMoreAbout",
+    "text": {
+      "en": "Tell me more about",
+      "it": "Dimmi di più su"
+    }
+  },
+  {
+    "id": "llm.goToWebsite",
+    "text": {
+      "en": "Go to website",
+      "it": "Vai al sito"
+    }
+  },
+  {
+    "id": "llm.bookNow",
+    "text": {
+      "en": "Book now",
+      "it": "Prenota ora"
+    }
+  },
+  {
+    "id": "llm.reviews",
+    "text": {
+      "en": "reviews",
+      "it": "recensioni"
+    }
+  },
+  {
+    "id": "llm.formRequestTitle",
+    "text": {
+      "en": "Do you want me to email you all the information we talked about so you have a reminder?",
+      "it": "Vuoi che ti mandi tutte le informazioni di cui abbiamo parlato per email, così avrai un promemoria?"
+    }
+  },
+  {
+    "id": "llm.formRequestYes",
+    "text": {
+      "en": "Yes",
+      "it": "Sì"
+    }
+  },
+  {
+    "id": "llm.formRequestNo",
+    "text": {
+      "en": "No",
+      "it": "No"
+    }
+  },
+  {
+    "id": "llm.formRecapTitle",
+    "text": {
+      "en": "Please fill the form",
+      "it": "Compila le informazioni qui sotto"
+    }
+  },
+  {
+    "id": "llm.formRecapFullName",
+    "text": {
+      "en": "Full name",
+      "it": "Nome completo"
+    }
+  },
+  {
+    "id": "llm.formRecapEmail",
+    "text": {
+      "en": "Email",
+      "it": "Email"
+    }
+  },
+  {
+    "id": "llm.formRecapSend",
+    "text": {
+      "en": "Send",
+      "it": "Invia"
+    }
+  },
+  {
+    "id": "llm.formRecapPrivacy",
+    "text": {
+      "en": "I agree to be contacted for marketing activities",
+      "it": "Acconsento a essere ricontattato per attività di marketing"
+    }
+  },
+  {
+    "id": "llm.formResponseYes",
+    "text": {
+      "en": "Excellent, you will find everything in your inbox, for anything else you know where to find me, I will always be happy to talk to you. 👋",
+      "it": "Ottimo, troverai tutto nella tua casella di posta, per qualunque altra cosa sai dove potermi trovare, sarò sempre lieto di parlare con te. 👋"
+    }
+  }
+]

package/src/main.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './app';
+import { LlmOptions } from './types';
+
+export function bomLlm(props: LlmOptions): void {
+  if (!document) {
+    return;
+  }
+  const body = document.querySelector('body');
+  if (!body) {
+    return;
+  }
+  const node = document.createElement('div');
+  node.setAttribute('id', 'bom-llm');
+  body.appendChild(node);
+  ReactDOM.createRoot(node).render(
+    <React.StrictMode>
+      <App {...props} />
+    </React.StrictMode>
+  );
+}
+
+if (typeof window !== 'undefined') {
+  (window as unknown as {
+    bomLlm: typeof bomLlm;
+  }).bomLlm = bomLlm;
+}

package/src/types.ts

@@ -0,0 +1,13 @@
+import { LlmItem } from '@websolutespa/bom-mixer-llm';
+
+export type LlmDecorateUrl = (item: LlmItem) => string | void;
+
+export type LlmOptions = {
+  apiKey: string;
+  appKey: string;
+  decorateUrl?: LlmDecorateUrl;
+  locale?: string;
+  market?: string;
+  test?: boolean;
+  threadId?: string;
+};