udp-react-enterprise-component-library 25.16.2-beta.1 → 25.16.2-beta.2

package/dist/ChatBotContext-i8g5y0rf.js

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+//#region src/utilities/chatBot/ChatBotContext.ts
+const ChatBotContext = createContext(null);
+
+//#endregion
+export { ChatBotContext as t };
+//# sourceMappingURL=ChatBotContext-i8g5y0rf.js.map

package/dist/ChatBotContext-i8g5y0rf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBotContext-i8g5y0rf.js","names":[],"sources":["../src/utilities/chatBot/ChatBotContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\nexport const ChatBotContext = createContext<{\n  messageHistory: any;\n  addMessage: any;\n  removeMessageHistory: any;\n  removeLoadingMessage: any;\n} | null>(null);\n\n"],"mappings":";;;AAEA,MAAa,iBAAiB,cAKpB,KAAK"}

package/dist/ChatBotProvider-BE_DhBqN.js

@@ -0,0 +1,67 @@
+import { t as useUser } from "./useUser--tP6DN4i.js";
+import { t as ChatBotContext } from "./ChatBotContext-i8g5y0rf.js";
+import React, { useState } from "react";
+
+//#region src/utilities/chatBot/ChatBotProvider.tsx
+var MessageStatus = /* @__PURE__ */ function(MessageStatus$1) {
+	MessageStatus$1[MessageStatus$1["Sent"] = 0] = "Sent";
+	MessageStatus$1[MessageStatus$1["Delivered"] = 1] = "Delivered";
+	MessageStatus$1[MessageStatus$1["Error"] = -1] = "Error";
+	return MessageStatus$1;
+}(MessageStatus || {});
+const ChatBotProvider = ({ children }) => {
+	const defaultCreatedAt = (/* @__PURE__ */ new Date()).toLocaleString([], {
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: true
+	});
+	const defaultCreatedBy = {
+		loading: false,
+		name: "AI Assistant"
+	};
+	const messageText = "Welcome! How can I help you search our Product Documentation?";
+	const [messageHistory, setMessageHistory] = useState([{
+		createdAt: defaultCreatedAt,
+		createdBy: defaultCreatedBy,
+		messageContent: messageText,
+		messageStatus: MessageStatus.Sent,
+		outgoing: false,
+		messageText
+	}]);
+	const user = useUser();
+	const createMessage = (messageContent, createdBy, messageText$1) => {
+		return {
+			createdAt: (/* @__PURE__ */ new Date()).toLocaleString([], {
+				hour: "2-digit",
+				minute: "2-digit",
+				hour12: true
+			}),
+			createdBy,
+			messageContent,
+			messageText: messageText$1,
+			messageStatus: MessageStatus.Sent,
+			outgoing: createdBy.id === user?.id
+		};
+	};
+	const addMessage = (messageContent, createdBy, messageText$1) => {
+		const newMessage = createMessage(messageContent, createdBy, messageText$1);
+		setMessageHistory((prevState) => [...prevState, newMessage]);
+	};
+	const removeMessageHistory = (messageContent, createdBy) => {
+		const newMessage = createMessage(messageText, defaultCreatedBy, messageText);
+		setMessageHistory(() => [newMessage]);
+	};
+	const removeLoadingMessage = () => {
+		setMessageHistory((prevState) => prevState.filter((message) => !message.createdBy.loading));
+	};
+	return /* @__PURE__ */ React.createElement(ChatBotContext.Provider, { value: {
+		messageHistory,
+		addMessage,
+		removeMessageHistory,
+		removeLoadingMessage
+	} }, children);
+};
+
+//#endregion
+export { ChatBotProvider as t };
+//# sourceMappingURL=ChatBotProvider-BE_DhBqN.js.map

package/dist/ChatBotProvider-BE_DhBqN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBotProvider-BE_DhBqN.js","names":["messageText"],"sources":["../src/utilities/chatBot/ChatBotProvider.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useUser } from '../auth/useUser';\nimport { ChatBotContext } from './ChatBotContext';\n\ninterface Message {\n  createdAt: string | undefined;\n  createdBy: { name: string; loading: boolean };\n  messageContent: string | JSX.Element | undefined;\n  messageStatus: MessageStatus | undefined;\n  outgoing: boolean | undefined;\n  messageText: string | undefined;\n}\n\nenum MessageStatus {\n  Sent = 0,\n  Delivered = 1,\n  Error = -1\n}\n\n\nexport const ChatBotProvider = ({ children }) => {\n  const defaultCreatedAt = new Date().toLocaleString([], { hour: '2-digit', minute: '2-digit', hour12: true });\n  const defaultCreatedBy = {loading: false, name: 'AI Assistant' };\n  const messageText = 'Welcome! How can I help you search our Product Documentation?';\n  const welcomeMessage: Message = {\n    createdAt: defaultCreatedAt,\n    createdBy: defaultCreatedBy,\n    messageContent: messageText,\n    messageStatus: MessageStatus.Sent,\n    outgoing: false,\n    messageText\n  };\n\n  const [messageHistory, setMessageHistory] = useState<Message[]>([welcomeMessage]);\n  const user = useUser();\n\n  const createMessage = (messageContent: string | JSX.Element, createdBy, messageText) => {\n    const newMessage: Message = {\n      createdAt: new Date().toLocaleString([], { hour: '2-digit', minute: '2-digit', hour12: true }),\n      createdBy,\n      messageContent,\n      messageText,\n      messageStatus: MessageStatus.Sent,\n      outgoing: createdBy.id === user?.id,\n    };\n\n    return newMessage\n  }\n\n  const addMessage = (messageContent: string | JSX.Element, createdBy, messageText) => {\n    const newMessage = createMessage(messageContent, createdBy, messageText)\n    setMessageHistory((prevState) => [...prevState, newMessage]);\n  };\n\n  const removeMessageHistory = (messageContent: string | JSX.Element, createdBy) => {\n    const newMessage = createMessage(messageText, defaultCreatedBy, messageText)\n    setMessageHistory(() => [newMessage]);\n  };\n\n  const removeLoadingMessage = () => {\n    setMessageHistory((prevState) =>\n      prevState.filter((message) => !message.createdBy.loading)\n    );\n  };\n\n  return (\n    <ChatBotContext.Provider\n      value={{\n        messageHistory,\n        addMessage,\n        removeMessageHistory,\n        removeLoadingMessage,\n      }}\n    >\n      {children}\n    </ChatBotContext.Provider>\n  );\n};\n"],"mappings":";;;;;AAaA,IAAK,0DAAL;AACE;AACA;AACA;;EAHG;AAOL,MAAa,mBAAmB,EAAE,eAAe;CAC/C,MAAM,oCAAmB,IAAI,MAAM,EAAC,eAAe,EAAE,EAAE;EAAE,MAAM;EAAW,QAAQ;EAAW,QAAQ;EAAM,CAAC;CAC5G,MAAM,mBAAmB;EAAC,SAAS;EAAO,MAAM;EAAgB;CAChE,MAAM,cAAc;CAUpB,MAAM,CAAC,gBAAgB,qBAAqB,SAAoB,CAThC;EAC9B,WAAW;EACX,WAAW;EACX,gBAAgB;EAChB,eAAe,cAAc;EAC7B,UAAU;EACV;EACD,CAE+E,CAAC;CACjF,MAAM,OAAO,SAAS;CAEtB,MAAM,iBAAiB,gBAAsC,WAAW,kBAAgB;AAUtF,SAT4B;GAC1B,4BAAW,IAAI,MAAM,EAAC,eAAe,EAAE,EAAE;IAAE,MAAM;IAAW,QAAQ;IAAW,QAAQ;IAAM,CAAC;GAC9F;GACA;GACA;GACA,eAAe,cAAc;GAC7B,UAAU,UAAU,OAAO,MAAM;GAClC;;CAKH,MAAM,cAAc,gBAAsC,WAAW,kBAAgB;EACnF,MAAM,aAAa,cAAc,gBAAgB,WAAWA,cAAY;AACxE,qBAAmB,cAAc,CAAC,GAAG,WAAW,WAAW,CAAC;;CAG9D,MAAM,wBAAwB,gBAAsC,cAAc;EAChF,MAAM,aAAa,cAAc,aAAa,kBAAkB,YAAY;AAC5E,0BAAwB,CAAC,WAAW,CAAC;;CAGvC,MAAM,6BAA6B;AACjC,qBAAmB,cACjB,UAAU,QAAQ,YAAY,CAAC,QAAQ,UAAU,QAAQ,CAC1D;;AAGH,QACE,oCAAC,eAAe,YACd,OAAO;EACL;EACA;EACA;EACA;EACD,IAEA,SACuB"}

package/dist/ChatContainer-B3jGFjTG.js

@@ -0,0 +1,252 @@
+import { t as FluentButton } from "./FluentButton-3xMbN_Vs.js";
+import { t as useUser } from "./useUser--tP6DN4i.js";
+import { t as apiMutate$1 } from "./useAxiosMutate-C_CLzTKW.js";
+import { t as AmbientTextField } from "./AmbientTextField-RjyecRyE.js";
+import { t as useChatBot } from "./useChatBot-CFlRU5_k.js";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Card, CardContent, Link, Typography, makeStyles } from "@material-ui/core";
+import { ConfigService } from "udp-react-stencil-component-library";
+import { useSnackbar } from "notistack";
+import { useTranslation } from "react-i18next";
+import { makeStyles as makeStyles$1 } from "@material-ui/core/styles";
+
+//#region src/chatBot/ChatMessage.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {
+		borderRadius: 5,
+		background: (props) => props.message.outgoing ? "#cdecfa" : "#e1e2e3",
+		width: "85%",
+		padding: "3px",
+		alignSelf: (props) => props.message.outgoing && "flex-end",
+		flexShrink: 0,
+		boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)"
+	},
+	userName: { fontWeight: "bold" },
+	timestamp: {
+		color: "#A9A9A9",
+		margin: "0 0 0 5px"
+	}
+}));
+const ChatMessage = (props) => {
+	const classes = useStyles$1(props);
+	const { message } = props;
+	return /* @__PURE__ */ React.createElement(Card, { className: classes.root }, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		flexDirection: "row"
+	} }, /* @__PURE__ */ React.createElement(Typography, {
+		noWrap: true,
+		variant: "caption",
+		className: classes.userName
+	}, message.createdBy.name), !message.createdBy.loading && /* @__PURE__ */ React.createElement(Typography, {
+		noWrap: true,
+		variant: "caption",
+		className: classes.timestamp
+	}, message.createdAt)), /* @__PURE__ */ React.createElement("div", { style: { wordWrap: "break-word" } }, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body2",
+		style: { whiteSpace: "pre-line" }
+	}, message.messageContent))));
+};
+
+//#endregion
+//#region src/chatBot/ChatContainer.jsx
+const useStyles = makeStyles$1((theme) => ({
+	loadingContainer: {
+		display: "inline-block",
+		fontSize: "2em"
+	},
+	pulseEllipsis: {
+		display: "inline-block",
+		animation: "$pulse 1.5s infinite",
+		"&:nth-of-type(2)": { animationDelay: "0.5s" },
+		"&:nth-of-type(3)": { animationDelay: "1s" }
+	},
+	"@keyframes pulse": {
+		"0%": {
+			transform: "scale(1)",
+			opacity: .6
+		},
+		"50%": {
+			transform: "scale(1.2)",
+			opacity: 1
+		},
+		"100%": {
+			transform: "scale(1)",
+			opacity: .6
+		}
+	}
+}));
+const ChatContainer = (props) => {
+	const classes = useStyles();
+	const { messageHistory, addMessage, removeMessageHistory, removeLoadingMessage } = useChatBot();
+	const user = useUser();
+	const [newMessageContent, setNewMessageContent] = useState("");
+	const messageEndRef = useRef(null);
+	const productId = ConfigService.config.UNITY_PRODUCT_ID;
+	const aiSearchUrl = ConfigService.config.AI_SEARCH_URL;
+	const aiSearchIndexName = ConfigService.config.AI_SEARCH_INDEX_NAME;
+	const aiSearchKey = ConfigService.config.AI_SEARCH_KEY;
+	const udpAiApiBase = ConfigService.config.UDPAI_API_BASE;
+	const { enqueueSnackbar } = useSnackbar();
+	const { t } = useTranslation();
+	const handleSendMessage = async () => {
+		addMessage(newMessageContent, {
+			...user,
+			name: "You"
+		}, newMessageContent);
+		setNewMessageContent("");
+		addLoadingMessage();
+		try {
+			await sendMessage(newMessageContent, addMessage);
+			removeLoadingMessage();
+		} catch (error) {
+			console.error("Error sending message:", error);
+		}
+	};
+	const handleNewSession = async () => {
+		try {
+			await removeMessageHistory();
+			enqueueSnackbar(t(`Chat Session Cleared`), {
+				variant: "success",
+				anchorOrigin: {
+					vertical: "top",
+					horizontal: "center"
+				}
+			});
+		} catch (error) {
+			console.error("Error create new chat session:", error);
+		}
+	};
+	const addLoadingMessage = () => {
+		addMessage(/* @__PURE__ */ React.createElement("div", { className: classes.loadingContainer }, /* @__PURE__ */ React.createElement("span", { className: classes.pulseEllipsis }, "."), /* @__PURE__ */ React.createElement("span", { className: classes.pulseEllipsis }, "."), /* @__PURE__ */ React.createElement("span", { className: classes.pulseEllipsis }, ".")), {
+			name: "AI Assistant",
+			loading: true
+		}, "");
+	};
+	useEffect(() => {
+		messageEndRef.current?.scrollIntoView({ behavior: "smooth" });
+	}, [messageHistory]);
+	const formatCitations = (citations) => {
+		return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("ol", null, citations.map((citation) => {
+			return /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(Link, {
+				href: citation.url,
+				target: "_blank",
+				rel: "noopener"
+			}, /* @__PURE__ */ React.createElement(Typography, {
+				variant: "body2",
+				style: { whiteSpace: "pre-line" }
+			}, citation.title)));
+		})));
+	};
+	const parseAiResponse = (response, addMessage$1) => {
+		try {
+			const gptResponseMessage = response.data.LLMResponse.choices[0].message;
+			const messageText = gptResponseMessage.content;
+			const citations = gptResponseMessage.context.citations;
+			const showCitations = messageText.toString().includes("[doc");
+			const textContent = messageText.toString().replaceAll("[doc", "[");
+			addMessage$1(/* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { wordWrap: "break-word" } }, /* @__PURE__ */ React.createElement(Typography, {
+				variant: "body2",
+				style: { whiteSpace: "pre-line" }
+			}, textContent)), citations.length > 0 && showCitations && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(Typography, {
+				variant: "body2",
+				style: { whiteSpace: "pre-line" }
+			}, "Refer to the XWiki documents for more info:"), formatCitations(citations))), { name: "AI Assistant" }, textContent);
+		} catch (e) {
+			const errorMessage = "Sorry, an error has occurred.";
+			addMessage$1(errorMessage, { name: "AI Assistant" }, errorMessage);
+		}
+	};
+	const executeQuery = useCallback(async (data, aiModelId) => apiMutate$1(udpAiApiBase, `aiservice/llm`, {
+		method: "post",
+		headers: { currentProductId: productId }
+	}, data), [productId, udpAiApiBase]);
+	const sendMessage = async (newMessageContent$1, addMessage$1) => {
+		parseAiResponse(await executeQuery({ data: {
+			modelName: "gpt-4o",
+			useCache: "false",
+			payload: {
+				max_tokens: 4096,
+				temperature: .5,
+				n: 1,
+				messages: [
+					{
+						role: "system",
+						content: "You are an assistant helping a user to search through documentation."
+					},
+					...messageHistory.map((item) => ({
+						role: item.createdBy.name === "AI Assistant" ? "assistant" : item.createdBy.name === "You" ? "user" : item.createdBy.name,
+						content: item.messageText
+					})),
+					{
+						role: "user",
+						content: newMessageContent$1
+					}
+				],
+				data_sources: [{
+					type: "azure_search",
+					parameters: {
+						endpoint: aiSearchUrl,
+						fields_mapping: {},
+						in_scope: false,
+						role_information: "You are an AI search assistant having access to wiki documentation data, please be help the user answer any questions to the best of your ability, or provide any search results in relevant documentation when answers are not directly available.",
+						strictness: 1,
+						top_n_documents: 5,
+						authentication: {
+							type: "api_key",
+							key: aiSearchKey
+						},
+						index_name: aiSearchIndexName
+					}
+				}]
+			}
+		} }), addMessage$1);
+	};
+	return /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		flexDirection: "column",
+		height: "100%"
+	} }, /* @__PURE__ */ React.createElement(FluentButton, {
+		id: "udpRecord-ChatContainer-NewSession",
+		onClick: handleNewSession
+	}, "Clear Chat"), /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "10px",
+		padding: "3px",
+		height: "100%",
+		overflowY: "auto",
+		flexGrow: 1
+	} }, messageHistory.map((message, index) => /* @__PURE__ */ React.createElement(ChatMessage, {
+		key: index,
+		message
+	})), /* @__PURE__ */ React.createElement("div", { ref: messageEndRef })), /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		flexDirection: "column",
+		marginTop: "5px",
+		position: "sticky",
+		bottom: 0,
+		padding: "3px",
+		zIndex: 1,
+		background: "white"
+	} }, /* @__PURE__ */ React.createElement("div", { style: { flexGrow: 1 } }, /* @__PURE__ */ React.createElement(AmbientTextField, {
+		id: "udpRecord-ChatContainer-Enter",
+		multiline: true,
+		value: newMessageContent,
+		onChange: (e) => setNewMessageContent(e.target.value),
+		onKeyDown: (e) => {
+			if (e.key === "Enter" && !e.shiftKey) {
+				e.preventDefault();
+				handleSendMessage();
+			}
+		}
+	})), /* @__PURE__ */ React.createElement(FluentButton, {
+		id: "udpRecord-ChatContainer-Send",
+		onClick: handleSendMessage,
+		autoFocus: true,
+		variant: "outlined"
+	}, "Send")));
+};
+
+//#endregion
+export { ChatMessage as n, ChatContainer as t };
+//# sourceMappingURL=ChatContainer-B3jGFjTG.js.map

package/dist/ChatContainer-B3jGFjTG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatContainer-B3jGFjTG.js","names":["useStyles","makeStyles","apiMutate","newMessageContent","addMessage"],"sources":["../src/chatBot/ChatMessage.jsx","../src/chatBot/ChatContainer.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { Card, CardContent, Typography } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    borderRadius: 5,\n    background: (props) => (props.message.outgoing ? '#cdecfa' : '#e1e2e3'),\n    width: '85%',\n    padding: '3px',\n    alignSelf: (props) => props.message.outgoing && 'flex-end',\n    flexShrink: 0, \n    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'\n  },\n  userName: {\n    fontWeight: 'bold'\n  },\n  timestamp: {\n    color: '#A9A9A9',\n    margin: '0 0 0 5px',\n  },\n}));\n\nexport const ChatMessage = (props) => {\n  const classes = useStyles(props);\n  const { message } = props;\n\n  return (\n    <Card className={classes.root}>\n      <CardContent>\n        <div style={{display:'flex', flexDirection:'row'}}>\n          <Typography noWrap variant='caption' className={classes.userName}>\n            {message.createdBy.name}\n          </Typography>\n          {!message.createdBy.loading && (\n            <Typography noWrap variant='caption' className={classes.timestamp}>\n              {message.createdAt}\n            </Typography>\n          )}\n        </div>\n        <div style={{wordWrap: 'break-word'}}>\n          <Typography variant='body2' style={{whiteSpace: 'pre-line'}}>\n            {message.messageContent}\n          </Typography>\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n\n","import React, { useState, useEffect, useRef, useCallback } from 'react';\nimport { AmbientTextField } from '../UI/inputs/textField/AmbientTextField';\nimport { FluentButton } from '../UI/inputs/buttons/FluentButton';\nimport { useUser } from '../utilities/auth/useUser';\nimport { ChatMessage } from './ChatMessage';\nimport { Link, Typography } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { apiMutate } from '../utilities/useAxiosMutate';\nimport { useChatBot } from '../utilities/chatBot/useChatBot';\nimport { useTranslation } from 'react-i18next';\nimport { useSnackbar } from 'notistack';\nimport { ConfigService } from 'udp-react-stencil-component-library';\n\nconst useStyles = makeStyles((theme) => ({\n  loadingContainer: {\n    display: 'inline-block',\n    fontSize: '2em', // Adjust the font size to make the whole section bigger\n  },\n  pulseEllipsis: {\n    display: 'inline-block',\n    animation: '$pulse 1.5s infinite',\n    '&:nth-of-type(2)': {\n      animationDelay: '0.5s',\n    },\n    '&:nth-of-type(3)': {\n      animationDelay: '1s',\n    },\n  },\n  '@keyframes pulse': {\n    '0%': {\n      transform: 'scale(1)',\n      opacity: 0.6,\n    },\n    '50%': {\n      transform: 'scale(1.2)',\n      opacity: 1,\n    },\n    '100%': {\n      transform: 'scale(1)',\n      opacity: 0.6,\n    },\n  },\n}));\n\n\nexport const ChatContainer = (props) => {\n  const classes = useStyles();\n  const { messageHistory, addMessage, removeMessageHistory, removeLoadingMessage } = useChatBot()\n  const user = useUser();\n  const [newMessageContent, setNewMessageContent] = useState('');\n  const messageEndRef = useRef(null);\n  const productId = ConfigService.config.UNITY_PRODUCT_ID;\n  const aiSearchUrl = ConfigService.config.AI_SEARCH_URL;\n  const aiSearchIndexName = ConfigService.config.AI_SEARCH_INDEX_NAME;\n  const aiSearchKey = ConfigService.config.AI_SEARCH_KEY;\n  const udpAiApiBase = ConfigService.config.UDPAI_API_BASE;\n  const { enqueueSnackbar } = useSnackbar();\n  const { t } = useTranslation();\n\n  const handleSendMessage = async () => {\n    addMessage(newMessageContent, { ...user, name: 'You' }, newMessageContent);\n    setNewMessageContent('');\n    addLoadingMessage();\n\n    try {\n      await sendMessage(newMessageContent, addMessage);\n      removeLoadingMessage();\n    } catch (error) {\n      console.error('Error sending message:', error);\n    }\n  };\n\n  const handleNewSession = async () => {\n    try {\n      await removeMessageHistory();\n      enqueueSnackbar(t(`Chat Session Cleared`), {\n        variant: 'success',\n        anchorOrigin: {\n          vertical: 'top',\n          horizontal: 'center',\n        }\n      });\n    } catch (error) {\n      console.error('Error create new chat session:', error);\n    }\n  }\n\n  const addLoadingMessage = () => {\n    const messageContent = (\n      <div className={classes.loadingContainer}>\n        <span className={classes.pulseEllipsis}>.</span>\n        <span className={classes.pulseEllipsis}>.</span>\n        <span className={classes.pulseEllipsis}>.</span>\n      </div>\n    );\n    addMessage(messageContent, { name: 'AI Assistant', loading: true }, \"\");\n  };\n\n\n  useEffect(() => {\n    messageEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n  }, [messageHistory]);\n\n\n  const formatCitations = (citations) => {\n    return (\n      <div>\n        <ol>\n          {citations.map((citation) => {\n            return (\n              <li>\n                <Link href={citation.url} target='_blank' rel='noopener'>\n                  <Typography variant='body2' style={{ whiteSpace: 'pre-line' }}>\n                    {citation.title}\n                  </Typography>\n                </Link>\n              </li>\n            );\n          })}\n        </ol>\n      </div>\n    );\n  };\n\n  const parseAiResponse = (response, addMessage) => {\n    try {\n      const gptResponseMessage = response.data.LLMResponse.choices[0].message;\n      const messageText = gptResponseMessage.content;\n      const citations = gptResponseMessage.context.citations;\n      const showCitations = messageText.toString().includes('[doc');\n      const textContent = messageText.toString().replaceAll('[doc', '[');\n\n      const responseMessage = (\n        <div>\n          <div style={{ wordWrap: 'break-word' }}>\n            <Typography variant='body2' style={{ whiteSpace: 'pre-line' }}>\n              {textContent}\n            </Typography>\n          </div>\n          {citations.length > 0 && showCitations && (\n            <div>\n              <br />\n              <Typography variant='body2' style={{ whiteSpace: 'pre-line' }}>\n                Refer to the XWiki documents for more info:\n              </Typography>\n              {formatCitations(citations)}\n            </div>\n          )}\n        </div>\n      );\n      addMessage(responseMessage, { name: 'AI Assistant' }, textContent);\n    } catch (e) {\n      const errorMessage = \"Sorry, an error has occurred.\"\n      addMessage(errorMessage, { name: 'AI Assistant' }, errorMessage);\n    }\n\n  };\n\n  const executeQuery = useCallback(\n    async (data, aiModelId) =>\n      apiMutate(\n        udpAiApiBase,\n        `aiservice/llm`,\n        {\n          method: 'post',\n          headers: {\n            currentProductId: productId, //temporary bypass -> //currentProductId: '1'\n          }\n        },\n        data\n      ),\n    [productId, udpAiApiBase]\n  );\n\n\n\n  const sendMessage = async (newMessageContent, addMessage) => {\n    const messageHistoryTextArray = messageHistory\n      .map(item => ({\n        role: item.createdBy.name === 'AI Assistant' ? 'assistant' : item.createdBy.name === 'You' ? 'user' : item.createdBy.name,\n        content: item.messageText\n      }));\n\n    const body = {\n      modelName: 'gpt-4o',\n      useCache: 'false',\n      payload: {\n        max_tokens: 4096,\n        temperature: 0.5,\n        n: 1,\n        messages: [\n          {\n            role: 'system',\n            content:\n              'You are an assistant helping a user to search through documentation.'\n          },\n          ...messageHistoryTextArray,\n          {\n            role: 'user',\n            content: newMessageContent\n          }\n        ],\n        data_sources: [\n          {\n            type: 'azure_search',\n            parameters: {\n              endpoint: aiSearchUrl,\n              //semantic_configuration: \"XWiki\",\n              //query_type: \"semantic\",\n              fields_mapping: {},\n              in_scope: false,\n              role_information: \"You are an AI search assistant having access to wiki documentation data, please be help the user answer any questions to the best of your ability, or provide any search results in relevant documentation when answers are not directly available.\",\n              strictness: 1,\n              top_n_documents: 5,\n              authentication: {\n                type: 'api_key',\n                key: aiSearchKey\n              },\n              index_name: aiSearchIndexName,\n              //filter: `Products/any(p: p eq '${productId}')`\n            }\n          }\n        ]\n      }\n    };\n\n    const aiResponse = await executeQuery({ data: body });\n    parseAiResponse(aiResponse, addMessage);\n  }\n\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', height: '100%'}}>\n      <FluentButton id='udpRecord-ChatContainer-NewSession' onClick={handleNewSession}>Clear Chat</FluentButton>\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: '10px',\n          padding: '3px',\n          height: '100%',\n          overflowY: 'auto',\n          flexGrow: 1\n        }}\n      >\n        {messageHistory.map((message, index) => (\n          <ChatMessage key={index} message={message} />\n        ))}\n        <div ref={messageEndRef} />\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', marginTop: '5px', position: 'sticky', bottom: 0, padding: '3px', zIndex: 1, background: 'white' }}>\n        <div style={{ flexGrow: 1 }}>\n          <AmbientTextField\n            id='udpRecord-ChatContainer-Enter'\n            multiline\n            value={newMessageContent}\n            onChange={(e) => setNewMessageContent(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' && !e.shiftKey) {\n                e.preventDefault();\n                handleSendMessage();\n              }\n            }}\n          />\n        </div>\n        <FluentButton\n          id='udpRecord-ChatContainer-Send'\n          onClick={handleSendMessage}\n          autoFocus\n          variant='outlined'\n        >\n          Send\n        </FluentButton>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/CircleButton-DtlkZUwI.js

@@ -0,0 +1,240 @@
+import { t as LayoutUnit } from "./LayoutUnit-DBF2yb1h.js";
+import { t as IconRenderer } from "./IconRenderer-3GKCegIn.js";
+import { n as TimelineStatus, r as TimelineDateBar } from "./MttYearTag-DG99yJQY.js";
+import React, { useState } from "react";
+import { ButtonBase, Divider, Fade, Paper, Tooltip, Typography, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+
+//#region src/componentSystems/multiThreadTimeline/ui/SummaryToken.jsx
+const useStyles$4 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		minHeight: 200,
+		background: (props) => !props.hidebackground && "whitesmoke"
+	},
+	dateBar: { width: 130 },
+	centerWrapper: {
+		display: "flex",
+		justifyContent: "center"
+	}
+}));
+const SummaryToken = (props) => {
+	const { title, short, showMonth, amount, status, date, user, icon, months = [], className, month, balance } = props;
+	const classes = useStyles$4(props);
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, className) }, /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "space-between",
+		width: 130
+	} }, /* @__PURE__ */ React.createElement("div", {
+		style: { marginRight: -8 },
+		className: classes.centerWrapper
+	}, icon), /* @__PURE__ */ React.createElement("div", { style: {
+		height: 24,
+		display: "flex",
+		justifyContent: "center"
+	} }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })), /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		flexDirection: "column"
+	} }, /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		style: {
+			textOverflow: "ellipsis",
+			overflow: "hidden",
+			whiteSpace: "nowrap"
+		}
+	}, title))), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), amount && /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React.createElement(Tooltip, { title: amount }, /* @__PURE__ */ React.createElement(Typography, { style: {
+		textOverflow: "ellipsis",
+		overflow: "hidden",
+		whiteSpace: "nowrap"
+	} }, amount))), !amount && /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		justifyContent: "center"
+	} }, /* @__PURE__ */ React.createElement(TimelineStatus, { status })), /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, date), /* @__PURE__ */ React.createElement("div", { style: {
+		textOverflow: "ellipsis",
+		overflow: "hidden",
+		whiteSpace: "nowrap"
+	} }, /* @__PURE__ */ React.createElement(Tooltip, { title: user }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, user))), /* @__PURE__ */ React.createElement("div", { style: {
+		textOverflow: "ellipsis",
+		overflow: "hidden",
+		whiteSpace: "nowrap"
+	} }, /* @__PURE__ */ React.createElement(Tooltip, { title: balance }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, balance))))), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), !short && /* @__PURE__ */ React.createElement("div", { className: classes.dateBar }, /* @__PURE__ */ React.createElement(TimelineDateBar, {
+		month,
+		showMonth,
+		months
+	}))));
+};
+SummaryToken.propTypes = {
+	title: PropTypes.string,
+	short: PropTypes.bool,
+	showMonth: PropTypes.bool,
+	amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	status: PropTypes.string,
+	date: PropTypes.string,
+	user: PropTypes.string,
+	icon: PropTypes.element,
+	months: PropTypes.array,
+	className: PropTypes.string,
+	month: PropTypes.string,
+	balance: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	hidebackground: PropTypes.bool
+};
+
+//#endregion
+//#region src/componentSystems/multiThreadTimeline/ui/TimelineToggleButton.jsx
+/**
+* @returns {import('@material-ui/core/styles').WithStyles<import('@material-ui/core/styles/withStyles').Styles<any, {}, string>>}
+*/
+const useStyles$3 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		alignItems: "center",
+		cursor: "pointer"
+	},
+	off: { opacity: .5 }
+}));
+const TimelineToggleButton = ({ title, timelineItem, handleClick, icon, off }) => {
+	const classes = useStyles$3();
+	const [filter, setFilter] = useState(true);
+	const selectFilter = () => {
+		setFilter(!filter);
+	};
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classes.root,
+		onClick: handleClick,
+		onMouseUp: selectFilter
+	}, /* @__PURE__ */ React.createElement("div", { className: off && classes.off }, icon), /* @__PURE__ */ React.createElement("div", { style: {
+		marginTop: -4,
+		marginRight: 48
+	} }, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "caption",
+		style: { textDecoration: !filter && "line-through" }
+	}, title)));
+};
+TimelineToggleButton.propTypes = {
+	title: PropTypes.string.isRequired,
+	timelineItem: PropTypes.object,
+	handleClick: PropTypes.func.isRequired,
+	icon: PropTypes.node.isRequired,
+	off: PropTypes.bool
+};
+
+//#endregion
+//#region src/componentSystems/multiThreadTimeline/ui/TimelineTopRowFilter.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	root: {},
+	menu: {
+		marginTop: 10,
+		marginRight: 8,
+		marginBottom: 20
+	}
+}));
+const TimelineTopRowFilter = ({ filterList, filterCall, filterListGroup, off, clear }) => {
+	const classes = useStyles$2();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { display: "flex" } }, filterListGroup && filterListGroup.map((item) => {
+		return /* @__PURE__ */ React.createElement(TimelineToggleButton, {
+			title: item.name,
+			timelineItem: item.name,
+			handleClick: () => filterCall(item.name),
+			off,
+			icon: /* @__PURE__ */ React.createElement(IconRenderer, {
+				noBorder: true,
+				value: {
+					color: { hex: "#" + item.color },
+					name: item.icon
+				}
+			})
+		});
+	})))));
+};
+TimelineTopRowFilter.propTypes = {
+	filterList: PropTypes.array,
+	filterCall: PropTypes.func,
+	filterListGroup: PropTypes.array,
+	off: PropTypes.bool,
+	clear: PropTypes.func
+};
+
+//#endregion
+//#region src/componentSystems/multiThreadTimeline/ui/DateWrapper.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		alignContent: "flex-end",
+		cursor: "pointer",
+		justifyContent: "center"
+	},
+	wrapper: { display: "flex" },
+	countWrapper: {
+		background: "#E9DADB",
+		borderRadius: 25,
+		padding: 8
+	}
+}));
+const DateWrapper = ({ children, date, months, count }) => {
+	const classes = useStyles$1();
+	const [show, setShow] = useState(true);
+	const threadHeight = 165;
+	const MONTHS = {
+		1: "Jan",
+		2: "Feb",
+		3: "March",
+		4: "Apr",
+		5: "May",
+		6: "June",
+		7: "July",
+		8: "Aug",
+		9: "Sept",
+		10: "Oct",
+		11: "Nov",
+		12: "Dec"
+	};
+	const orderedMonths = [months];
+	orderedMonths.sort(function(a, b) {
+		return a - b;
+	});
+	const output = orderedMonths.map(function(i) {
+		return MONTHS[i];
+	});
+	return /* @__PURE__ */ React.createElement("div", { onClick: () => setShow(!show) }, /* @__PURE__ */ React.createElement(Fade, { in: show }, /* @__PURE__ */ React.createElement("div", null, show && /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, children, " "))), /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", null, !show && /* @__PURE__ */ React.createElement("div", { style: {
+		height: threadHeight,
+		display: "flex",
+		justifyContent: "center"
+	} }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: classes.countWrapper }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, " + "), count), /* @__PURE__ */ React.createElement("div", { style: {
+		height: 123,
+		display: "flex",
+		justifyContent: "center"
+	} }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })))), /* @__PURE__ */ React.createElement("div", { style: { padding: 4 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, output, " ")))));
+};
+DateWrapper.propTypes = {
+	children: PropTypes.node,
+	date: PropTypes.string,
+	months: PropTypes.number,
+	count: PropTypes.number
+};
+
+//#endregion
+//#region src/componentSystems/multiThreadTimeline/ui/CircleButton.jsx
+const useStyles = makeStyles((theme) => ({ root: {
+	padding: 12,
+	paddingLeft: 13,
+	paddingRight: 11,
+	borderRadius: 50,
+	background: theme.palette.common.white,
+	minWidth: 32,
+	minHeight: 32
+} }));
+const CircleButton = (props) => {
+	const { children,...otherProps } = props;
+	const classes = useStyles(props);
+	return /* @__PURE__ */ React.createElement(ButtonBase, otherProps, /* @__PURE__ */ React.createElement(Paper, {
+		className: classes.root,
+		elevation: 1
+	}, children));
+};
+CircleButton.propTypes = { children: PropTypes.node };
+
+//#endregion
+export { useStyles$3 as a, TimelineToggleButton as i, DateWrapper as n, SummaryToken as o, TimelineTopRowFilter as r, CircleButton as t };
+//# sourceMappingURL=CircleButton-DtlkZUwI.js.map

package/dist/CircleButton-DtlkZUwI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircleButton-DtlkZUwI.js","names":["useStyles","useStyles","useStyles","useStyles"],"sources":["../src/componentSystems/multiThreadTimeline/ui/SummaryToken.jsx","../src/componentSystems/multiThreadTimeline/ui/TimelineToggleButton.jsx","../src/componentSystems/multiThreadTimeline/ui/TimelineTopRowFilter.jsx","../src/componentSystems/multiThreadTimeline/ui/DateWrapper.jsx","../src/componentSystems/multiThreadTimeline/ui/CircleButton.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, Typography, Divider, Tooltip } from '@material-ui/core';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { TimelineDateBar } from './TimelineDateBar';\nimport { LayoutUnit } from '../../../layout/LayoutUnit';\nimport { TimelineStatus } from './TimelineStatus';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    minHeight: 200,\n    background: (props) => !props.hidebackground && 'whitesmoke'\n  },\n  dateBar: {\n    width: 130\n  },\n  centerWrapper: {\n    display: 'flex',\n    justifyContent: 'center'\n  }\n}));\n\nexport const SummaryToken = (props) => {\n  const {\n    title,\n    short,\n    showMonth,\n    amount,\n    status,\n    date,\n    user,\n    icon,\n    months = [],\n    className,\n    month,\n    balance\n  } = props;\n  const classes = useStyles(props);\n\n  return (\n    <div className={clsx(classes.root, className)}>\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n          width: 130\n        }}\n      >\n        <div style={{ marginRight: -8 }} className={classes.centerWrapper}>\n          {icon}\n        </div>\n\n        <div style={{ height: 24, display: 'flex', justifyContent: 'center' }}>\n          <Divider orientation='vertical' />\n        </div>\n\n        <div style={{ display: 'flex', flexDirection: 'column' }}>\n          <LayoutUnit unit='nudge' />\n          <div style={{ textAlign: 'center' }}>\n            <Tooltip title={title}>\n              <Typography\n                variant='subtitle2'\n                style={{\n                  textOverflow: 'ellipsis',\n                  overflow: 'hidden',\n                  whiteSpace: 'nowrap'\n                }}\n              >\n                {title}\n              </Typography>\n            </Tooltip>\n          </div>\n          <LayoutUnit unit='nudge' />\n\n          {amount && (\n            <div\n              style={{\n                textAlign: 'center'\n              }}\n            >\n              <Tooltip title={amount}>\n                <Typography\n                  style={{\n                    textOverflow: 'ellipsis',\n                    overflow: 'hidden',\n                    whiteSpace: 'nowrap'\n                  }}\n                >\n                  {amount}\n                </Typography>\n              </Tooltip>\n            </div>\n          )}\n\n          {!amount && (\n            <div\n              style={{\n                display: 'flex',\n                justifyContent: 'center'\n              }}\n            >\n              <TimelineStatus status={status} />\n            </div>\n          )}\n\n          <div style={{ textAlign: 'center' }}>\n            <Typography variant='caption'>{date}</Typography>\n            <div\n              style={{\n                textOverflow: 'ellipsis',\n                overflow: 'hidden',\n                whiteSpace: 'nowrap'\n              }}\n            >\n              <Tooltip title={user}>\n                <Typography variant='caption'>{user}</Typography>\n              </Tooltip>\n            </div>\n            <div\n              style={{\n                textOverflow: 'ellipsis',\n                overflow: 'hidden',\n                whiteSpace: 'nowrap'\n              }}\n            >\n              <Tooltip title={balance}>\n                <Typography variant='caption'>{balance}</Typography>\n              </Tooltip>\n            </div>\n          </div>\n        </div>\n        <LayoutUnit unit='xxs' />\n        {!short && (\n          <div className={classes.dateBar}>\n            <TimelineDateBar\n              month={month}\n              showMonth={showMonth}\n              months={months}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nSummaryToken.propTypes = {\n  title: PropTypes.string,\n  short: PropTypes.bool,\n  showMonth: PropTypes.bool,\n  amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  status: PropTypes.string,\n  date: PropTypes.string,\n  user: PropTypes.string,\n  icon: PropTypes.element,\n  months: PropTypes.array,\n  className: PropTypes.string,\n  month: PropTypes.string,\n  balance: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  hidebackground: PropTypes.bool\n};\n","import React, { useState } from 'react';\nimport { makeStyles, Typography } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\n/**\n * @returns {import('@material-ui/core/styles').WithStyles<import('@material-ui/core/styles/withStyles').Styles<any, {}, string>>}\n */\nexport const useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    cursor: 'pointer'\n  },\n  off: {\n    opacity: 0.5\n  }\n}));\n\nexport const TimelineToggleButton = ({\n  title,\n  timelineItem,\n  handleClick,\n  icon,\n  off\n}) => {\n  //const [width, setWidth] = useState(0);\n  const classes = useStyles();\n  const [filter, setFilter] = useState(true);\n\n  const selectFilter = () => {\n    setFilter(!filter);\n  };\n\n  return (\n    <div\n      className={classes.root}\n      onClick={handleClick}\n      onMouseUp={selectFilter}\n    >\n      <div className={off && classes.off}>{icon}</div>\n\n      <div style={{ marginTop: -4, marginRight: 48 }}>\n        <Typography\n          variant='caption'\n          style={{ textDecoration: !filter && 'line-through' }}\n        >\n          {title}\n        </Typography>\n      </div>\n      {/* @todo: fix caption size */}\n    </div>\n  );\n};\n\nTimelineToggleButton.propTypes = {\n  title: PropTypes.string.isRequired,\n  timelineItem: PropTypes.object,\n  handleClick: PropTypes.func.isRequired,\n  icon: PropTypes.node.isRequired,\n  off: PropTypes.bool\n};\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { TimelineToggleButton } from './TimelineToggleButton';\nimport { IconRenderer } from '../../../UI/templates/ui/renderers/IconRenderer';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  menu: {\n    marginTop: 10,\n    marginRight: 8,\n    marginBottom: 20\n  }\n}));\n\nexport const TimelineTopRowFilter = ({\n  filterList,\n  filterCall,\n  filterListGroup,\n  off,\n  clear\n}) => {\n  const classes = useStyles();\n\n  return (\n    <div className={classes.root}>\n      {/* <button onClick={()=> setCompact(!compact) } > minimize  </button> */}\n      <div>\n        <div>\n          <div style={{ display: 'flex' }}>\n            {filterListGroup &&\n              filterListGroup.map((item) => {\n                return (\n                  <TimelineToggleButton\n                    title={item.name}\n                    timelineItem={item.name}\n                    handleClick={() => filterCall(item.name)}\n                    off={off}\n                    icon={\n                      <IconRenderer\n                        noBorder\n                        value={{\n                          color: { hex: '#' + item.color },\n                          name: item.icon\n                        }}\n                      />\n                    }\n                  />\n                );\n              })}\n            {/* <Button onClick={clear} >Clear</Button>  */}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nTimelineTopRowFilter.propTypes = {\n  filterList: PropTypes.array,\n  filterCall: PropTypes.func,\n  filterListGroup: PropTypes.array,\n  off: PropTypes.bool,\n  clear: PropTypes.func\n};\n","import React, { useState } from 'react';\nimport { makeStyles, Typography, Fade, Divider } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    alignContent: 'flex-end',\n    cursor: 'pointer',\n    justifyContent: 'center'\n  },\n  wrapper: {\n    display: 'flex'\n  },\n  countWrapper: {\n    background: '#E9DADB',\n    borderRadius: 25,\n    padding: 8\n  }\n}));\n\nexport const DateWrapper = ({ children, date, months, count }) => {\n  const classes = useStyles();\n\n  const [show, setShow] = useState(true);\n  const threadHeight = 165;\n\n  const MONTHS = {\n    1: 'Jan',\n    2: 'Feb',\n    3: 'March',\n    4: 'Apr',\n    5: 'May',\n    6: 'June',\n    7: 'July',\n    8: 'Aug',\n    9: 'Sept',\n    10: 'Oct',\n    11: 'Nov',\n    12: 'Dec'\n  };\n\n  // Convert months to order\n  const orderedMonths = [months];\n\n  orderedMonths.sort(function (a, b) {\n    return a - b;\n  });\n\n  // Map to named months\n  const output = orderedMonths.map(function (i) {\n    return MONTHS[i];\n  });\n\n  return (\n    <div onClick={() => setShow(!show)}>\n      <Fade in={show}>\n        <div>{show && <div className={classes.wrapper}>{children} </div>}</div>\n      </Fade>\n\n      <div className={classes.root}>\n        <div>\n          {!show && (\n            <div\n              style={{\n                height: threadHeight,\n                display: 'flex',\n                justifyContent: 'center'\n              }}\n            >\n              <div>\n                <div className={classes.countWrapper}>\n                  <Typography variant='subtitle2'> + </Typography>\n                  {count}\n                </div>\n                <div\n                  style={{\n                    height: 123,\n                    display: 'flex',\n                    justifyContent: 'center'\n                  }}\n                >\n                  <Divider orientation='vertical' />\n                </div>\n              </div>\n            </div>\n          )}\n          <div style={{ padding: 4 }}>\n            <Typography variant='caption'>{output} </Typography>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\nDateWrapper.propTypes = {\n  children: PropTypes.node,\n  date: PropTypes.string,\n  months: PropTypes.number,\n  count: PropTypes.number\n};\n","import React from 'react';\nimport { makeStyles, ButtonBase, Paper } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    padding: 12,\n    paddingLeft: 13,\n    paddingRight: 11,\n    borderRadius: 50,\n    background: theme.palette.common.white,\n    minWidth: 32,\n    minHeight: 32\n  }\n}));\n\nexport const CircleButton = (props) => {\n  const { children, ...otherProps } = props;\n  const classes = useStyles(props);\n\n  return (\n    <ButtonBase {...otherProps}>\n      <Paper className={classes.root} elevation={1}>\n        {children}\n      </Paper>\n    </ButtonBase>\n  );\n};\nCircleButton.propTypes = {\n  children: PropTypes.node\n};\n"],"mappings":"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"}