diff --git a/src/app/HeaderButtons.tsx b/src/app/HeaderButtons.tsx index 18e2f7d..6f8f853 100644 --- a/src/app/HeaderButtons.tsx +++ b/src/app/HeaderButtons.tsx @@ -12,7 +12,7 @@ import { useTeamAPI } from "providers"; import { cloneDeep } from "lodash"; -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles((theme: Theme) => ({ button: { color: getSignatureAccentColour(), width: theme.spacing(6), @@ -70,8 +70,8 @@ export default function HeaderButtons(props: Props) { setHasNewChats(true); return; } - console.log(team.preferences.chatViewedTimestamp) - console.log(team.settings.lastChatTimestamp) + // console.log(team.preferences.chatViewedTimestamp) + // console.log(team.settings.lastChatTimestamp) let viewMoment = moment(team.preferences.chatViewedTimestamp); let chatMoment = moment(team.settings.lastChatTimestamp); if (viewMoment.diff(chatMoment) < 0) { diff --git a/src/app/UserWrapper.tsx b/src/app/UserWrapper.tsx index bf07306..fac8487 100644 --- a/src/app/UserWrapper.tsx +++ b/src/app/UserWrapper.tsx @@ -14,6 +14,7 @@ import { AppThemeProvider } from 'theme/AppThemeProvider' import HTTPProvider from 'providers/http' import { Crisp } from "crisp-sdk-web"; import { useMobile, useSnackbar } from 'hooks' +import { initCrisp } from '../chat/CrispChat' // import FirmwareLoader from './FirmwareLoader' const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState => { @@ -113,20 +114,14 @@ export default function UserWrapper(props: Props) { }, [setGlobal]) useEffect(() => { - if (!crispInitialized.current && global?.user) { - Crisp.configure(import.meta.env.VITE_CRISP_WEBSITE_ID); - crispInitialized.current = true; - Crisp.session.reset(); - Crisp.user.setEmail(global?.user.settings.email); - // Optional: Set nickname or other info - Crisp.user.setNickname(global?.user.settings.name || global?.user.settings.email); - Crisp.user.setPhone(global?.user.settings.phoneNumber); - - // For extra security (marks email as verified, prevents spoofing): - // Crisp.user.setEmail(user.email, "your-hmac-signature-here"); // See Crisp docs for signing - - // Optional: For session continuity across devices/browsers - Crisp.setTokenId(global?.user.id()); // e.g., your DB user ID + if (global?.user) { + initCrisp({ + websiteId: import.meta.env.VITE_CRISP_WEBSITE_ID, + email: global.user.settings.email, + nickname: global.user.settings.name || global.user.settings.email, + phone: global.user.settings.phoneNumber, + tokenId: global.user.id(), + }); } }, [global]); @@ -162,10 +157,7 @@ export default function UserWrapper(props: Props) { document.head.appendChild(style); } - console.log(isMobile) - if (isMobile) { - console.log("isMobile") style.textContent = ` #crisp-chatbox [aria-label="Open chat"] { bottom: 6em !important; diff --git a/src/assets/common/robotIconDark.png b/src/assets/common/robotIconDark.png new file mode 100644 index 0000000..85c8d51 Binary files /dev/null and b/src/assets/common/robotIconDark.png differ diff --git a/src/assets/common/robotIconLight.png b/src/assets/common/robotIconLight.png new file mode 100644 index 0000000..724fd18 Binary files /dev/null and b/src/assets/common/robotIconLight.png differ diff --git a/src/chat/Chat.tsx b/src/chat/Chat.tsx index 5b5c8dd..0bfeea5 100644 --- a/src/chat/Chat.tsx +++ b/src/chat/Chat.tsx @@ -37,6 +37,7 @@ export default function Chat(props: Props) { const loadChats = () => { setLoading(true) + // console.log("listing chats?") noteAPI.listChats(10, chats.length, "desc", "timestamp", objectKey).then(resp => { setChats(resp.data.chats ? resp.data.chats.reverse().concat(chats) : []) setTotalMessages(resp.data.total) @@ -76,33 +77,42 @@ export default function Chat(props: Props) { }; useEffect(() => { - loadChats() - }, []); + setChats([]); + setLoaded(false); + setLoading(false); + setTotalMessages(0); + }, [objectKey]); + + useEffect(() => { + if (chats.length === 0 && !loaded) { + loadChats(); + } + }, [objectKey, chats, loaded]); const loadMore = () => { loadChats(); }; return ( - - { loading && !loaded ? ( - - - - ) : ( - + + + {loading && !loaded ? ( + + + + ) : ( - - - - - - )} - + )} + + + + + + ); } diff --git a/src/chat/ChatDrawer.tsx b/src/chat/ChatDrawer.tsx index 51f7c2c..ecf83b7 100644 --- a/src/chat/ChatDrawer.tsx +++ b/src/chat/ChatDrawer.tsx @@ -1,41 +1,45 @@ import { ChevronRight } from "@mui/icons-material"; -import { Box, Drawer, IconButton, Theme, Typography } from "@mui/material"; +import { Avatar, Box, Divider, Drawer, IconButton, Theme, Tooltip, Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; import { useMobile } from "hooks"; import { Team } from "models"; import Chat from "./Chat"; import { pond } from "protobuf-ts/pond"; +import { useEffect, useState } from "react"; +import { useTeamAPI } from "providers"; +import { openCrispChat } from './CrispChat'; +import RobotIcon from "products/CommonIcons/robotIcon"; -const useStyles = makeStyles((theme: Theme) => { - return ({ - chatDrawer: { - display: "flex", - flexDirection: "column", // Arrange children vertically - backgroundColor: theme.palette.background.default, - height: "100%", - maxHeight: "100%", - minHeight: "100%", - minWidth: theme.spacing(54), - maxWidth: theme.spacing(54), - }, - chatContainer: { - flex: 1, - overflow: "hidden", - }, - chatDrawerMobile: { - backgroundColor: theme.palette.background.default, - height: "auto", - width: "100%" - }, - drawerHeader: { - display: "flex", - alignItems: "center", - padding: theme.spacing(1), - ...theme.mixins.toolbar, - justifyContent: "flex-start" - } - }); -}); +const useStyles = makeStyles((theme: Theme) => ({ + chatDrawer: { + display: "flex", + flexDirection: "column", + backgroundColor: theme.palette.background.default, + height: "100%", + maxHeight: "100%", + minHeight: "100%", + minWidth: theme.spacing(54), + maxWidth: theme.spacing(54), + }, + chatContainer: { + flex: 1, + overflow: "hidden", + }, + chatDrawerMobile: { + backgroundColor: theme.palette.background.default, + height: "100vh", + width: "100%", + display: "flex", + flexDirection: "column", + }, + drawerHeader: { + display: "flex", + alignItems: "center", + padding: theme.spacing(1), + ...theme.mixins.toolbar, + justifyContent: "flex-start", + }, +})); interface Props { open: boolean; @@ -46,21 +50,97 @@ interface Props { export function ChatDrawer(props: Props) { const { open, onClose, team } = props; const isMobile = useMobile(); - const classes = useStyles() + const classes = useStyles(); + const teamAPI = useTeamAPI(); + + const [selectedTeam, setSelectedTeam] = useState(team); + const [teams, setTeams] = useState([]) + + useEffect(() => { + teamAPI.listTeams(10, 0, "desc", "name", undefined, false, undefined).then(resp => { + setTeams(resp.data.teams) + }) + }, [teamAPI]) + + const openCrisp = () => { + openCrispChat() + onClose() + } return ( - - - - - - - {team.name()} Chat + + + {/* Side icon column */} + ({ + backgroundColor: theme.palette.background.paper, + borderRight: `1px solid ${theme.palette.divider}`, + })} + > + + setSelectedTeam(team)} + sx={{ + border: selectedTeam.settings?.key === team.settings.key ? "1px solid white" : "1px solid transparent", + borderRadius: "50%", + }} + > + + + + + + + + + + {teams.map((t, i)=> { + if (t.settings?.key === team.key()) return null; + return ( + + setSelectedTeam(Team.create(t))} + sx={{ + border: selectedTeam.key() === t.settings?.key ? "1px solid white" : "1px solid transparent", + borderRadius: "50%", + }} + > + + + + ) + })} - - + + {/* Main chat area */} + + + + + + {selectedTeam.name()} Chat + + + + - ) + ); } \ No newline at end of file diff --git a/src/chat/ChatMessage.tsx b/src/chat/ChatMessage.tsx index ac9600b..50b9b61 100644 --- a/src/chat/ChatMessage.tsx +++ b/src/chat/ChatMessage.tsx @@ -74,9 +74,22 @@ export default function ChatMessage(props: Props) { const mappedPerm = pond.Permission[perm as keyof typeof pond.Permission]; return mappedPerm; // Return null for invalid keys }).filter(Boolean); // Optionally filter out any null values + if (user.id() === props.chat.profile?.id) { + perms = [ + pond.Permission.PERMISSION_READ, + pond.Permission.PERMISSION_WRITE + ] + } } else { // console.error("data.permissions is not an array or does not exist"); - perms = []; + if (user.id() === props.chat.profile?.id) { + perms = [ + pond.Permission.PERMISSION_READ, + pond.Permission.PERMISSION_WRITE + ] + } else { + perms = []; + } } return perms } diff --git a/src/chat/ChatOutput.tsx b/src/chat/ChatOutput.tsx index a40328e..198690b 100644 --- a/src/chat/ChatOutput.tsx +++ b/src/chat/ChatOutput.tsx @@ -72,6 +72,7 @@ export default function ChatOutput(props: Props) { {props.messages.length < props.totalMessages && ( diff --git a/src/chat/CrispChat.ts b/src/chat/CrispChat.ts new file mode 100644 index 0000000..a0220fb --- /dev/null +++ b/src/chat/CrispChat.ts @@ -0,0 +1,111 @@ +import { Crisp } from "crisp-sdk-web"; + +const CRISP_HIDDEN_STYLE_ID = "crisp-hide-override"; +const ANIMATION_DURATION_MS = 300; + +let initialized = false; + +/** + * Initialize Crisp and immediately hide the default chat button. + * Call this once on app load (e.g., in UserWrapper after user data is ready). + */ +export function initCrisp(opts: { + websiteId: string; + email?: string; + nickname?: string; + phone?: string; + tokenId?: string; +}) { + if (initialized) return; + + Crisp.configure(opts.websiteId); + Crisp.session.reset(); + + if (opts.email) Crisp.user.setEmail(opts.email); + if (opts.nickname) Crisp.user.setNickname(opts.nickname); + if (opts.phone) Crisp.user.setPhone(opts.phone); + if (opts.tokenId) Crisp.setTokenId(opts.tokenId); + + initialized = true; + + // Hide the chat button off-screen + injectCrispStyles(); + + // Auto-hide when the user closes the chat + Crisp.chat.onChatClosed(() => { + hideCrispChatButton(); + }); +} + +/** + * Inject base styles that keep Crisp hidden until we want it. + * Uses opacity + visibility so Crisp keeps its default bottom-right positioning. + */ +function injectCrispStyles() { + let style = document.getElementById(CRISP_HIDDEN_STYLE_ID); + if (!style) { + style = document.createElement("style"); + style.id = CRISP_HIDDEN_STYLE_ID; + document.head.appendChild(style); + } + + style.textContent = ` + #crisp-chatbox { + z-index: 99999 !important; + transition: opacity ${ANIMATION_DURATION_MS}ms ease-in-out, + visibility ${ANIMATION_DURATION_MS}ms ease-in-out !important; + opacity: 0 !important; + visibility: hidden !important; + pointer-events: none !important; + } + #crisp-chatbox.crisp-visible { + opacity: 1 !important; + visibility: visible !important; + pointer-events: auto !important; + } + `; +} + +/** + * Show the Crisp widget and open the chat window. + * Safe to call from any onClick handler. + */ +export function openCrispChat() { + const chatbox = document.getElementById("crisp-chatbox"); + if (chatbox) { + chatbox.classList.add("crisp-visible"); + setTimeout(() => { + Crisp.chat.open(); + }, ANIMATION_DURATION_MS); + } else { + Crisp.chat.open(); + } +} + +/** + * Close the chat window and hide the widget. + */ +export function closeCrispChat() { + Crisp.chat.close(); + hideCrispChatButton(); +} + +/** + * Show the default Crisp button without opening the chat. + */ +export function showCrispButton() { + const chatbox = document.getElementById("crisp-chatbox"); + if (chatbox) { + chatbox.classList.add("crisp-visible"); + } +} + +/** + * Hide the default Crisp button. + */ +export function hideCrispChatButton() { + const chatbox = document.getElementById("crisp-chatbox"); + if (chatbox) { + chatbox.classList.remove("crisp-visible"); + } +} \ No newline at end of file diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx index 0e030c1..80a3f0d 100644 --- a/src/pages/Devices.tsx +++ b/src/pages/Devices.tsx @@ -323,21 +323,21 @@ export default function Devices() { return false } - useEffect(() => { - console.log("has no2: "+hasNo2) - }, [hasNo2]) + // useEffect(() => { + // console.log("has no2: "+hasNo2) + // }, [hasNo2]) - useEffect(() => { - console.log("has co2: "+hasCo2) - }, [hasCo2]) + // useEffect(() => { + // console.log("has co2: "+hasCo2) + // }, [hasCo2]) - useEffect(() => { - console.log("has co: "+hasNo2) - }, [hasNo2]) + // useEffect(() => { + // console.log("has co: "+hasNo2) + // }, [hasNo2]) - useEffect(() => { - console.log("has o2: "+hasO2) - }, [hasO2]) + // useEffect(() => { + // console.log("has o2: "+hasO2) + // }, [hasO2]) const openProvisionDialog = () => { setIsProvisionDialogOpen(true); diff --git a/src/pages/Team.tsx b/src/pages/Team.tsx index 5d2d7ad..1fa32ba 100644 --- a/src/pages/Team.tsx +++ b/src/pages/Team.tsx @@ -223,7 +223,7 @@ export default function TeamPage() { const isStreamline = IsStreamline() return ( - + {title()} diff --git a/src/products/CommonIcons/marketplaceIcon.tsx b/src/products/CommonIcons/marketplaceIcon.tsx index 20933b9..ca2f35b 100644 --- a/src/products/CommonIcons/marketplaceIcon.tsx +++ b/src/products/CommonIcons/marketplaceIcon.tsx @@ -2,7 +2,6 @@ import MarketWhite from "assets/marketplaceImages/marketplaceIconLight.png"; import MarketBlack from "assets/marketplaceImages/marketplaceIconDark.png"; import { ImgIcon } from "common/ImgIcon"; import { useThemeType } from "hooks"; -import React from "react"; interface Props { type?: "light" | "dark"; diff --git a/src/products/CommonIcons/robotIcon.tsx b/src/products/CommonIcons/robotIcon.tsx new file mode 100644 index 0000000..8c86754 --- /dev/null +++ b/src/products/CommonIcons/robotIcon.tsx @@ -0,0 +1,23 @@ +import RobotWhite from "assets/common/robotIconLight.png"; +import RobotBlack from "assets/common/robotIconDark.png"; +import { ImgIcon } from "common/ImgIcon"; +import { useThemeType } from "hooks"; + +interface Props { + type?: "light" | "dark"; +} + +export default function RobotIcon(props: Props) { + const themeType = useThemeType(); + const { type } = props; + + const src = () => { + if (type) { + return type === "light" ? RobotWhite : RobotBlack; + } + + return themeType === "light" ? RobotBlack : RobotWhite; + }; + + return ; +} diff --git a/src/providers/pond/noteAPI.tsx b/src/providers/pond/noteAPI.tsx index 259cd61..3cd4f91 100644 --- a/src/providers/pond/noteAPI.tsx +++ b/src/providers/pond/noteAPI.tsx @@ -1,7 +1,7 @@ import { AxiosResponse } from "axios"; import { useHTTP } from "hooks"; import { pond } from "protobuf-ts/pond"; -import { useGlobalState } from "providers"; +// import { useGlobalState } from "providers"; import { createContext, PropsWithChildren, useContext } from "react"; import { pondURL } from "./pond"; @@ -37,7 +37,7 @@ interface Props {} export default function NoteProvider(props: PropsWithChildren) { const { children } = props; const { get, del, post, put } = useHTTP(); - const [{as}] = useGlobalState() + // const [{as}] = useGlobalState() const addNote = (note: pond.NoteSettings, attachments?: string[]) => { let url = pondURL("/notes" + (attachments ? "?attachments=" + attachments.toString() : "")) @@ -88,9 +88,9 @@ export default function NoteProvider(props: PropsWithChildren) { orderBy?: string, search?: string, asRoot?: boolean, - otherTeam?: string + // otherTeam?: string ) => { - const view = otherTeam ? otherTeam : as + // const view = otherTeam ? otherTeam : as let url = pondURL( "/notes" + "?limit=" + @@ -100,9 +100,10 @@ export default function NoteProvider(props: PropsWithChildren) { ("&order=" + (order ? order : "asc")) + ("&by=" + (orderBy ? orderBy : "key")) + (search ? "&search=" + search : "") + - (asRoot ? "&asRoot=" + asRoot.toString() : "") + - (view ? "&as=" + view : "") + (asRoot ? "&asRoot=" + asRoot.toString() : ""), + // (view ? "&as=" + "" : "") ) + // console.log(url) return new Promise>((resolve, reject) => { get(url).then(resp => { resp.data = pond.ListNotesResponse.fromObject(resp.data) @@ -119,10 +120,10 @@ export default function NoteProvider(props: PropsWithChildren) { order?: "asc" | "desc", orderBy?: string, search?: string, - asRoot?: boolean, - otherTeam?: string + // asRoot?: boolean, + // otherTeam?: string ) => { - const view = otherTeam ? otherTeam : as + // const view = otherTeam ? otherTeam : as let url = pondURL( "/chats" + "?limit=" + @@ -131,10 +132,11 @@ export default function NoteProvider(props: PropsWithChildren) { offset + ("&order=" + (order ? order : "asc")) + ("&by=" + (orderBy ? orderBy : "key")) + - (search ? "&search=" + search : "") + - (asRoot ? "&asRoot=" + asRoot.toString() : "") + - (view ? "&as=" + view : "") + (search ? "&search=" + search : ""), + // (asRoot ? "&asRoot=" + asRoot.toString() : ""), + // (view ? "&as=" + view : "") ) + // console.log(asRoot) return new Promise>((resolve, reject) => { get(url).then(resp => { resp.data = pond.ListChatsResponse.fromObject(resp.data) diff --git a/src/providers/pond/teamAPI.tsx b/src/providers/pond/teamAPI.tsx index 9d84091..32f8a4a 100644 --- a/src/providers/pond/teamAPI.tsx +++ b/src/providers/pond/teamAPI.tsx @@ -117,9 +117,11 @@ export default function TeamProvider(props: PropsWithChildren) { asRoot?: boolean, otherTeam?: string, prefixSearch?: string, + useImitation?: boolean, ) => { //let asText = team ? "&as=" + team.key() : ""; - const view = otherTeam ? otherTeam : (as.length > 0 ? as : undefined) + let view = otherTeam ? otherTeam : (as.length > 0 ? as : undefined) + if (useImitation === undefined || useImitation === false) view = "" let url = pondURL( "/teams" + "?limit=" +