Merge pull request #329 from openchatai/feat/init_conv

Feat/init conv

copilot-widget/lib/components/Messages.tsx

@@ -49,8 +49,8 @@ export function BotTextMessage({
   id,
 }: {
   message: string;
-  timestamp?: number;
-  id?: string;
+  timestamp?: number | Date;
+  id?: string | number;
 }) {
   const { displayText } = useTypeWriter({
     text: message,
@@ -133,8 +133,8 @@ export function UserMessage({
   timestamp,
 }: {
   content: string;
-  timestamp?: number;
-  id?: string;
+  timestamp?: number | Date;
+  id?: string | number;
 }) {
   return (
     <div

copilot-widget/lib/contexts/Controller.tsx

@@ -1,10 +1,12 @@
-import React, { ReactNode, createContext, useContext, useState } from "react";
+import React, { ReactNode, createContext, useContext, useLayoutEffect, useState } from "react";
 import now from "../utils/timenow";
 import { useAxiosInstance } from "./axiosInstance";
 import { useConfigData } from "./ConfigData";
 import { useSoundEffectes } from "../hooks/useSoundEffects";
 import { Message } from "@lib/types";
 import { getId } from "@lib/utils/utils";
+import { useInitialData } from "./InitialDataContext";
+import { historyToMessages } from "@lib/utils/historyToMessages";
 export type FailedMessage = {
   message: Message;
   reason?: string;
@@ -20,7 +22,15 @@ interface ChatContextProps {
 const ChatContext = createContext<ChatContextProps | undefined>(undefined);
 
 const ChatProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const { data: idata } = useInitialData()
   const [messages, setMessages] = useState<Message[]>([]);
+
+  useLayoutEffect(() => {
+    if (idata?.history) {
+      setMessages(historyToMessages(idata?.history));
+    }
+  }, [idata?.history]);
+
   const sfx = useSoundEffectes();
   const [loading, setLoading] = useState(false);
   const [failedMessage, setError] = useState<FailedMessage | null>(null);

copilot-widget/lib/contexts/axiosInstance.tsx

@@ -1,17 +1,18 @@
 import axios, { AxiosInstance } from "axios";
-import { ReactNode, createContext, useContext, useMemo } from "react";
+import { ReactNode, createContext, useContext } from "react";
 import { useConfigData } from "./ConfigData";
 import { useSessionId } from "@lib/hooks/useSessionId";
 
 interface AxiosInstanceProps {
   axiosInstance: AxiosInstance;
 }
 
-function createAxiosInstance(apiUrl?: string, sessionId?: string) {
+function createAxiosInstance(apiUrl?: string, sessionId?: string | null, botToken?: string) {
   const instance = axios.create({
     baseURL: apiUrl,
     headers: {
       "X-Session-Id": sessionId,
+      "X-Bot-Token": botToken,
     },
   });
 
@@ -30,16 +31,7 @@ const AxiosContext = createContext<AxiosInstanceProps | undefined>(undefined);
 export function AxiosProvider({ children }: { children: ReactNode }) {
   const config = useConfigData();
   const { sessionId } = useSessionId();
-  const axiosInstance: AxiosInstance = useMemo(
-    () => createAxiosInstance(config?.apiUrl, sessionId),
-    [config, sessionId]
-  );
-
-  if (config?.token) {
-    axiosInstance.defaults.headers["X-Bot-Token"] = config?.token;
-  } else {
-    console.warn("No token!");
-  }
+  const axiosInstance: AxiosInstance = createAxiosInstance(config?.apiUrl, sessionId, config?.token);
 
   return (
     <AxiosContext.Provider value={{ axiosInstance }}>

copilot-widget/lib/hooks/useSessionId.ts

@@ -1,16 +1,18 @@
-import { useEffect, useState } from "react";
-
-const SESSION_ID_KEY = "@openchatai:session_id";
+import { useLayoutEffect, useState } from "react";
 
+export const SESSION_ID_KEY = "@openchatai:session_id";
+function gtSessionId() {
+  return sessionStorage.getItem(SESSION_ID_KEY);
+}
 export function useSessionId() {
-  const [sessionId, setSessionId] = useState<string | undefined>(undefined);
-  useEffect(() => {
-    const sessionId = localStorage.getItem(SESSION_ID_KEY);
-    if (sessionId) {
+  const [sessionId, setSessionId] = useState<string | undefined | null>(gtSessionId);
+  useLayoutEffect(() => {
+    const $sessionId = sessionStorage.getItem(SESSION_ID_KEY);
+    if ($sessionId) {
       setSessionId(sessionId);
     } else {
       const newSessionId = Math.random().toString(36).substring(2, 15);
-      localStorage.setItem(SESSION_ID_KEY, newSessionId);
+      sessionStorage.setItem(SESSION_ID_KEY, newSessionId);
       setSessionId(newSessionId);
     }
   }, []);

copilot-widget/lib/types/initialDataType.ts

@@ -1,6 +1,16 @@
+export type HistoryMessage = {
+    chatbot_id: string;
+    created_at: string;
+    from_user: boolean;
+    id: number;
+    message: string;
+    session_id: string;
+    updated_at: string;
+};
 export interface InitialDataType {
     bot_name: string;
     logo: string;
+    history: HistoryMessage[];
     sound_effects: {
         submit: string;
         response: string;

copilot-widget/lib/types/messageTypes.ts

@@ -1,13 +1,13 @@
 // original shape
 export type Message = {
-  timestamp?: number;
-  id: string;
+  timestamp?: number | Date;
+  id: string | number;
 } & (
-  | { from: "user"; content: string }
-  | ({ from: "bot" } & {
+    | { from: "user"; content: string }
+    | ({ from: "bot" } & {
       type: "text";
       response: {
         text: string;
       };
     })
-);
+  );

copilot-widget/lib/utils/formatTime.ts

@@ -1,4 +1,4 @@
-export default function formatTimeFromTimestamp(timestamp: number): string {
+export default function formatTimeFromTimestamp(timestamp: number | Date): string {
     const date = new Date(timestamp); // Multiply by 1000 to convert seconds to milliseconds
     const hours = date.getHours();
     const minutes = String(date.getMinutes()).padStart(2, '0');

copilot-widget/lib/utils/historyToMessages.ts

@@ -0,0 +1,29 @@
+import { Message } from "@lib/types"
+import { HistoryMessage } from "@lib/types/initialDataType"
+
+export function historyToMessages(history?: HistoryMessage[]): Message[] {
+    let $messages: Message[] = []
+    if (history) {
+        history.forEach((m) => {
+            if (m.from_user) {
+                $messages.push({
+                    from: "user",
+                    content: m.message,
+                    id: m.id,
+                    timestamp: new Date(m.created_at),
+                })
+            } else {
+                $messages.push({
+                    from: "bot",
+                    id: m.id,
+                    timestamp: new Date(m.created_at),
+                    type: "text",
+                    response: {
+                        text: m.message
+                    }
+                })
+            }
+        })
+    }
+    return $messages
+}

copilot-widget/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openchatai/copilot-widget",
   "private": false,
-  "version": "1.2.0",
+  "version": "1.3.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

dashboard/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.3.1",
     "@openchatai/copilot-flows-editor": "^1.5.2",
-    "@openchatai/copilot-widget": "^1.2.0",
+    "@openchatai/copilot-widget": "^1.3.1",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",