@websolutespa/bom-mixer-llm 0.0.1

package/src/llm/components/Canvas/canvas.tsx

@@ -0,0 +1,257 @@
+import { isBrowser } from '@websolutespa/bom-core';
+import ArrayBuffer from 'nanogl/arraybuffer';
+import Program from 'nanogl/program';
+import { useEffect, useRef } from 'react';
+
+const vertex = `attribute vec2 aPosition;
+attribute vec2 aTexCoord;
+varying vec2 vUv;
+
+void main(void){
+    gl_Position = vec4(aPosition, 0.0, 1.0);
+    vUv = aTexCoord;
+}
+`;
+
+const fragment = `
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+varying vec2 vUv;
+
+uniform int uColor1;
+uniform int uColor2;
+uniform int uColor3;
+uniform int uColor4;
+uniform float uBlobSize;
+uniform float uCellSize;
+uniform float uNoiseSize;
+uniform float uOpacity;
+uniform float uTime;
+
+vec2 random2(vec2 st) {
+  st = vec2(dot(st, vec2(127.1, 311.7)), dot(st, vec2(269.5, 183.3)));
+  return - 1.0 + 2.0 * fract(sin(st) * 43758.5453123);
+}
+
+float noise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(mix(dot(random2(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
+  dot(random2(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
+  mix(dot(random2(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
+  dot(random2(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), u.y) * 0.5 + 0.5;
+}
+
+float gaussFunction(vec2 st, vec2 p, float r) {
+  return exp(-dot(st - p, st - p) / 2.0 / r / r);
+}
+
+vec3 hash32(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));
+  p3 += dot(p3, p3.yxz + 33.33);
+  return fract((p3.xxy + p3.yzz) * p3.zyx);
+}
+
+vec3 blob(vec2 p) {
+  vec2 i = floor(p / uCellSize);
+  vec3 c = vec3(0.0);
+  for(int x = -1; x <= 1; x ++ )
+  for(int y = -1; y <= 1; y ++ ) {
+      vec2 v = i + vec2(x, y);
+      vec3 h = hash32(v);
+      float g = gaussFunction(p / uCellSize, v + h.xy, uBlobSize);
+      float n = smoothstep(0.0, 1.0, noise(uNoiseSize * p / uCellSize / uBlobSize));
+      c += uOpacity * g * n;
+  }
+  return c;
+}
+
+float random(vec2 st) {
+  return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
+}
+
+vec3 intToColor(int color) {
+  float r = float(color / 256 / 256);
+  float g = float(color / 256 - int(r * 256.0));
+  float b = float(color - int(r * 256.0 * 256.0) - int(g * 256.0));
+  return vec3(r / 255.0, g / 255.0, b / 255.0);
+}
+
+void main(void) {
+  vec2 st = vUv;
+
+  vec2 p1 = st + vec2(cos(uTime * 0.1), sin(uTime * 0.1));
+  vec3 b1 = blob(p1);
+
+  vec2 p2 = st + 3.43 + vec2(sin(uTime * 0.2), cos(uTime * 0.2));
+  vec3 b2 = blob(p2);
+
+  vec2 p3 = st + 5.43 + vec2(cos(uTime * 0.2), cos(uTime * 0.2));
+  vec3 b3 = blob(p3);
+
+  vec3 mask = (1.0 - b1 - b2 - b3);
+
+  vec3 c1 = intToColor(uColor1);
+  vec3 c2 = intToColor(uColor2);
+  vec3 c3 = intToColor(uColor3);
+  vec3 c4 = intToColor(uColor4);
+
+  vec3 color = mask * c1;
+
+  color += b1 * c2;
+
+  color += b2 * c3;
+
+  color += b3 * c4;
+
+  vec2 n = random2(st) * 0.05;
+  color += n.x - n.y;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+
+const shader = {
+  vertex,
+  fragment,
+};
+
+export type ShaderProps = {
+  color1?: string;
+  color2?: string;
+  color3?: string;
+  color4?: string;
+  blobSize?: number;
+  cellSize?: number;
+  noiseSize?: number;
+  opacity?: number;
+};
+
+const initWebGl = (
+  canvas: HTMLCanvasElement,
+  {
+    color1 = '#003c8c',
+    color2 = '#73c3ff',
+    color3 = '#96dca0',
+    color4 = '#dcdc3c',
+    blobSize = 0.3,
+    cellSize = 0.6,
+    noiseSize = 0.3,
+    opacity = 0.5,
+  }: ShaderProps
+) => {
+  const gl = canvas.getContext('webgl');
+  if (!gl) {
+    throw 'cannot initialize gl';
+  }
+
+  const pixelRatio = window.devicePixelRatio;
+  const size = {
+    width: 1,
+    height: 1,
+  };
+
+  const shouldRenderSingleFrame = isApple();
+  let canRender = true;
+  let isDirty = true;
+  let rafID: number | null = null;
+
+  const onResize = ([entry]: ResizeObserverEntry[]) => {
+    const canvasWidth = entry.contentRect.width;
+    const canvasHeight = entry.contentRect.height;
+    canvas.width = Math.round(canvasWidth * pixelRatio);
+    canvas.height = Math.round(canvasHeight * pixelRatio);
+    size.width = gl.drawingBufferWidth;
+    size.height = gl.drawingBufferHeight;
+    isDirty = true;
+  };
+
+  const resizeObserver = new ResizeObserver(onResize);
+  resizeObserver.observe(canvas);
+
+  const quadData = new Float32Array([-1, 3, 0, 2, -1, -1, 0, 0, 3, -1, 2, 0]);
+  const quad = new ArrayBuffer(gl, quadData);
+  quad.attrib('aPosition', 2, gl.FLOAT);
+  quad.attrib('aTexCoord', 2, gl.FLOAT);
+
+  const program = new Program(gl, shader.vertex, shader.fragment);
+
+  const render = (time = 0) => {
+    if (!canRender) {
+      return;
+    }
+
+    if (!isDirty) {
+      rafID = window.requestAnimationFrame(render);
+      return;
+    }
+
+    gl.viewport(0, 0, size.width, size.height);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    program.use();
+    if (time === 0) {
+      program.uColor1(parseInt(color1.replace('#', ''), 16));
+      program.uColor2(parseInt(color2.replace('#', ''), 16));
+      program.uColor3(parseInt(color3.replace('#', ''), 16));
+      program.uColor4(parseInt(color4.replace('#', ''), 16));
+      program.uBlobSize(blobSize);
+      program.uCellSize(cellSize);
+      program.uNoiseSize(noiseSize);
+      program.uOpacity(opacity);
+    }
+    program.uTime(time * 0.001);
+
+    quad.attribPointer(program);
+    quad.drawTriangles();
+
+    isDirty = !shouldRenderSingleFrame;
+
+    rafID = window.requestAnimationFrame(render);
+  };
+
+  setTimeout(render, 0);
+
+  const dispose = () => {
+    canRender = false;
+    if (rafID) {
+      window.cancelAnimationFrame(rafID);
+    }
+    resizeObserver.disconnect();
+    program.dispose();
+  };
+
+  return dispose;
+};
+
+export function Canvas() {
+  const ref = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (isBrowser && ref.current) {
+      const dispose = initWebGl(ref.current, {});
+      return () => dispose();
+    } else {
+      return undefined;
+    }
+  }, []);
+
+  return <canvas className="llm__canvas" ref={ref} />;
+}
+
+function isApple() {
+  return [
+    'iPad Simulator',
+    'iPhone Simulator',
+    'iPod Simulator',
+    'iPad',
+    'iPhone',
+    'iPod',
+  ].includes(navigator.platform) ||
+    (navigator.platform.indexOf('Mac') === 0) ||
+    (navigator.userAgent.includes('Mac'));
+}

package/src/llm/components/Chunk/chunk.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { LlmChunkItem } from '../../../types';
+import { Event } from '../Event/event';
+import { EventGroup } from '../EventGroup/eventgroup';
+import { FormRecap } from '../FormRecap/FormRecap';
+import { FormRecapError } from '../FormRecapError/FormRecapError';
+import { FormRecapSuccess } from '../FormRecapSuccess/FormRecapSuccess';
+import { FormRequest } from '../FormRequest/FormRequest';
+import { Poi } from '../Poi/poi';
+import { PoiGroup } from '../PoiGroup/poigroup';
+import { Text } from '../Text/text';
+import { TripAdvisorGroup } from '../Tripadvisor/tripadvisor';
+
+export type ChunkProps = {
+  item: LlmChunkItem;
+  index: number;
+  total: number;
+};
+
+export const Chunk: React.FC<ChunkProps> = ({
+  item,
+  index,
+  total,
+}: ChunkProps) => {
+  switch (item.type) {
+    case 'string': {
+      return item.content.length > 0 && (
+        <Text body={item.content} disclaimer={index === 0} />
+      );
+    }
+    case 'event':
+    case 'eventItem': {
+      return (
+        <Event {...item} />
+      );
+    }
+    case 'eventGroup':
+      return (
+        <EventGroup {...item} />
+      );
+    case 'poi':
+    case 'poiItem': {
+      return (
+        <Poi {...item} />
+      );
+    }
+    case 'poiGroup':
+      return (
+        <PoiGroup {...item} />
+      );
+    case 'tripadvisorGroup':
+      return (
+        <TripAdvisorGroup {...item} />
+      );
+    case 'formRequest':
+      return (
+        <FormRequest last={index === total - 1} />
+      );
+    case 'formRecap':
+      return (
+        <FormRecap />
+      );
+    case 'formRecapSuccess':
+      return (
+        <FormRecapSuccess />
+      );
+    case 'formRecapError':
+      return (
+        <FormRecapError />
+      );
+    case 'image':
+      return (
+        <img src={item.src as string} />
+      );
+    default:
+      return (
+        <code>{JSON.stringify(item)}</code>
+      );
+  }
+};

package/src/llm/components/Cta/_style.scss

@@ -0,0 +1,72 @@
+.llm {
+  & &__cta {
+    @include text(cta-4);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: spacing(6xs);
+    color: var(--llm-color-ui-white);
+    overflow: hidden;
+    white-space: nowrap;
+    transition: opacity 0.3s;
+
+    @include hover {
+      text-decoration: underline;
+      opacity: 0.7;
+    }
+  }
+
+  & .llm__cta--button,
+  & .llm__cta--submit {
+    @include text(cta-3);
+    background: var(--llm-color-ui-2);
+    color: var(--llm-color-ui-1);
+    height: 42px;
+    font-style: normal;
+    margin: 0;
+    padding: 0 spacing(xs);
+    border-radius: 50px;
+    overflow: hidden;
+    text-decoration: none;
+    cursor: pointer;
+
+    .llm__background {
+      z-index: 1;
+      background: none;
+
+      .llm__background-noise {
+        display: none;
+      }
+
+      .llm__background-shade {
+        opacity: 1;
+      }
+    }
+
+    >span {
+      z-index: 2;
+      position: relative;
+    }
+  }
+
+  & .llm__cta--simple {
+    @include text(cta-3);
+    padding: 0 spacing(xs);
+    height: 42px;
+    background: linear-gradient(rgba(154, 154, 154, 0.2) 10%,
+        rgba(221, 221, 221, 0.1) 80%);
+    border: 1px solid rgba(237, 237, 237, 0.3);
+    backdrop-filter: blur(20px);
+    color: var(--llm-color-ui-white);
+    font-style: normal;
+    border-radius: 12px;
+    overflow: hidden;
+    text-decoration: none;
+    cursor: pointer;
+
+    >span {
+      z-index: 2;
+      position: relative;
+    }
+  }
+}

package/src/llm/components/Cta/cta.tsx

@@ -0,0 +1,33 @@
+import { getClassNames } from '@websolutespa/bom-core';
+import { IconLlmArrowRight } from '@websolutespa/bom-mixer-icons';
+import { Background } from '../Background/background';
+
+export type LlmCtaType = 'button' | 'text' | 'simple';
+
+export type LlmCta = {
+  type: string;
+  label: string;
+  target?: '_blank' | '_self';
+  url?: string;
+  onClick?: () => void;
+};
+
+export const Cta = (props: LlmCta) => {
+  const onClick = () => {
+    if (typeof props.onClick === 'function') {
+      props.onClick();
+    }
+  };
+  const bg = props.type == 'button' || props.type == 'submit' ? <Background /> : '';
+  const icon = props.type == 'text' ? <IconLlmArrowRight /> : '';
+  const classNames = getClassNames('llm__cta', `llm__cta--${props.type}`);
+  return props.url ? (
+    <a className={classNames} href={props.url} target={props.target}>
+      {bg}<span>{props.label}</span>{icon}
+    </a>
+  ) : (
+    <button className={classNames} onClick={() => onClick()} type={props.type == 'button' || props.type == 'submit' ? props.type : undefined}>
+      {bg}<span>{props.label}</span>{icon}
+    </button>
+  );
+};

package/src/llm/components/Event/_style.scss

@@ -0,0 +1,144 @@
+.llm {
+  & &__event-inner {
+    border-radius: 5px;
+    background: rgba(0, 60, 140, 0.8);
+    box-shadow: -1px 1px 30px 0px rgba(0, 0, 0, 0.2);
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column-reverse;
+    justify-content: flex-end;
+
+    @include bp(lg) {
+      padding-bottom: spacing(2xs);
+    }
+  }
+
+  & &__event-media {
+    position: relative;
+  }
+
+  & &__event-asset {
+    @include imgPad(2, 1);
+  }
+
+  & &__event-content {
+    display: flex;
+    flex-direction: column;
+    padding: spacing(2xs);
+    gap: spacing(4xs);
+    height: 100%;
+  }
+
+  & &__event-pretitle {
+    @include text(label-1);
+    text-transform: uppercase;
+  }
+
+  & &__event-title {
+    @include text(heading-1);
+  }
+
+  & &__event-body {
+    @include text(body-5);
+  }
+
+  & &__event-location {
+    @include text(cta-2);
+    display: flex;
+    align-items: center;
+    gap: spacing(6xs);
+    padding-top: spacing(4xs);
+
+    svg {
+      color: var(--llm-color-ui-4);
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  & &__event-ctas {
+    display: flex;
+    gap: spacing(3xs);
+    padding-top: spacing(5xs);
+    margin-top: auto;
+  }
+
+  & &__event-tags {
+    @include fill();
+    padding: spacing(5xs);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  & &__event-tag {
+    padding: spacing(6xs);
+    border-radius: 2px;
+    @include text(label-1);
+  }
+
+  & &__event-time {
+    background: var(--llm-color-ui-7);
+  }
+
+  & &__event-date {
+    background: var(--llm-color-ui-1);
+  }
+
+  & &__event--event {
+    margin-top: spacing(xl);
+
+    .llm {
+      &__event-inner {
+        @include bp(sm) {
+          flex-direction: row;
+        }
+
+        @include bp(lg) {
+          background: none;
+          box-shadow: none;
+        }
+      }
+
+      &__event-content {
+        @include bp(sm) {
+          width: 50%;
+        }
+
+        @include bp(lg) {
+          padding: spacing(2xs) spacing(m);
+        }
+      }
+
+      &__event-title {
+        @include bp(lg) {
+          @include text(display-1);
+        }
+      }
+
+      &__event-body {
+        @include bp(lg) {
+          @include text(body-1);
+        }
+      }
+
+      &__event-media {
+        @include bp(sm) {
+          width: 50%;
+        }
+      }
+
+      &__event-asset {
+        @include bp(sm) {
+          height: 100%;
+
+          &:after {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

package/src/llm/components/Event/event.tsx

@@ -0,0 +1,70 @@
+import { getClassNames, isBrowser } from '@websolutespa/bom-core';
+import { useLabel } from '@websolutespa/bom-mixer-hooks';
+import { IconLlmPin } from '@websolutespa/bom-mixer-icons';
+import { LlmChunkEvent, LlmChunkEventItem } from '../../../types';
+import { useLlm } from '../../../useLlm/useLlm';
+import { Cta } from '../Cta/cta';
+
+export const Event = (props: LlmChunkEventItem | LlmChunkEvent) => {
+  const label = useLabel();
+  const { send, decorateUrl } = useLlm(state => state.actions);
+  const onTellMeMore = async () => {
+    const prompt = `${label('llm.tellMeMoreAbout')} ${props.title}`;
+    await send(prompt, (response) => {
+      // console.log('Prompt.onChunk', response.chunks);
+    }, (response) => {
+      // console.log('Prompt.onEnd', response);
+    });
+  };
+  const onGoToWebsite = async () => {
+    if (isBrowser) {
+      const url = await decorateUrl(props, props.url);
+      window.open(url, '_blank');
+    }
+  };
+  const classNames = getClassNames('llm__event', { [`llm__event--${props.type}`]: !!props.type });
+  return (
+    <div className={classNames}>
+      <div className="llm__event-inner">
+        <div className="llm__event-content">
+          {props.type == 'event' && <div className="llm__event-pretitle">
+            {label('llm.eventPretitle')}
+          </div>}
+          {props.title && (
+            <div className="llm__event-title" dangerouslySetInnerHTML={{ __html: props.title }} />
+          )}
+          {props.abstract && (
+            <div className="llm__event-body" dangerouslySetInnerHTML={{ __html: props.abstract }} />
+          )}
+          {props.place && (
+            <div className="llm__event-location">
+              <IconLlmPin /> {props.place}
+            </div>
+          )}
+          <div className="llm__event-ctas">
+            <Cta type="button" label={label('llm.tellMeMore')} onClick={onTellMeMore} />
+            <Cta type="text" label={label('llm.goToWebsite')} onClick={onGoToWebsite} />
+          </div>
+        </div>
+        {props.image && (
+          <div className="llm__event-media">
+            <div className="llm__event-asset">
+              <img src={props.image} alt={props.title} />
+            </div>
+            {(props.time || props.date) && (
+              <div className="llm__event-tags">
+                {props.date && (
+                  <div className="llm__event-tag llm__event-date">{props.date}</div>
+                )}
+                {props.time && (
+                  <div className="llm__event-tag llm__event-time">{props.time}</div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+

package/src/llm/components/EventGroup/_style.scss

@@ -0,0 +1,60 @@
+.llm {
+  & &__events {
+    width: 100%;
+
+    .swiper {
+      position: relative;
+      overflow: visible;
+      padding-top: spacing(2xl);
+    }
+
+    .swiper-slide {
+      height: auto;
+    }
+
+    .llm__event-inner {
+      padding-bottom: 0;
+    }
+  }
+
+  & &__events-slide {
+    height: auto;
+
+    .llm__event {
+      height: 100%;
+    }
+  }
+
+  & &__events-nav {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: var(--llm-color-ui-white);
+    display: flex;
+    gap: spacing(4xs);
+
+    @include bp(md) {
+      right: 0;
+      left: auto;
+    }
+
+    button {
+      color: currentColor;
+      cursor: pointer;
+
+      &.swiper-button-disabled {
+        opacity: 0.2;
+        cursor: pointer;
+      }
+
+      &.swiper-button-lock {
+        display: none;
+      }
+
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+}