Website adjustments

nlxai · Dec 12, 2023 · b2cf8ba · b2cf8ba
1 parent 8db5724
commit b2cf8ba
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 48 deletions.
diff --git a/packages/voice-compass/src/index.ts b/packages/voice-compass/src/index.ts
@@ -4,11 +4,11 @@ export interface Session {
   conversationId: string;
   journeyId: string;
   languageCode?: string;
-  previousStepId?: string;
+  lastUpdate: Update | null;
 }
 
 // Initial configuration used when creating a journey manager
-interface Config {
+export interface Config {
   apiKey: string;
   conversationId: string;
   journeyId: string;
@@ -21,14 +21,22 @@ interface Config {
 
 export interface StepData {
   stepId?: string;
-  context?: object;
+  context?: Record<string, any>;
 }
 
+export type Context = Record<string, any>;
+
 // The journey manager object
 export interface VoiceCompass {
   updateStep: (data: StepData) => Promise<StepUpdate>;
   changeJourneyId: (journeyId: string) => void;
-  getLastStepId: () => string | null;
+  getLastUpdate: () => Update | null;
+}
+
+export interface Update {
+  stepId: string;
+  journeyId: string;
+  context?: Context;
 }
 
 export interface StepUpdate {
@@ -45,21 +53,22 @@ export const create = (config: Config): VoiceCompass => {
 
   if (!conversationId) {
     console.warn(
-      'No contact ID provided. Please call the Voice Compass client `create` method with a `conversationId` field extracted from the URL. Example code: `new URLSearchParams(window.location.search).get("cid")`'
+      'No contact ID provided. Please call the Voice Compass client `create` method with a `conversationId` field extracted from the URL. Example code: `new URLSearchParams(window.location.search).get("cid")`',
     );
   }
 
   const apiUrl = config.dev ? devApiUrl : prodApiUrl;
 
-  let previousStepId: string | undefined = undefined;
+  let lastUpdate: Update | null = null;
+
   let currentJourneyId: string = config.journeyId;
 
   const saveSession = () => {
     config.onSessionUpdate?.({
       conversationId: config.conversationId,
       journeyId: currentJourneyId,
-      previousStepId,
-      languageCode: config.languageCode
+      lastUpdate,
+      languageCode: config.languageCode,
     });
   };
 
@@ -70,22 +79,22 @@ export const create = (config: Config): VoiceCompass => {
       ...stepData,
       conversationId,
       journeyId: currentJourneyId,
-      languageCode: config.languageCode
+      languageCode: config.languageCode,
     };
 
     return fetch(`${apiUrl}/track`, {
       method: "POST",
       headers: {
-        "x-api-key": config.apiKey
+        "x-api-key": config.apiKey,
       },
-      body: JSON.stringify(payload)
+      body: JSON.stringify(payload),
     })
-      .then(res => res.json())
+      .then((res) => res.json())
       .then((res: StepUpdate) => {
         if (config.debug) {
           console.info(
             `${String.fromCodePoint(0x02713)} step: ${payload.stepId}`,
-            payload
+            payload,
           );
         }
         return res;
@@ -94,27 +103,31 @@ export const create = (config: Config): VoiceCompass => {
         if (config.debug) {
           console.error(
             `${String.fromCodePoint(0x000d7)} step: ${payload.stepId}`,
-            err
+            err,
           );
         }
         return {
-          // TODO: look into propagating more error context
-          error: "Something went wrong"
+          error: `Something went wrong`,
         };
       });
   };
 
   const updateStep = (stepData: StepData) => {
-    if (stepData.stepId === previousStepId && config.preventRepeats) {
+    if (stepData.stepId === lastUpdate?.stepId && config.preventRepeats) {
       const warning = `Duplicate step ID detected, step update prevented: ${stepData.stepId}`;
       if (config.debug) {
         console.warn(warning);
       }
       return Promise.resolve({
-        warning: warning
+        warning: warning,
       });
     }
-    previousStepId = stepData.stepId;
+    lastUpdate = {
+      // TODO: sort out whether optional stepID's are even allowed
+      stepId: stepData.stepId || "",
+      journeyId: currentJourneyId,
+      context: stepData.context,
+    };
     saveSession();
     return sendUpdateRequest(stepData);
   };
@@ -125,8 +138,8 @@ export const create = (config: Config): VoiceCompass => {
       currentJourneyId = newJourneyId;
       saveSession();
     },
-    getLastStepId: () => {
-      return previousStepId || null;
-    }
+    getLastUpdate: () => {
+      return lastUpdate;
+    },
   };
 };
diff --git a/packages/website/public/banner.jpeg b/packages/website/public/banner.jpeg
diff --git a/packages/website/src/components/Hero.tsx b/packages/website/src/components/Hero.tsx
@@ -13,22 +13,27 @@ export const Hero = () => {
     return null;
   }
   return (
-    <div className="overflow-hidden bg-lightBlueDarker dark:-mb-32 dark:mt-[-4.75rem] dark:pb-32 dark:pt-[4.75rem]">
+    <div
+      className="overflow-hidden bg-lightBlueDarker dark:-mb-32 dark:mt-[-4.75rem] dark:pb-32 dark:pt-[4.75rem] bg-cover"
+      style={{
+        backgroundImage: "url(/banner.jpeg)",
+      }}
+    >
       <div className="py-16 sm:px-2 lg:relative lg:px-0 lg:py-20">
         <div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-8 gap-y-16 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
           <div className="relative z-10 md:text-center lg:text-left">
             <div className="relative">
-              <p className="inline text-gray-900 font-display text-5xl">
+              <p className="inline text-white font-display text-5xl">
                 SDK for rich conversational experiences
               </p>
-              <p className="mt-3 text-2xl text-gray-700">
+              <p className="mt-3 text-2xl text-white65">
                 Add chat and multimodal capabilities to your page in minutes.
                 Add fully custom components with a dozen lines of code, or
                 engineer from the ground up yourself.
               </p>
               <div className="mt-8 flex gap-4 md:justify-center lg:justify-start">
                 <button
-                  className="rounded-xl bg-gray-800 text-white py-2 px-6 text-sm hover:bg-gray-900 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500"
+                  className="rounded-xl bg-lightBlueMain hover:bg-lightBlueDarker text-black60 py-2 px-6 text-sm hover:bg-gray-900 focus:outline-none"
                   onClick={() => {
                     document.querySelector("article")?.scrollIntoView({
                       block: "start",
@@ -39,7 +44,7 @@ export const Hero = () => {
                   Get started
                 </button>
                 <a
-                  className="rounded-xl bg-slate-800 py-2 px-6 text-sm text-white hover:bg-gray-900 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400"
+                  className="rounded-xl bg-lightBlueMain hover:bg-lightBlueDarker text-black60 py-2 px-6 text-sm hover:bg-gray-900 focus:outline-none"
                   href="https://github.com/nlxai/chat-sdk"
                 >
                   View on GitHub

diff --git a/packages/website/src/components/Nav.tsx b/packages/website/src/components/Nav.tsx
@@ -12,7 +12,7 @@ const MenuListItem: FC<{
     location.pathname === "/" ? "/getting-started" : location.pathname;
   return (
     <li>
-      <h2 className="font-display font-medium text-slate-900 dark:text-white">
+      <h2 className="font-display font-medium text-slate-700 dark:text-white">
         {props.heading}
       </h2>
       <ul
@@ -26,7 +26,7 @@ const MenuListItem: FC<{
               <Link
                 className={`block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full ${
                   active
-                    ? "font-semibold text-blueMain before:bg-blueMain"
+                    ? "font-medium text-blueMain before:bg-blueMain"
                     : "text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300"
                 }`}
                 to={item.url}
@@ -43,7 +43,7 @@ const MenuListItem: FC<{
 
 export const Nav: FC<{}> = () => (
   <div className="hidden lg:relative lg:block lg:flex-none">
-    <div className="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden"></div>
+    <div className="absolute inset-y-0 right-0 w-[50vw] bg-gray-50 dark:hidden"></div>
     <div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block"></div>
     <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block"></div>
     <div className="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 pr-8 xl:w-72 xl:pr-16">
@@ -138,7 +138,7 @@ export const MobileNav: FC<{
                             <Link
                               className={`block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full ${
                                 active
-                                  ? "font-semibold text-sky-500 before:bg-sky-500"
+                                  ? "font-medium text-sky-500 before:bg-sky-500"
                                   : "text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300"
                               }`}
                               to={item.url}

diff --git a/packages/website/src/components/NextPrevPage.tsx b/packages/website/src/components/NextPrevPage.tsx
@@ -27,17 +27,17 @@ interface LinkData {
 }
 
 export const NextPrevPage: FC<{ prev?: LinkData; next?: LinkData }> = (
-  props
+  props,
 ) => (
-  <dl className="mt-12 flex border-t border-slate-200 pt-6 dark:border-slate-800">
+  <dl className="mt-12 flex border-t border-gray-200 pt-6 dark:border-gray-800">
     {props.prev && (
       <div>
-        <dt className="font-display text-sm font-medium text-slate-900 dark:text-white">
+        <dt className="font-display text-sm font-medium text-gray-800 dark:text-white">
           Previous
         </dt>
         <dd className="mt-1">
           <Link
-            className="flex items-center gap-x-1 text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300 flex-row-reverse"
+            className="flex items-center gap-x-1 text-base font-medium text-black60 hover:text-blueMain dark:text-gray-400 dark:hover:text-gray-300 flex-row-reverse"
             to={props.prev.url}
           >
             {props.prev.label}
@@ -48,12 +48,12 @@ export const NextPrevPage: FC<{ prev?: LinkData; next?: LinkData }> = (
     )}
     {props.next && (
       <div className="ml-auto text-right">
-        <dt className="font-display text-sm font-medium text-slate-900 dark:text-white">
+        <dt className="font-display text-sm font-medium text-gray-900 dark:text-white">
           Next
         </dt>
         <dd className="mt-1">
           <Link
-            className="flex items-center gap-x-1 text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
+            className="flex items-center gap-x-1 text-base font-medium text-black60 hover:text-blueMain dark:text-gray-400 dark:hover:text-gray-300"
             to={props.next.url}
           >
             {props.next.label}

diff --git a/packages/website/src/components/PageContent.tsx b/packages/website/src/components/PageContent.tsx
@@ -32,7 +32,7 @@ export const Prose: FC<{ children: ReactNode; className?: string }> = ({
   className,
 }) => (
   <div
-    className={`prose prose-slate max-w-none dark:prose-invert dark:text-slate-400 prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem] prose-lead:text-slate-500 dark:prose-lead:text-slate-400 prose-a:font-semibold dark:prose-a:text-sky-400 prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))] hover:prose-a:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] dark:hover:prose-a:[--tw-prose-underline-size:6px] prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10 dark:prose-hr:border-slate-800 ${
+    className={`prose prose-slate max-w-none dark:prose-invert dark:text-slate-400 prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem] prose-lead:text-slate-500 dark:prose-lead:text-slate-400 prose-a:font-medium dark:prose-a:text-blueMain prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.blue.300))] hover:prose-a:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.blue.800))] dark:hover:prose-a:[--tw-prose-underline-size:6px] prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10 dark:prose-hr:border-slate-800 ${
       className || ""
     }`}
   >

diff --git a/packages/website/src/components/Prose.tsx b/packages/website/src/components/Prose.tsx
diff --git a/packages/website/src/routes.tsx b/packages/website/src/routes.tsx
@@ -144,7 +144,9 @@ export const routes: {
 ];
 
 export const ContentRoutes: FC<{}> = () => {
-  const flattenedRoutes = flatten(routes.map((r) => r.items));
+  const flattenedRoutes = flatten(
+    routes.map((r) => r.items.map((item) => ({ ...item, heading: r.heading }))),
+  );
   return (
     <Routes>
       {flattenedRoutes.map(({ url, element }, index) => {
@@ -159,13 +161,13 @@ export const ContentRoutes: FC<{}> = () => {
                 <NextPrevPage
                   prev={
                     prev && {
-                      label: prev.label,
+                      label: `${prev.heading}: ${prev.label}`,
                       url: prev.url,
                     }
                   }
                   next={
                     next && {
-                      label: next.label,
+                      label: `${next.heading}: ${next.label}`,
                       url: next.url,
                     }
                   }

diff --git a/packages/website/tailwind.config.js b/packages/website/tailwind.config.js
@@ -1,3 +1,5 @@
+import colors from "tailwindcss/colors";
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
@@ -26,12 +28,33 @@ export default {
         "8xl": "88rem",
       },
       colors: {
+        gray: colors.neutral,
         blueMain: "rgba(38, 99, 218, 1)",
         blueDarker: "rgba(30, 86, 196, 1)",
         blue15: "rgba(38, 99, 218, 0.15)",
         blue05: "rgba(38, 99, 218, 0.05)",
         lightBlueDarker: "rgba(149, 184, 251, 1)",
         lightBlueMain: "rgba(174, 202, 255, 1)",
+
+        black90: "rgba(0, 0, 0, 0.9)",
+        black80: "rgba(0, 0, 0, 0.8)",
+        black60: "rgba(0, 0, 0, 0.6)",
+        black40: "rgba(0, 0, 0, 0.4)",
+        black20: "rgba(0, 0, 0, 0.2)",
+        black10: "rgba(0, 0, 0, 0.1)",
+        black07: "rgba(0, 0, 0, 0.07)",
+        black05: "rgba(0, 0, 0, 0.05)",
+        black02: "rgba(0, 0, 0, 0.02)",
+
+        white100: "rgba(255, 255, 255, 1)",
+        white85: "rgba(255, 255, 255, 0.85)",
+        white65: "rgba(255, 255, 255, 0.65)",
+        white45: "rgba(255, 255, 255, 0.45)",
+        white25: "rgba(255, 255, 255, 0.25)",
+        white20: "rgba(255, 255, 255, 0.20)",
+        white15: "rgba(255, 255, 255, 0.15)",
+        white07: "rgba(255, 255, 255, 0.07)",
+        white02: "rgba(255, 255, 255, 0.02)",
       },
     },
   },