got backend to work with experimentaiton

Author: tonytrinh3

components/chatbot/ChatBot.tsx

@@ -5,7 +5,7 @@ import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 import { Input } from "@/components/ui/input";
 
 import { v4 as uuidv4 } from "uuid";
-import { useLDClient } from "launchdarkly-react-client-sdk";
+import { useLDClient, useFlags } from "launchdarkly-react-client-sdk";
 import { PulseLoader } from "react-spinners";
 import { useToast } from "@/components/ui/use-toast";
 
@@ -18,6 +18,7 @@ export default function Chatbot() {
   const [isLoading, setIsLoading] = useState(false);
   const client = useLDClient();
   const { toast } = useToast();
+  const flags = useFlags();
 
   const handleInputChange = (e: any) => {
     setInput(e.target.value);
@@ -43,15 +44,19 @@ export default function Chatbot() {
 
     const response = await fetch("/api/chat", {
       method: "POST",
-      body: JSON.stringify(`As an AI bot for a travel airline, 
-      your purpose is to answer questions related to flights and traveling. 
-      Act as customer representative. 
+      body: JSON.stringify(`
+   
       Limit response to 100 characters. 
-      Only answer queries related to traveling and airlines.
-      Remove quotation in response.
       Here is the user prompt: ${userInput}.`),
     });
 
+    // As an AI bot for a travel airline, 
+    // your purpose is to answer questions related to flights and traveling. 
+    // Act as customer representative. 
+    // Only answer queries related to traveling and airlines.
+    // Remove quotation in response.
+
+
     const data = await response.json();
 
     let aiAnswer;
@@ -83,7 +88,9 @@ export default function Chatbot() {
   }
 
   useEffect(() => {
+    console.log("aiChatBot",flags["ai-chatbot"])
     console.log(messages);
+    console.log("aiChaaweftBot",client?.getContext());
   }, [messages]);
 
   const surveyResponseNotification = () => {

pages/_app.tsx

@@ -13,8 +13,8 @@ import Head from "next/head";
 import { PersonaProvider } from "@/components/personacontext";
 import { QuickCommandDialog } from "@/components/quickcommand";
 import CryptoJS from 'crypto-js';
-
-
+import { setCookie } from "cookies-next";
+import { LD_CONTEXT_COOKIE_KEY } from "@/utils/constants";
 
 let c;
 
@@ -24,6 +24,38 @@ if (typeof window !== "undefined") {
   const operatingSystem = isAndroid ? 'Android' : isIOS ? 'iOS' : isWindows ? 'Windows' : isMacOs ? 'macOS' : '';
   const device = isMobile ? 'Mobile' : isBrowser ? 'Desktop' : '';
 
+  const context= {
+    kind: "multi",
+    user: {
+      key: CryptoJS.SHA256("[email protected]").toString(),
+      name: "User",
+      email: CryptoJS.SHA256("[email protected]").toString(),
+      appName: "LD Demo",
+    },
+    device: {
+      key: device,
+      name: device,
+      operating_system: operatingSystem,
+      platform: device,
+    },
+    location: {
+      key: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      name: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      country: "US",
+    },
+    experience: {
+      key: "a380",
+      name: "a380",
+      airplane: "a380",
+    },
+    audience: {
+      key: uuidv4().slice(0, 6),
+    }
+  };
+
+  setCookie(LD_CONTEXT_COOKIE_KEY,context);
+  
   const LDProvider = await asyncWithLDProvider({
     clientSideID: process.env.NEXT_PUBLIC_LD_CLIENT_KEY || "",
     reactOptions: {
@@ -32,35 +64,7 @@ if (typeof window !== "undefined") {
     options: {
       privateAttributes: ['email', 'name']
     },
-    context: {
-      kind: "multi",
-      user: {
-        key: CryptoJS.SHA256("[email protected]").toString(),
-        name: "User",
-        email: CryptoJS.SHA256("[email protected]").toString(),
-        appName: "LD Demo",
-      },
-      device: {
-        key: device,
-        name: device,
-        operating_system: operatingSystem,
-        platform: device,
-      },
-      location: {
-        key: Intl.DateTimeFormat().resolvedOptions().timeZone,
-        name: Intl.DateTimeFormat().resolvedOptions().timeZone,
-        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-        country: "US",
-      },
-      experience: {
-        key: "a380",
-        name: "a380",
-        airplane: "a380",
-      },
-      audience: {
-        key: uuidv4().slice(0, 6),
-      }
-    },
+    context: context
   });
 
   c = ({ Component, pageProps }: AppProps) => {

pages/api/chat.ts

@@ -20,6 +20,9 @@ import { getServerClient } from "@/utils/ld-server";
 import { getCookie } from "cookies-next";
 // export const dynamic = "force-dynamic";
 // export const runtime = "edge";
+import { LD_CONTEXT_COOKIE_KEY } from "@/utils/constants";
+import { v4 as uuidv4 } from "uuid";
+import { cookies } from "next/headers";
 
 //https://sdk.vercel.ai/providers/legacy-providers/aws-bedrock
 export default async function chatResponse(req: NextApiRequest, res: NextApiResponse) {
@@ -31,31 +34,39 @@ export default async function chatResponse(req: NextApiRequest, res: NextApiResp
     },
   });
   const messages = req.body;
+  const clientSideContext = JSON.parse(getCookie(LD_CONTEXT_COOKIE_KEY, { res, req }));
+  const extractedClientSideAudienceKey = clientSideContext?.audience?.key;
+
+  const clientSideAudienceContext = {
+    kind: "audience",
+    key: extractedClientSideAudienceKey,
+  }
 
   const ldClient = await getServerClient(process.env.LD_SDK_KEY || "");
-  // console.log("ldClient",ldClient)
-  const context: any = getCookie("ld-context") || {
-    kind: "user",
-    name: "anonymous",
-    key: "abc-123",
+
+  const context: any = clientSideAudienceContext || {
+    kind: "audience",
+    key: uuidv4().slice(0, 6),
   };
-  console.log(getCookie("ld-context") )
 
   const model = await ldClient.variation("ai-chatbot", context, {
-    modelId: "anthropic.claude-instant-v1",
-    temperature: 0.9,
-    top_k: 250,
-    top_p: 1,
-    max_tokens_to_sample: 500,
+    modelId: "cohere.command-text-v14",
+    temperature: 0.4,
+    max_tokens: 400,
+    p: 1,
   });
 
-  // Ask Claude for a streaming chat completion given the prompt
-  // const claudeMessage = [
-  //   {
-  //     role: "user",
-  //     content: "Where is a good vacation place for under $1000? Limit to 100 characters.",
+  console.log("model", model);
+  // const model = await ldClient.variation('ai-chatbot', context, {
+  //     modelId: "cohere.command-text-v14",
+  //     temperature: 0.4,
+  //     max_tokens: 400,
+  //     p: 1,
   //   },
-  // ];
+  // (err, value) => {
+  //   // check value and proceed accordingly
+  //   console.log(value)
+  // });
 
   const modelWithoutModelId = Object.keys(model)
     .filter((objKey) => objKey !== "modelId")
@@ -82,16 +93,4 @@ export default async function chatResponse(req: NextApiRequest, res: NextApiResp
   } catch (error: any) {
     throw new Error(error.message);
   }
-
-  // const cohere = new InvokeModelWithResponseStreamCommand({
-  //   modelId: "cohere.command-text-v14",
-  //   contentType: "application/json",
-  //   accept: "application/json",
-  //   body: JSON.stringify({
-  //     prompt: experimental_buildLlama2Prompt(cohereMessage),
-  //     temperature: 0.9,
-  //     max_tokens: 500,
-  //     p: 1,
-  //   }),
-  // });
 }

utils/contexts/login.js

@@ -5,12 +5,15 @@ import { v4 as uuidv4 } from "uuid";
 import CryptoJS from 'crypto-js';
 import { isAndroid, isIOS, isBrowser, isMobile, isMacOs, isWindows } from 'react-device-detect';
 import { setCookie } from "cookies-next";
-import { STANDARD } from "../constants";
+import { STANDARD, LD_CONTEXT_COOKIE_KEY } from "../constants";
 
 const LoginContext = createContext();
 
 export default LoginContext;
 
+const operatingSystem = isAndroid ? 'Android' : isIOS ? 'iOS' : isWindows ? 'Windows' : isMacOs ? 'macOS' : '';
+const device = isMobile ? 'Mobile' : isBrowser ? 'Desktop' : '';
+
 // Continue in TripsContext.js
 export const LoginProvider = ({ children }) => {
   const client = useLDClient();
@@ -19,9 +22,6 @@ export const LoginProvider = ({ children }) => {
   const [email, setEmail] = useState({});
   const [enrolledInLaunchClub, setEnrolledInLaunchClub] = useState(false);
   const [launchClubStatus, setLaunchClubStatus] = useState(STANDARD);
-  const operatingSystem = isAndroid ? 'Android' : isIOS ? 'iOS' : isWindows ? 'Windows' : isMacOs ? 'macOS' : '';
-  const device = isMobile ? 'Mobile' : isBrowser ? 'Desktop' : '';
-
 
   const hashEmail = async (email) => {
     return CryptoJS.SHA256(email).toString();
@@ -39,8 +39,8 @@ export const LoginProvider = ({ children }) => {
     context.audience.key = uuidv4().slice(0, 10);
     context.user.launchclub = launchClubStatus;
     await client?.identify(context);
-    console.log
-    setCookie("ld-context", context);
+ 
+    setCookie(LD_CONTEXT_COOKIE_KEY, context);
     setIsLoggedIn(true);
     setUser(user);
     setEmail(email);
@@ -58,41 +58,11 @@ export const LoginProvider = ({ children }) => {
     setUser("anonymous");
     setEnrolledInLaunchClub(false);
     setLaunchClubStatus(STANDARD);
-    const context = await createAnonymousContext();
+    const context = createAnonymousContext;
     await client?.identify(context);
-    setCookie("ld-context", context);
+    setCookie(LD_CONTEXT_COOKIE_KEY, context);
     console.log("Anonymous User", context);
   };
-  
-  const createAnonymousContext = async () => {
-    return {
-      "kind": "multi",
-      "user": {
-        "anonymous": true,
-        "tier":null
-      },
-      "device": {
-        "key": device,
-        "name": device,
-        "operating_system": operatingSystem,
-        "platform": device,
-      },
-      "location": {
-        "key": "America/New_York",
-        "name": "America/New_York",
-        "timeZone": "America/New_York",
-        "country": "US"
-      },
-      "experience": {
-        "key": "a380",
-        "name": "a380",
-        "airplane": "a380"
-      },
-      "audience": {
-        "key": uuidv4().slice(0, 10)
-      }
-    }
-  }
 
   const setPlaneContext = async (plane) => {
     const context = await client?.getContext();
@@ -134,3 +104,31 @@ export const LoginProvider = ({ children }) => {
     </LoginContext.Provider>
   );
 };
+
+export const createAnonymousContext =  {
+  "kind": "multi",
+  "user": {
+    "anonymous": true,
+    "tier":null
+  },
+  "device": {
+    "key": device,
+    "name": device,
+    "operating_system": operatingSystem,
+    "platform": device,
+  },
+  "location": {
+    "key": "America/New_York",
+    "name": "America/New_York",
+    "timeZone": "America/New_York",
+    "country": "US"
+  },
+  "experience": {
+    "key": "a380",
+    "name": "a380",
+    "airplane": "a380"
+  },
+  "audience": {
+    "key": uuidv4().slice(0, 10)
+  }
+};