{
className={styles.errorDiv}>
- }
- {isLoader &&
- Compilation failed due to following error(s).
error : {error}
-
- :
- }
-
- }
+ }
+ {isLoader &&
+ :
+ }
+
}
{/*generate code*/}
@@ -336,12 +313,10 @@ export const BottomBar = () => {
buttonActive={buttonActive} clickedButton={clickedButton}
setIsAIModelComponent={setIsAIModelComponent} setFile={setFile}/>
{/*model upload pop up */}
- {
- isAIModelComponent &&
-
- }
+ {isAIModelComponent && }
-
- );
+ );
}
/**
@@ -402,12 +375,8 @@ function UploadCodeButton(params) {
useEffect(() => {
const handleOrientationChange = () => {
- setIsLandscape(
- window.matchMedia("(max-height: 500px) and (max-width: 1000px) and (orientation: landscape)").matches
- );
- setIsTabletQuery(
- window.matchMedia("(min-width: 768px) and (max-width: 1024px)").matches
- );
+ setIsLandscape(window.matchMedia("(max-height: 500px) and (max-width: 1000px) and (orientation: landscape)").matches);
+ setIsTabletQuery(window.matchMedia("(min-width: 768px) and (max-width: 1024px)").matches);
};
window.addEventListener("resize", handleOrientationChange);
}, []);
@@ -431,18 +400,14 @@ function UploadCodeButton(params) {
};
}, [popUpRef, arrowClick]);
- return (
-
{/*undo redo*/}
@@ -351,12 +326,10 @@ export const BottomBar = () => {
{isMobile || isLandscape || isDesktopSmallerScreen ? "" :
}
-
+ return (
-
- )
+ )
}
@@ -503,8 +462,7 @@ function UploadCodeButton(params) {
*/
function UndoRedo(params) {
const {clickedButton, buttonSelected, buttonActive} = params
- return (
-
{/*generate QR code*/}
@@ -461,20 +426,16 @@ function UploadCodeButton(params) {
>
- {theme.theme === "dark" ?
- :
-
- }
+ {theme.theme === "dark" ? :
+ }
handleLanguageDropDown(Constants.py, event)}
className={`${styles.langItem} ${styles.pyDivMargin} ${(theme.theme === "dark" ? navbarStyle.darkItem : navbarStyle.lightItem)}`}
>
- {theme.theme === "dark" ?
- :
-
- }
+ {theme.theme === "dark" ? :
+ }
inputRef.current?.click()}
style={{marginTop: 0}}
@@ -482,19 +443,17 @@ function UploadCodeButton(params) {
>
- {theme.theme === "dark" ?
-
+
+ return (
)
}
@@ -530,8 +487,7 @@ function UndoRedo(params) {
*/
function ZoomInOut(params) {
const {clickedButton, buttonSelected, buttonActive} = params;
- return (
-
-
- )
+
+ return (
);
}
diff --git a/open-code/src/components/chatBox/markDown.module.css b/open-code/src/components/chatBox/markDown.module.css
new file mode 100644
index 000000000..4e0492948
--- /dev/null
+++ b/open-code/src/components/chatBox/markDown.module.css
@@ -0,0 +1,141 @@
+/* Light Theme */
+.heading1 {
+ font-size: 18px;
+ margin-bottom: 0.5em;
+ color: #0071c5;
+}
+
+.heading2 {
+ font-size: 15px;
+ margin-bottom: 0.5em;
+ color:#0071c5;
+}
+.heading3 {
+ font-size: 16px;
+ margin-bottom: 0.5em;
+ color:#0071c5;
+}
+
+.paragraph {
+ margin-bottom: 0.5em;
+ font-size: 15px;
+}
+
+.strong {
+ font-weight: bold;
+ color: #000000;
+}
+
+.em {
+ font-style: italic;
+ color: #555555;
+}
+
+.list {
+ padding-left: 20px;
+ color: #000000;
+ margin-bottom: 0.5em;
+}
+
+.orderedList {
+ margin-bottom: 0.5em;
+ padding-left: 20px;
+ list-style-type: decimal;
+ color:#0071c5;
+}
+
+.listItem {
+ margin-bottom: 0.5em;
+ color: #000000;
+
+}
+
+.blockquote {
+ margin: 1em 0;
+ padding-left: 1em;
+ border-left: 4px solid #CCCCCC;
+ background-color: #F5F5F5;
+ color: #666666;
+}
+
+/* Light Theme */
+.code {
+ font-family: monospace;
+ background-color: #F5F5F5;
+ padding: 2px 4px;
+ border-radius: 3px;
+ color: #d56235;
+ font-size: 14px;
+}
+
+/* Dark Theme */
+.darkTheme .heading1 {
+ font-size: 18px;
+ margin-bottom: 0.5em;
+ color: #458ff7;
+
+}
+
+.darkTheme .heading2 {
+ font-size: 16px;
+ margin-bottom: 0.5em;
+ color:#458ff7;
+}
+
+.darkTheme.heading3 {
+ font-size: 16px;
+ margin-bottom: 0.5em;
+ color: #458ff7;
+}
+
+.darkTheme .paragraph {
+ margin-bottom: 1em;
+ color: #FFFFFF;
+ font-size: 15px;
+}
+
+.darkTheme .strong {
+ font-weight: bold;
+ color: #FFFFFF;
+}
+
+.darkTheme .em {
+ font-style: italic;
+ color: #1d6c01;
+}
+
+.darkTheme .list {
+ padding-left: 20px;
+ color: #FFFFFF;
+ margin-bottom: 0.5em;
+}
+
+.darkTheme .orderedList {
+ padding-left: 20px;
+ list-style-type: decimal;
+ color: #FFFFFF;
+ margin-bottom: 0.5em;
+}
+
+.darkTheme .listItem {
+ margin-bottom: 0.5em;
+ color: #FFFFFF;
+
+}
+
+.darkTheme .blockquote {
+ margin: 1em 0;
+ padding-left: 1em;
+ border-left: 4px solid #CCCCCC;
+ background-color: #F5F5F5;
+ color: #666666;
+}
+
+.darkTheme .code {
+ font-family: monospace;
+ padding: 2px 4px;
+ border-radius: 3px;
+ color: #d56235;
+ background-color: transparent;
+ font-size: 14px;
+}
diff --git a/open-code/src/components/chatBox/messageBox.module.css b/open-code/src/components/chatBox/messageBox.module.css
new file mode 100644
index 000000000..e0253b631
--- /dev/null
+++ b/open-code/src/components/chatBox/messageBox.module.css
@@ -0,0 +1,100 @@
+.responseBox {
+ padding: 15px;
+ border-radius: 10px 10px 10px 0;
+ overflow-x:auto; /* Enable horizontal scrolling */
+
+}
+.responseContent {
+ display: flex;
+ flex-direction: column;
+ overflow-x:auto;
+}
+.responseContent.timestamp {
+ text-align: right;
+ font-size: 12px;
+ color: #666;
+}
+
+.chatBubble {
+ display: flex;
+ flex-direction: column;
+ gap: 28px;
+ padding: 28px 28px 0 28px;
+}
+
+.userMessage {
+ align-self: flex-end;
+ background-color: #0071C5;
+ border-radius: 10px 10px 0 10px;
+ padding: 15px;
+ max-width: 70%;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+}
+.userTimestamp {
+ display: flex;
+ justify-content: flex-end;
+ font-size: 12px;
+ color: #FFFFFF;
+}
+
+.loader {
+ width: 50px;
+ aspect-ratio: 2;
+ --_g: no-repeat radial-gradient(circle closest-side,#000 90%,#0000);
+ background:
+ var(--_g) 0% 50%,
+ var(--_g) 50% 50%,
+ var(--_g) 100% 50%;
+ background-size: calc(100%/3) 50%;
+ animation: l3 1s infinite linear;
+}
+@keyframes l3 {
+ 20%{background-position:0% 0%, 50% 50%,100% 50%}
+ 40%{background-position:0% 100%, 50% 0%,100% 50%}
+ 60%{background-position:0% 50%, 50% 100%,100% 0%}
+ 80%{background-position:0% 50%, 50% 50%,100% 100%}
+}
+.whiteLoader {
+ width: 50px;
+ aspect-ratio: 2;
+ --_g: no-repeat radial-gradient(circle closest-side, #FFFFFF 90%, #FFFFFF00);
+ background:
+ var(--_g) 0% 50%,
+ var(--_g) 50% 50%,
+ var(--_g) 100% 50%;
+ background-size: calc(100%/3) 50%;
+ animation: l3 1s infinite linear;
+}
+.loaderContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+}
+.loaderHeading{
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ color: black;
+ margin: 0;
+}
+.loaderHeadingDark{
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ color: white;
+ margin: 0;
+}
+.timestamp {
+ font-size: 12px;
+ color: #666;
+ text-align: right;
+}
+
+.responseButton {
+ padding: 8px 8px;
+ border-radius: 9px;
+ cursor: pointer;
+}
diff --git a/open-code/src/components/chatBox/messagebox.js b/open-code/src/components/chatBox/messagebox.js
new file mode 100644
index 000000000..89c0cdfbc
--- /dev/null
+++ b/open-code/src/components/chatBox/messagebox.js
@@ -0,0 +1,193 @@
+import React, {useEffect, useState, useContext} from 'react';
+import styles from './messageBox.module.css';
+import mstyles from './markDown.module.css';
+import {ThemeContext} from '../../App';
+import {ChatConstants, Themes} from '../../utils/constants';
+import {colors as Colors} from '../../utils/color';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import PersonaCard from "../personaCard/peronaCard";
+
+/**
+ * ChatBox component renders a chat bubble containing user and assistant messages.
+ * @param props
+ * @returns {Element}
+ * @constructor
+ */
+const ChatBox = (props) => {
+ const {
+ conversation,
+ handlePauseClick,
+ setIsTyping,
+ setLoader,
+ loader,
+ allChatMessages,
+ chatContainerRef,
+ setCodeBufferLoader,
+ codeBufferLoader,
+ setPersona,
+ } = props;
+ const theme = useContext(ThemeContext);
+ return (
+
-
- );
+
+ {conversation.userMessage && (
+ handlePauseClick(conversation.id)}
+ setIsTyping={setIsTyping}
+ allChatMessages={allChatMessages}
+ id={conversation.id}
+ setCodeBufferLoader={setCodeBufferLoader}
+ codeBufferLoader={codeBufferLoader}
+ setLoader={setLoader}
+ loader={loader}
+ chatContainerRef={chatContainerRef}
+ setPersona={setPersona}
+ />
+
+ );
+};
+
+/**
+ * UserMessage component renders a user message with timestamp.
+ * @param timestamp
+ * @param message
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+const UserMessage = ({timestamp, message}) => (
+
+
+);
+
+/**
+ * AssistantResponse component renders assistant's response with typewriter effect.
+ * Manages display of response content, loader, and scrolling behavior.
+ * @returns {Element}
+ * @constructor
+ * @param props
+ */
+const AssistantResponse = (props) => {
+ const {
+ timestamp,
+ message,
+ paused,
+ setIsTyping,
+ setLoader,
+ loader,
+ codeBufferLoader,
+ allChatMessages,
+ id,
+ chatContainerRef,
+ setPersona
+ } = props;
+ const [displayedMessage, setDisplayedMessage] = useState('');
+ const theme = useContext(ThemeContext);
+ //Effect hook to manage loading state and update the displayed message when dependencies change.
+ useEffect(() => {
+ setLoader(message === '');
+
+ if (message !== '') {
+ setDisplayedMessage(message);
+ }
+
+ }, [message, paused, allChatMessages.length, id, setIsTyping, setLoader]);
+
+ //useEffect for auto scrolling the content
+ useEffect(() => {
+ if (chatContainerRef.current && chatContainerRef.current.scrollHeight !== null) {
+ chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+ }
+ }, [displayedMessage, chatContainerRef, loader, allChatMessages.length]);
+
+ function handlePersonas(e) {
+ setPersona(e);
+ }
+
+ return (
+ {message}
+ {timestamp}
+
+ {loader && allChatMessages.length === id ? (
+
+ ) : (
+
+ );
+};
+
+export default ChatBox;
diff --git a/open-code/src/components/codeAssistant/chat.js b/open-code/src/components/codeAssistant/chat.js
new file mode 100644
index 000000000..378193ba3
--- /dev/null
+++ b/open-code/src/components/codeAssistant/chat.js
@@ -0,0 +1,323 @@
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import styles from "./chat.module.css";
+import {getAIMessage} from "../../services/chatAssistant";
+import {Images} from "../../utils/images.js";
+import {Themes, Errors, ChatConstants} from '../../utils/constants.js';
+import {ThemeContext} from "../../App";
+import {colors as Colors} from "../../utils/color";
+import {StoreContext} from "../../context/context";
+import {addBlocksToWorkspace} from "../blockly/imageConverter";
+import {getCurrentProject} from "../../services/workspace";
+import {handler} from "../../utils/handler";
+import ChatBox from "../chatBox/messagebox";
+
+/**
+ * Chat component handles user interactions and displays chat interface.
+ * @param props
+ * @returns {Element}
+ * @constructor
+ */
+const Chat = ({drawer}) => {
+ const theme = useContext(ThemeContext);
+ const {workspace, setDrawer} = useContext(StoreContext);
+ const [inputValue, setInputValue] = useState('');
+ const [loader, setLoader] = useState(false);
+ const [isTyping, setIsTyping] = useState(false);
+ const timestamp = new Date().toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
+ const abortControllerRef = useRef(null);
+ const chatContainerRef = useRef(null);
+ const [codeBufferLoader, setCodeBufferLoader] = useState(false);
+ const [allChatMessages, setAllChatMessages] = useState([{
+ id: 1,
+ userMessage: "",
+ AIMessage: ChatConstants.Message, // Initial welcome message
+ userTimestamp: "",
+ AITimestamp: new Date().toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}),
+ paused: false
+ }, {
+ id: 2,
+ userMessage: "", // Message for choosing persona
+ AIMessage: " ",
+ userTimestamp: "",
+ AITimestamp: new Date().toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}),
+ paused: false
+ }]);
+ const [currentMessage, setCurrentMessage] = useState({
+ id: 3, // Starting with id 3 since id 2 is reserved for persona selection
+ userMessage: "",
+ AIMessage: "",
+ userTimestamp: new Date().toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}),
+ AITimestamp: "",
+ paused: false
+ });
+
+ const [persona, setPersona] = useState("");
+ //Handles user click on send button
+ const handleSendClick = async () => {
+ const userInput = inputValue.trim().toLowerCase();
+ if (userInput === '') {
+ return;
+ }
+ setIsTyping(true);
+ setCurrentMessage((prevState) => ({
+ ...prevState,
+ userMessage: userInput,
+ userTimestamp: timestamp,
+ AIMessage: "",
+ id: allChatMessages.length + 1,
+ AITimestamp: "",
+ paused: false
+ }));
+ abortControllerRef.current = new AbortController();
+ let messageBuffer = '';
+
+ //Handles incoming message chunks from the api on streaming.
+ const onMessage = (chunk) => {
+
+ // Append current chunk to the message buffer
+ messageBuffer += chunk;
+
+
+ if (chunk === "n") {
+ chunk = "";
+ }
+
+ const formattedChunk = chunk
+ .replace(/\\n/g, ' \n\n') // Markdown requires two spaces before a newline for a line break
+ .replace(/\\t/g, '\t') // Replace escaped tabs if needed
+ .replace(/\\"/g, '"') // Replace escaped double quotes
+ .replace(/\\\\/g, '\n') // Replace escaped backslashes
+ .replace(/\\/g, ' '); // Markdown requires two spaces before a newline for a line break
+
+ if (messageBuffer.includes('$$RESPONSE$$')) {
+ setCodeBufferLoader(true);
+ } else {
+ setCodeBufferLoader(false);
+ }
+
+ if (messageBuffer.includes('$$CONTENT$$":"') && chunk !== '":"') {
+ setIsTyping(true);
+
+ if (messageBuffer.includes('","')) {
+ messageBuffer = '';
+ setIsTyping(false);
+ } else {
+ setCurrentMessage((prevState) => ({
+ ...prevState, AIMessage: prevState.AIMessage + formattedChunk, AITimestamp: timestamp,
+ }));
+ }
+ }
+ };
+
+ // To add the blocks to the current workspace
+ getAIMessage(userInput, persona, getCurrentProject().xmlValue, abortControllerRef.current.signal, onMessage).then((res) => {
+ if (res !== undefined) {
+ let finalMessage = handler(res);
+ if (finalMessage !== undefined) {
+ setCodeBufferLoader(false);
+ setCurrentMessage((prevState) => ({
+ ...prevState, AIMessage: finalMessage, AITimestamp: timestamp,
+ }));
+ } else {
+ setCodeBufferLoader(false);
+ }
+ addBlocksToWorkspace(res, workspace)
+ .catch((e) => {
+ console.log("Error in creating block png-->", e);
+ setCurrentMessage((prevState) => ({
+ ...prevState, AIMessage: finalMessage + "\n" + Errors.error8, AITimestamp: timestamp,
+ }));
+ })
+ } else {
+ setCurrentMessage((prevState) => ({
+ ...prevState, AIMessage: Errors.error7, AITimestamp: timestamp
+ }));
+ }
+ }).catch((e) => {
+ setCodeBufferLoader(false);
+ console.log(e);
+ });
+
+ setInputValue('');
+ };
+
+ //function to pause the content
+ const handlePauseClick = () => {
+ if (abortControllerRef.current) {
+ abortControllerRef.current.abort();
+ }
+ setIsTyping(false);
+ if (loader && allChatMessages.length === currentMessage.id) {
+ setCurrentMessage((prevState) => ({
+ ...prevState, AIMessage: Errors.error7, AITimestamp: timestamp
+ }));
+ }
+ };
+
+ //Effect to update allChatMessages when currentMessage changes
+ useEffect(() => {
+ if (currentMessage.AIMessage) {
+ setAllChatMessages((prevMessages) => {
+ const updatedMessages = [...prevMessages];
+ if (updatedMessages.length > 0) {
+ updatedMessages[updatedMessages.length - 1] = currentMessage;
+ }
+ return updatedMessages;
+ });
+ } else if (currentMessage.userMessage) {
+ setAllChatMessages((prevMessages) => [...prevMessages, currentMessage]);
+ }
+ }, [currentMessage]);
+
+ // Function to apply typing effect to the latest message in allChatMessages
+ const applyTypingEffect = (fullText, typingSpeed = 20) => {
+ let currentIndex = 0;
+
+ const typeCharacter = () => {
+ setAllChatMessages((prevMessages) => {
+ const updatedMessages = [...prevMessages];
+ const latestMessage = updatedMessages[updatedMessages.length - 1];
+
+ // Update only the latest message
+ latestMessage.AIMessage = fullText.slice(0, currentIndex + 1);
+ updatedMessages[updatedMessages.length - 1] = latestMessage;
+
+ return updatedMessages;
+ });
+
+ currentIndex++;
+
+ if (currentIndex < fullText.length) {
+ setTimeout(typeCharacter, typingSpeed);
+ }
+ };
+
+ typeCharacter();
+ };
+
+ //Effect for setting persona character message
+ useEffect(() => {
+ if (persona) {
+ setAllChatMessages((prevMessages) => [...prevMessages, {
+ id: prevMessages.length + 1,
+ userMessage: "",
+ AIMessage: "",
+ userTimestamp: new Date().toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}),
+ AITimestamp: "",
+ paused: false
+ }]);
+ setTimeout(() => {
+ applyTypingEffect(ChatConstants.PersonaMessage);
+ }, 80);
+ }
+ }, [persona]);
+
+
+ // Effect to scroll chat container to bottom when messages or AI message changes
+ useEffect(() => {
+ if (chatContainerRef.current && chatContainerRef.current.scrollHeight !== null) {
+
+ chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+
+
+ }
+ }, [allChatMessages, currentMessage.AIMessage]);
+
+ // Renders chat interface
+ return (
+
+ ,
+ h2: ({node, ...props}) => ,
+ h3: ({node, ...props}) => ,
+ p: ({node, ...props}) => ,
+ strong: ({node, ...props}) => ,
+ em: ({node, ...props}) => ,
+ ul: ({node, ...props}) =>
+ {id === 2 && }
+ {codeBufferLoader && allChatMessages.length === id && (
+
+ )}
+ Generating Code
+
+
+
+
+ )}
+ {timestamp}
+
+ {drawer ? handlePauseClick(currentMessage.id)}
+ /> : ""}
+
);
+};
+
+/**
+ * Component for rendering input field and send/pause button
+ * @param inputValue
+ * @param handleSendClick
+ * @param setInputValue
+ * @param isTyping
+ * @param handlePauseClick
+ * @param codeBufferLoader
+ * @returns {Element}
+ * @constructor
+ */
+const ChatBottomBar = ({inputValue, handleSendClick, setInputValue, isTyping, handlePauseClick, codeBufferLoader}) => {
+ const theme = useContext(ThemeContext);
+
+ return (
+
: ""}
+
+
+ ![]()
setDrawer(false)} alt={"cross icon"} className={styles.crossIcon}
+ src={theme === Themes.dark ? Images.darkCrossIcon : Images.lightCrossIcon}/>
+
+ {ChatConstants.Playground}
+
+ {allChatMessages.map((conversation, index) => (
+ {drawer ?
+ setInputValue(e.target.value)}
+ onKeyPress={(e) => {
+ if (e.key === 'Enter') {
+ handleSendClick();
+ }
+ }}
+ disabled={isTyping || codeBufferLoader}
+ />
+
);
+};
+// Exports Chat component as default
+export default Chat;
diff --git a/open-code/src/components/codeAssistant/chat.module.css b/open-code/src/components/codeAssistant/chat.module.css
new file mode 100644
index 000000000..477df8f6b
--- /dev/null
+++ b/open-code/src/components/codeAssistant/chat.module.css
@@ -0,0 +1,75 @@
+.chatMainContainer {
+ display: flex;
+ justify-content: space-between;
+ height: 100%;
+ flex-direction: column;
+ font-family: Gilroy-Medium, sans-serif;
+}
+
+.chatBottomBar {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px;
+}
+
+.inputField {
+ flex: 1;
+ border: none;
+ border-radius: 20px;
+ font-size: 16px;
+ padding: 16px;
+ outline: none;
+
+
+}
+
+.sendButton {
+ margin-left: 10px;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 10px;
+ background-color: #4CAF50;
+ color: #fff;
+ cursor: pointer;
+ display: flex;
+ align-items: center; /* Center align icon vertically */
+}
+
+.sendButton:hover {
+ background-color: #3e8e41;
+}
+
+.sendIcon {
+ width: 30px;
+ height: 30px;
+ gap: 5px;
+ cursor: pointer;
+}
+
+.chatHeader {
+ text-align: center;
+ font-family: Gilroy-Medium, sans-serif;
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 12px;
+}
+
+.sendButton.disabled {
+ pointer-events: none;
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+
+.crossIcon {
+ height: 18px;
+ width: 18px;
+ cursor: pointer;
+ display: flex;
+ margin-left: auto;
+
+}
+
diff --git a/open-code/src/components/drawer/drawer.js b/open-code/src/components/drawer/drawer.js
index 1886ce7d0..37e1215cf 100644
--- a/open-code/src/components/drawer/drawer.js
+++ b/open-code/src/components/drawer/drawer.js
@@ -13,6 +13,7 @@ import QrCode from "../qrcode/qrcode";
import {Constants} from "../../utils/constants";
import CodeEditor from "../editor/codeEditor";
import {Themes} from "../../utils/constants"
+import Chat from "../codeAssistant/chat";
/**
* QrDrawer component renders a drawer with a QR code and some instructions on how to use it.
@@ -21,7 +22,7 @@ import {Themes} from "../../utils/constants"
*/
export function RightDrawer() {
const {theme} = useContext(ThemeContext) // Retrieve the current theme from the ThemeContext
- const {drawer, code, category} = useContext(StoreContext) // Retrieve the drawer state from the StoreContext
+ const {drawer, code, category, currentAssistantXml, setCurrentAssistantXml} = useContext(StoreContext) // Retrieve the drawer state from the StoreContext
const themes = useTheme();// Get the current theme breakpoints using useTheme hook
const isMobile = useMediaQuery(themes.breakpoints.down("sm"));// Determine if the screen is a mobile device using useMediaQuery hook
const [isLandscape, setIsLandscape] = useState(window.matchMedia("(max-height: 450px) and (max-width: 1000px) and (orientation: landscape)").matches);
@@ -34,6 +35,7 @@ export function RightDrawer() {
window.addEventListener("resize", handleOrientationChange);
}, []);
+
return (
<>
{(code || category !== Constants.qr) &&
@@ -44,12 +46,13 @@ export function RightDrawer() {
width: 0,
flexShrink: 0,
'& .MuiDrawer-paper': {
- width: drawer ? category !== Constants.qr ? isMobile ? isLandscape ? '35%' : '62%' : '40%' : isMobile ? isLandscape ? '32%' : '62%' : isLandscape ? '50%' : isTabletQuery ? '45%' : '25%' : isMobile ? isLandscape ? '3%' : '6%' : '2%',
+ width: drawer ? category === Constants.chat ? isMobile ? '85%' : isLandscape ? '60%' : '40%' : category !== Constants.qr ? isMobile ? isLandscape ? '35%' : '62%' : '40%' : isMobile ? isLandscape ? '32%' : '62%' : isLandscape ? '50%' : isTabletQuery ? '45%' : '25%' : isMobile ? isLandscape ? '3%' : '6%' : category === Constants.chat ? "1.7%" : '2%',
borderLeft: drawer ? theme === Themes.dark ? "0.5px solid gray" : '1px solid rgba(0, 0, 0, 0.2)' : "0.0",
backgroundColor: theme === Themes.dark ? colors.blackBackground : colors.whiteBackground,
color: theme === Themes.dark ? colors.whiteFont : colors.blackFont,
- top: isLandscape ? "4rem" : isTabletQuery ? "6rem" : "5rem",
- bottom: isMobile ? "9%" : isLandscape ? "18%" : isTabletQuery ? "4.4rem" : "4.4rem",
+ top: isTabletQuery ? "6rem" : isLandscape ? "4rem" : "5rem",
+ bottom: category !== Constants.chat ? (isMobile ? "9%" : isLandscape ? "18%" : "4.4rem") : 'none',
+ height: category === Constants.chat ? isMobile ? "calc(100% - (9% + 5rem))" : isTabletQuery ? "calc(100% - (10.4rem))" : isLandscape ? "calc(100% - (8.4rem))" : "calc(100% - 9.4rem)" : 'none'
},
}}
// Drawer is always visible and can only be closed programmatically
@@ -67,14 +70,29 @@ export function RightDrawer() {
:
-
+ 
+
+
-
+ category === Constants.chat ?
+
+
+
+ :
+
+
+
}
@@ -137,4 +155,3 @@ export const DrawerBody = (props) => {
)
}
-
diff --git a/open-code/src/components/homeComponents/header/profileOptionModal.js b/open-code/src/components/homeComponents/header/profileOptionModal.js
index 640298325..456ed4a8d 100644
--- a/open-code/src/components/homeComponents/header/profileOptionModal.js
+++ b/open-code/src/components/homeComponents/header/profileOptionModal.js
@@ -33,7 +33,7 @@ export function ProfileOptionModal(props) {
const location = useLocation();
const themes = useTheme();
const {theme, toggleTheme} = useContext(ThemeContext);
- const {isOnline, setIsDob, isDob, setIsAutoSyncEnabled, setUser} = useContext(StoreContext);
+ const {isOnline, setIsDob, isDob, setIsAutoSyncEnabled, setUser, setCategory, setDrawer} = useContext(StoreContext);
const isMobile = useMediaQuery(themes.breakpoints.down('md'));
const isSignedIn = localStorage.getItem("isSigIn") === "true";
const isHomePage = location.pathname === PathName.home;
@@ -128,7 +128,14 @@ export function ProfileOptionModal(props) {
modelStyle={{width: "14px", height: "18px"}}
icon={theme === Themes.dark ? Images.darkSyncIcon : Images.lightSyncIcon}/>
}
- {((isHomePage) || (isOnPlaygroundPage && isSignedIn)) &&
+ {(isOnPlaygroundPage && isMobile) &&
+
- theme.zIndex.drawer + 1}}
- open={editProfileLoaderOpen}
- >
-
-
- );
+ return (
+ theme.zIndex.drawer + 1}}
+ open={editProfileLoaderOpen}
+ >
+
+
);
}
useEffect(() => {
auth.onAuthStateChanged(function (currentUser) {
setUser({
- photoURL: currentUser?.photoURL,
- displayName: currentUser?.displayName,
- email: currentUser?.email,
+ photoURL: currentUser?.photoURL, displayName: currentUser?.displayName, email: currentUser?.email,
});
})
}, [isEditProfileModal, setUser])
- return (
-
- {/*delete project modal*/}
- {deleteProject &&
-
- }
-
-
- {/*logo*/}
- 
{
- if (isOnline) {
- if (localStorage.getItem("isSigIn") === "true") {
- setIsAutoSync(true)
- await autoSync().then(() => {
- setIsAutoSyncEnabled(true);
+ const {setIsAutoSyncEnabled, setDrawer, setCategory,drawer} = useContext(StoreContext);
+ return (<>
+ {location.pathname === PathName.playGround && !isMobile && !isMobileLandscape &&
+ }
+ {location.pathname === PathName.playGround && isSignedIn && !isMobile && !tabletQuery && !isMobileLandscape &&
+ {
+ if (isOnline) {
+ if (localStorage.getItem("isSigIn") === "true") {
+ setIsAutoSync(true)
+ await autoSync().then(() => {
+ setIsAutoSyncEnabled(true);
+ setIsAutoSync(false);
+ })
+ .catch((e) => {
+ errorToast("Something went wrong!")
setIsAutoSync(false);
})
- .catch((e) => {
- errorToast("Something went wrong!")
- setIsAutoSync(false);
- })
- } else {
- errorToast("Please sign-In to auto sync.")
- }
} else {
- errorToast(Constants.InternetOffMsg)
+ errorToast("Please sign-In to auto sync.")
}
+ } else {
+ errorToast(Constants.InternetOffMsg)
}
- }
- style={{height: 24}}/>
- }
- {/*help icon if screen is playground and device is not mobile*/}
- {location.pathname === PathName.playGround && !isMobile && !tabletQuery && !isMobileLandscape &&
- 
setIsHelpCenterModal(true)}
- style={{height: 24}} title={"Help"}/>
- }
- {/*if screen is playground, and it's mobile than do not show change theme icon and divider*/}
- {!(location.pathname === PathName.playGround && isMobile) &&
- <>
- {/*change theme icon*/}
- ![icon]( "{\"Theme\"}")
toggleTheme(!theme)}
- src={theme === "dark" ? Images.lightThemeIcon : Images.darkThemeIcon}
- className={`${theme === "dark" ? styles.lightThemeIcon : styles.darkThemeIcon} ${styles.iconMargin}`}/>
- {/*divider*/}
- 
-
- }
- {/*if signed in then show icon and name or else sign in option*/}
-
-
- )
+ }}
+ style={{height: 24}}/>}
+ {/*help icon if screen is playground and device is not mobile*/}
+ {location.pathname === PathName.playGround && !isMobile && !tabletQuery && !isMobileLandscape &&
+ setIsHelpCenterModal(true)}
+ style={{height: 24}} title={"Help"}/>}
+ {/*if screen is playground, and it's mobile than do not show change theme icon and divider*/}
+ {!(location.pathname === PathName.playGround && isMobile) && <>
+ {/*change theme icon*/}
+ ![icon]( "{\"Theme\"}")
toggleTheme(!theme)}
+ src={theme === "dark" ? Images.lightThemeIcon : Images.darkThemeIcon}
+ className={`${theme === "dark" ? styles.lightThemeIcon : styles.darkThemeIcon} ${styles.iconMargin}`}/>
+ {/*divider*/}
+
+ }
+ {/*if signed in then show icon and name or else sign in option*/}
+
+
+ )
}
@@ -282,14 +262,36 @@ function RightSection(params) {
function ProjectNameSection(params) {
const {anchorEl, handleClick, projectName, open, setOpen, setDeleteProject, theme, setProjectName} = params
const location = useLocation();
- return (
- //when screen is playground then show project name and if clicked on project name then show projectName with popUp
+ return (//when screen is playground then show project name and if clicked on project name then show projectName with popUp
location.pathname === PathName.playGround ? !open ?
-
- :
-
- : ""
- )
+ :
+ : "")
}
+
+/**
+ * function for chatbot window
+ * @param params
+ * @returns {Element}
+ * @constructor
+ */
+function ChatBot(params) {
+ const { setDrawer, setCategory, drawer } = params;
+
+ const handleChatClick = () => {
+ setCategory(Constants.chat);
+ setDrawer(!drawer); // Toggle the drawer state
+ };
+
+ return (
+ {children}
}
diff --git a/open-code/src/services/chatAssistant.js b/open-code/src/services/chatAssistant.js
new file mode 100644
index 000000000..8eb88a0d6
--- /dev/null
+++ b/open-code/src/services/chatAssistant.js
@@ -0,0 +1,113 @@
+import {blocklyFinalPrompt,personaFinalPrompt} from "../utils/prompt";
+
+/**
+ * API to get the assistant response with streaming
+ * @param userPrompt
+ * @param persona
+ * @param currentXML
+ * @param signal
+ * @param onMessage
+ * @returns {Promise}
+ */
+export const getAIMessage = async (userPrompt, persona, currentXML, signal, onMessage) => {
+ const url = `https://api.openai.com/v1/chat/completions`;
+
+ try {
+ const response = await fetch(url, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": `Bearer ${process.env.REACT_APP_OPENAI_API_KEY}`,
+ },
+
+ body: JSON.stringify({
+ "messages": [
+ {
+ role: 'system',
+ content: persona ? personaFinalPrompt(persona) : blocklyFinalPrompt + "\nInput XML : " + currentXML
+ },
+ {role: 'user', content: userPrompt}
+ ],
+ model: "gpt-4o-mini-2024-07-18",
+ stream: true,
+ response_format: {
+ type: "json_schema",
+ json_schema: {
+ name: "blockly_chat_assistant",
+ description: `Response structure should follow the given json schema structure:
+ $$CONTENT$$ key does not have any xml but $$RESPONSE$$ key have only xml code in it.
+ `,
+ schema: {
+ type: "object",
+ strict: true,
+ properties: {
+ $$CONTENT$$: {
+ type: "string",
+ description: `Make sure you Provide only an explanation in clear, simple text. This section should describe the purpose and usage of the Blockly blocks. Do not include any XML code or technical details in this part—just the explanation`
+ },
+ $$RESPONSE$$: {
+ type: "string",
+ description: `Ensure you Provide only valid XML code for the Blockly blocks. Do not include any explanations in this section—only XML code.`
+ },
+ },
+ required: ["$$CONTENT$$", "$$RESPONSE$$"],
+ additionalProperties: false
+ },
+ }
+ }
+ }),
+ signal
+ });
+
+ const reader = response.body.getReader();
+ const decoder = new TextDecoder();
+ let resultText = '';
+
+ while (true) {
+ const {done, value} = await reader.read();
+ if (done) break;
+
+ // Decode the stream chunk
+ const chunk = decoder.decode(value, {stream: true});
+ // Stop if the request was aborted
+ if (signal.aborted) {
+ return "Request was cancelled.";
+
+ }
+ const parsedChunk = chunk
+ .split("\n")
+ .filter(line => line.trim()) // Filter out empty lines
+ .map(line => line.replace(/^data: /, "")) // Remove "data: " prefix
+ .map(line => {
+ try {
+ return JSON.parse(line);
+ } catch (e) {
+ console.error("JSON parse error:", e);
+ return null;
+ }
+ })
+ .filter(parsed => parsed !== null);
+ for (const parsed of parsedChunk) {
+ const content = parsed?.choices[0]?.delta?.content;
+ if (content) {
+ onMessage(content); // Update UI with new content
+ resultText += content;
+ }
+ if (parsed?.choices[0]?.finish_reason === "stop") {
+ onMessage("Done");
+ return resultText;
+ }
+ }
+ }
+
+ return resultText;
+
+ } catch (error) {
+ if (error.name === 'AbortError') {
+ return "Request was cancelled.";
+ } else {
+ console.error('Error occurred:', error);
+ return "Error occurred while processing your request.";
+ }
+ }
+};
diff --git a/open-code/src/services/workspace.js b/open-code/src/services/workspace.js
index c48384377..fd89bb39a 100644
--- a/open-code/src/services/workspace.js
+++ b/open-code/src/services/workspace.js
@@ -354,7 +354,6 @@ function filterModels(modelType, assetType) {
filterLabels()
let modelsArray = []
let updatedData = localStorage.getItem(localStorageKeys.configData)
- console.log(updatedData);
if (updatedData !== " " || null) {
let data = JSON.parse(updatedData)?.filter(obj => (modelType.includes(obj.type) && obj.pathType === "FILE") || (obj.pathType === "ASSET" && obj.type === assetType))
if (data?.length === 0) {
diff --git a/open-code/src/utils/blocks.json b/open-code/src/utils/blocks.json
new file mode 100644
index 000000000..51d0dc62e
--- /dev/null
+++ b/open-code/src/utils/blocks.json
@@ -0,0 +1,1063 @@
+[
+ {
+ "blockType": "start",
+ "definition": {
+ "type": "block_type",
+ "message0": "%1 %2",
+ "args0": [
+ {
+ "type": "field_label_serializable",
+ "name": "start",
+ "text": "start"
+ },
+ {
+ "type": "input_statement",
+ "name": "start_blocks"
+ }
+ ],
+ "colour": "#4860b7",
+ "tooltip": "",
+ "helpUrl": ""
+ }
+ },
+ {
+ "blockType": "forever",
+ "definition": {
+ "type": "block_type",
+ "message0": "%1 %2",
+ "args0": [
+ {
+ "type": "field_label_serializable",
+ "name": "forever",
+ "text": "forever"
+ },
+ {
+ "type": "input_statement",
+ "name": "forever_loop_blocks"
+ }
+ ],
+ "colour": "#4860b7",
+ "tooltip": "",
+ "helpUrl": ""
+ }
+ },
+ {
+ "blockType": "wait",
+ "definition": {
+ "type": "block_type",
+ "message0": "%1 %2 ms",
+ "args0": [
+ {
+ "type": "field_label_serializable",
+ "name": "wait",
+ "text": "wait for"
+ },
+ {
+ "type": "field_number",
+ "name": "time",
+ "value": 3000,
+ "min": 0
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#4860b7",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "wait for chosen time"
+ },
+ {
+ "blockType": "soundType",
+ "definition": {
+ "type": "block_type",
+ "message0": "play sound %1 speed",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "type",
+ "options": [
+ [
+ "slow",
+ "slow"
+ ],
+ [
+ "medium",
+ "medium"
+ ],
+ [
+ "fast",
+ "fast"
+ ]
+ ]
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#709662",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "play chosen sound speed in robot phone"
+ },
+ {
+ "blockType": "soundMode",
+ "definition": {
+ "type": "block_type",
+ "message0": "play sound %1 mode",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "mode_type",
+ "options": [
+ [
+ "dual drive",
+ "dual drive"
+ ],
+ [
+ "joystick control",
+ "joystick control"
+ ],
+ [
+ "gamepad",
+ "gamepad"
+ ]
+ ]
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#709662",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "play chosen sound mode in robot phone"
+ },
+ {
+ "blockType": "forward&BackwardAtSpeed",
+ "definition": {
+ "type": "block_type",
+ "message0": "move %1 at speed %2",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "direction_type",
+ "options": [
+ [
+ "forward",
+ "moveForward"
+ ],
+ [
+ "backward",
+ "moveBackward"
+ ]
+ ]
+ },
+ {
+ "type": "field_slider",
+ "name": "slider",
+ "value": 192,
+ "min": 0,
+ "max": 255
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#d56235",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "move robot in forward or backward direction at chosen speed"
+ },
+ {
+ "blockType": "left&RightAtSpeed",
+ "definition": {
+ "type": "block_type",
+ "message0": "move %1 at speed %2",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "direction_type",
+ "options": [
+ [
+ "left",
+ "moveLeft"
+ ],
+ [
+ "right",
+ "moveRight"
+ ]
+ ]
+ },
+ {
+ "type": "field_slider",
+ "name": "slider",
+ "value": 192,
+ "min": 0,
+ "max": 255
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#d56235",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "move robot in left or right direction at chosen speed"
+ },
+ {
+ "blockType": "moveLeft&Right",
+ "definition": {
+ "type": "block_type",
+ "message0": "move %1 %2 %3 %4",
+ "args0": [
+ {
+ "type": "field_label_serializable",
+ "name": "left_name",
+ "text": "left at"
+ },
+ {
+ "type": "field_slider",
+ "name": "left_distance",
+ "value": 192,
+ "min": -255,
+ "max": 255
+ },
+ {
+ "type": "field_label_serializable",
+ "name": "right_name",
+ "text": "and right at"
+ },
+ {
+ "type": "field_slider",
+ "name": "right_distance",
+ "value": 192,
+ "min": -255,
+ "max": 255
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#d56235",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "move robot in left, right, forward, backward or circular direction at chosen speed"
+ },
+ {
+ "blockType": "movementStop",
+ "definition": {
+ "type": "block_type",
+ "message0": "%1",
+ "args0": [
+ {
+ "type": "field_label_serializable",
+ "name": "movement_stop",
+ "text": "stop car immediately"
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#ca3143",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "stop robot immediately"
+ },
+ {
+ "blockType": "sonarReading",
+ "definition": {
+ "type": "ellipse_block",
+ "message0": "sonar reading",
+ "output": "Number",
+ "colour": "#49a2a5",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "return sonar sensor readings"
+ },
+ {
+ "blockType": "speedReading",
+ "definition": {
+ "type": "ellipse_block",
+ "message0": "speed reading",
+ "output": "Number",
+ "colour": "#49a2a5",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "return speed sensor readings"
+ },
+ {
+ "blockType": "voltageDividerReading",
+ "definition": {
+ "type": "ellipse_block",
+ "message0": "voltage divider reading",
+ "output": "Number",
+ "colour": "#49a2a5",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "return voltage divider sensor readings"
+ },
+ {
+ "blockType": "wheelOdometerSensors",
+ "definition": {
+ "type": "ellipse_block",
+ "message0": " wheel odometry %1 ",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "wheel_sensors",
+ "options": [
+ [
+ "Front",
+ "frontWheelReading"
+ ],
+ [
+ "Back",
+ "backWheelReading"
+ ]
+ ]
+ }
+ ],
+ "output": "Number",
+ "colour": "#49a2a5",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "return wheel odometer sensor readings"
+ },
+ {
+ "blockType": "gyroscope_reading",
+ "definition": {
+ "type": "ellipse_block",
+ "message0": "gyroscope reading %1",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "axis",
+ "options": [
+ [
+ "x axis",
+ "x"
+ ],
+ [
+ "y axis",
+ "y"
+ ],
+ [
+ "z axis",
+ "z"
+ ]
+ ]
+ }
+ ],
+ "output": "Number",
+ "colour": "#49a2a5",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "return gyroscope sensor readings"
+ },
+ {
+ "blockType": "acceleration_reading",
+ "definition": {
+ "type": "ellipse_block",
+ "message0": "acceleration reading %1",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "axis",
+ "options": [
+ [
+ "x axis",
+ "x"
+ ],
+ [
+ "y axis",
+ "y"
+ ],
+ [
+ "z axis",
+ "z"
+ ]
+ ]
+ }
+ ],
+ "output": "Number",
+ "colour": "#49a2a5",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "return acceleration readings"
+ },
+ {
+ "blockType": "magnetic_reading",
+ "definition": {
+ "type": "ellipse_block",
+ "message0": "magnetic reading %1",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "axis",
+ "options": [
+ [
+ "x axis",
+ "x"
+ ],
+ [
+ "y axis",
+ "y"
+ ],
+ [
+ "z axis",
+ "z"
+ ]
+ ]
+ }
+ ],
+ "output": "Number",
+ "colour": "#49a2a5",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "return magnetic sensor readings"
+ },
+ {
+ "blockType": "speedControl",
+ "definition": {
+ "type": "block_type",
+ "message0": "set speed limit to %1",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "type",
+ "options": [
+ [
+ "slow",
+ "'slow'"
+ ],
+ [
+ "medium",
+ "'medium'"
+ ],
+ [
+ "fast",
+ "'fast'"
+ ]
+ ]
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#bf778b",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "set speed to chosen speed in robot app"
+ },
+ {
+ "blockType": "controllerMode",
+ "definition": {
+ "type": "block_type",
+ "message0": "switch controller to %1",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "controller",
+ "options": [
+ [
+ {
+ "src": "",
+ "width": 25,
+ "height": 25,
+ "alt": "phone"
+ },
+ "'phone'"
+ ],
+ [
+ {
+ "src": "",
+ "width": 25,
+ "height": 25,
+ "alt": "gamepad"
+ },
+ "'gamepad'"
+ ]
+ ]
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#bf778b",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "set controller mode to chosen mode in robot app"
+ },
+ {
+ "blockType": "driveModeControls",
+ "definition": {
+ "type": "block_type",
+ "message0": "switch drive mode to %1",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "controller",
+ "options": [
+ [
+ {
+ "src": "",
+ "width": 25,
+ "height": 25,
+ "alt": "dualDrive"
+ },
+ "'dualDrive'"
+ ],
+ [
+ {
+ "src": "",
+ "width": 25,
+ "height": 25,
+ "alt": "joystick"
+ },
+ "'joystick'"
+ ],
+ [
+ {
+ "src": "",
+ "width": 25,
+ "height": 25,
+ "alt": "game"
+ },
+ "'game'"
+ ]
+ ]
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#bf778b",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "set drive mode to chosen mode in robot app"
+ },
+ {
+ "blockType": "brightness",
+ "definition": {
+ "type": "block_type",
+ "message0": "set brightness of tail and head LEDs %1",
+ "args0": [
+ {
+ "type": "field_slider",
+ "name": "slider",
+ "value": 50,
+ "min": 0,
+ "max": 100
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#687c9e",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "set brightness for tail and head led lights"
+ },
+ {
+ "blockType": "indicators",
+ "definition": {
+ "type": "block_type",
+ "message0": "turn %1 indicator %2",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "side",
+ "options": [
+ [
+ "left",
+ "left"
+ ],
+ [
+ "right",
+ "right"
+ ]
+ ]
+ },
+ {
+ "type": "field_toggle",
+ "name": "TOGGLE_STATE",
+ "state": true,
+ "onText": "ON",
+ "offText": "OFF"
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#687c9e",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "to ON/OFF left or right indicators of the openbot"
+ },
+ {
+ "blockType": "brightnessHighOrLow",
+ "definition": {
+ "type": "block_type",
+ "message0": "turn LED brightness %1",
+ "args0": [
+ {
+ "type": "field_toggle",
+ "name": "TOGGLE_STATE",
+ "state": true,
+ "onText": "ON",
+ "offText": "OFF"
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#687c9e",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "to ON/OFF tail and head led lights"
+ },
+ {
+ "blockType": "disableAI",
+ "definition": {
+ "type": "block_type",
+ "message0": "disable AI",
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#ca3143",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "disable the ongoing artificial intelligence"
+ },
+ {
+ "blockType": "inputSound",
+ "definition": {
+ "type": "block_type",
+ "message0": "play sound %1",
+ "args0": [
+ {
+ "type": "field_input",
+ "name": "text",
+ "text": "move straight"
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#709662",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "Play a custom sound from robot phone that is input in the text field"
+ },
+ {
+ "blockType": "display_sensors",
+ "definition": {
+ "type": "block_type",
+ "message0": "display sensor data %1",
+ "args0": [
+ {
+ "type": "input_value",
+ "name": "value"
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#4860b7",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "display input sensor data on the robot phone"
+ },
+ {
+ "blockType": "display_string",
+ "definition": {
+ "type": "block_type",
+ "message0": "display string %1",
+ "args0": [
+ {
+ "type": "field_input",
+ "name": "text",
+ "text": "Hello"
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#4860b7",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "display input text on robot phone"
+ },
+ {
+ "blockType": "objectTracking",
+ "definition": {
+ "type": "block_type",
+ "message0": "follow a %1 using %2",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "class",
+ "options": [
+ [
+ "person",
+ "person"
+ ],
+ [
+ "bus",
+ "bus"
+ ],
+ [
+ "birds",
+ "birds"
+ ]
+ ]
+ },
+ {
+ "type": "field_dropdown",
+ "name": "models",
+ "options": [
+ [
+ "MobileNetV1-300",
+ "MobileNetV1-300"
+ ]
+ ]
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#458ff7",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "enabling object tracking to follow a chosen object at chosen model"
+ },
+ {
+ "blockType": "autopilot",
+ "definition": {
+ "type": "block_type",
+ "message0": "enable autopilot using %1",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "autopilot models",
+ "options": [
+ [
+ "CIL-Mobile-Cmd",
+ "CIL-Mobile-Cmd"
+ ]
+ ]
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#458ff7",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "enabling autopilot to run at chosen model"
+ },
+ {
+ "blockType": "navigateForwardAndLeft",
+ "definition": {
+ "type": "block_type",
+ "message0": "move to forward at %1 (cm) and left at %2 (cm) using %3",
+ "args0": [
+ {
+ "type": "field_number",
+ "name": "forward",
+ "value": 0
+ },
+ {
+ "type": "field_number",
+ "name": "left",
+ "value": 0
+ },
+ {
+ "type": "field_dropdown",
+ "name": "navigation_models",
+ "options": [
+ [
+ "PilotNet-Goal",
+ "PilotNet-Goal"
+ ]
+ ]
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#458ff7",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "enabling point goal navigation to run at chosen model"
+ },
+ {
+ "blockType": "objectDetection",
+ "definition": {
+ "type": "block_type",
+ "message0": "on %1 detected using %2 %3 do %4 on lost %5 frames %6 do %7",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "labels",
+ "options": [
+ [
+ "person",
+ "person"
+ ],
+ [
+ "bus",
+ "bus"
+ ],
+ [
+ "birds",
+ "birds"
+ ]
+ ]
+ },
+ {
+ "type": "field_dropdown",
+ "name": "models",
+ "options": [
+ [
+ "MobileNetV1-300",
+ "MobileNetV1-300"
+ ]
+ ]
+ },
+ {
+ "type": "input_dummy"
+ },
+ {
+ "type": "input_statement",
+ "name": "detect_tasks"
+ },
+ {
+ "type": "field_slider",
+ "name": "frames",
+ "value": 192,
+ "min": 1,
+ "max": 90
+ },
+ {
+ "type": "input_dummy"
+ },
+ {
+ "type": "input_statement",
+ "name": "framesLost_tasks"
+ }
+ ],
+ "colour": "#458ff7",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "enable multiple object tracking for the main part and then colation of the given task to perform tasks upon detecting a chosen object and also execute different tasks when losing the chosen frames."
+ },
+ {
+ "blockType": "multipleAIDetection",
+ "definition": {
+ "type": "block_type",
+ "message0": "enable autopilot using %1 , %2 on detecting %3 using %4 %5 Do %6",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "autopilot_models",
+ "options": [
+ [
+ "CIL-Mobile-Cmd",
+ "CIL-Mobile-Cmd"
+ ]
+ ]
+ },
+ {
+ "type": "input_dummy"
+ },
+ {
+ "type": "field_dropdown",
+ "name": "labels",
+ "options": [
+ [
+ "person",
+ "person"
+ ],
+ [
+ "bus",
+ "bus"
+ ],
+ [
+ "birds",
+ "birds"
+ ]
+ ]
+ },
+ {
+ "type": "field_dropdown",
+ "name": "objectTracking_models",
+ "options": [
+ [
+ "MobileNetV1-300",
+ "MobileNetV1-300"
+ ]
+ ]
+ },
+ {
+ "type": "input_dummy"
+ },
+ {
+ "type": "input_statement",
+ "name": "tasks"
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#458ff7",
+ "tooltip": "",
+ "helpUrl": ""
+ },
+ "working": "Enable object tracking and autopilot simultaneously to perform specified tasks upon detecting the chosen object. "
+ },
+ {
+ "blockType": "multipleObjectTracking",
+ "definition": {
+ "type": "block_type",
+ "message0": "follow a %1 using %2 , %3 on detecting %4 %5 Do %6",
+ "args0": [
+ {
+ "type": "field_dropdown",
+ "name": "labels1",
+ "options": [
+ [
+ "person",
+ "person"
+ ],
+ [
+ "bus",
+ "bus"
+ ],
+ [
+ "birds",
+ "birds"
+ ]
+ ]
+ },
+ {
+ "type": "field_dropdown",
+ "name": "models",
+ "options": [
+ [
+ "MobileNetV1-300",
+ "MobileNetV1-300"
+ ]
+ ]
+ },
+ {
+ "type": "input_dummy"
+ },
+ {
+ "type": "field_dropdown",
+ "name": "labels2",
+ "options": [
+ [
+ "person",
+ "person"
+ ],
+ [
+ "bus",
+ "bus"
+ ],
+ [
+ "birds",
+ "birds"
+ ]
+ ]
+ },
+ {
+ "type": "input_dummy"
+ },
+ {
+ "type": "input_statement",
+ "name": "tasks"
+ }
+ ],
+ "previousStatement": null,
+ "nextStatement": null,
+ "colour": "#458ff7",
+ "tooltip": "",
+ "helpUrl": ""
+ }
+ },
+ {
+ "blockType": "controls_if"
+ },
+ {
+ "blockType": "controls_ifelse"
+ },
+ {
+ "blockType": "logic_compare"
+ },
+ {
+ "blockType": "logic_operation"
+ },
+ {
+ "blockType": "logic_negate"
+ },
+ {
+ "blockType": "logic_boolean"
+ },
+ {
+ "blockType": "controls_whileUntil"
+ },
+ {
+ "blockType": "controls_repeat"
+ },
+ {
+ "blockType": "controls_flow_statements"
+ },
+ {
+ "blockType": "controls_for"
+ },
+ {
+ "blockType": "math_arithmetic"
+ },
+ {
+ "blockType": "math_number"
+ },
+ {
+ "blockType": "math_modulo"
+ },
+ {
+ "blockType": "math_single"
+ },
+ {
+ "blockType": "math_constant"
+ },
+ {
+ "blockType": "math_number_property"
+ },
+ {
+ "blockType": "math_round"
+ },
+ {
+ "blockType": "math_random_int"
+ },
+ {
+ "blockType": "variables_set"
+ },
+ {
+ "blockType": "variables_get"
+ },
+ {
+ "blockType": "math_change"
+ },
+ {
+ "blockType": "math_number"
+ }
+]
\ No newline at end of file
diff --git a/open-code/src/utils/blocksPrompt.js b/open-code/src/utils/blocksPrompt.js
new file mode 100644
index 000000000..96fe6c5c9
--- /dev/null
+++ b/open-code/src/utils/blocksPrompt.js
@@ -0,0 +1,159 @@
+const custom_blocks_prompt = `Description of some custom blocks :
+start : The start block initiates the execution of program and execute the block code single time.
+For example:- user : Move forward for 10 seconds and then stops.
+assistant : "start forever start moveForward 192 forever GT 20 moveForward 192 stop car immediately forever start OpenBot start 50 wait for 5000 100 start left ON start ON start 'fast' start 'gamepad' start 'dualDrive' start medium start dual drive start openbot forever forever forever forever frontWheelReading forever x forever x forever x start moveForward 192 wait for 3000 stop car immediately start moveLeft 200 start left at 192 and right at 255 wait for 10000 stop car immediately start stop car immediately start person MobileNetV1-300 wait for 10000 start CIL-Mobile-Cmd wait for 20000 start 20 30 PilotNet-Goal person MobileNetV1-300 90 moveForward 192 50 start CIL-Mobile-Cmd person MobileNetV1-300 moveForward 192 wait for 3000 stop car immediately forever wait for 10000 moveBackward 192 start moveForward 192 person MobileNetV1-300 90 moveForward 192
+ const xmlRegex = //g;
+
+ // If the content contains XML, replace it with an empty string
+ if (content && xmlRegex.test(content)) {
+ content = content.replace(xmlRegex, '');
+ }
+ return content ?? undefined;
+ } catch (error) {
+ console.error('JSON parsing error:', error);
+ }
+};
+
+//This function is to provide formatting on clicking pause icon
+export function cleanAndFormatResponse(response) {
+ // Replace multiple newlines (two or more) with double newlines to ensure paragraph breaks
+ let cleanedResponse = response.replace(/\n{2,}/g, '\n\n');
+
+ // Convert single newlines into spaces to prevent displaying "\n" in text
+ cleanedResponse = cleanedResponse.replace(/([^\n])\n([^\n])/g, '$1 $2');
+
+ // Ensure that numbered lists (e.g., "1. ...") are formatted correctly by keeping a newline before them
+ cleanedResponse = cleanedResponse.replace(/(\d+)\.\s+/g, '\n$1. ');
+
+ // Properly format bullet points (e.g., "- ") by keeping a newline before them
+ cleanedResponse = cleanedResponse.replace(/\s*-\s+/g, '\n- ');
+
+ // Add double newlines after periods for paragraph breaks, unless it's part of a list or bullet point
+ cleanedResponse = cleanedResponse.replace(/(?start moveForward 192 wait for 5000 stop car immediately wait for 2000 left at 100 and right at 192 "`;
+
+const blockly_prompt = `
+After explaining in simple and friendly way, update the input XML based on the user prompt according to the following rules.
+
+ tag: All Blockly XML documents start with the tag and end with the tag.
+
+ tag: Each block is represented by a tag. This tag includes a "type" attribute indicating the type of block.
+Example: tag: Fields (such as text boxes or dropdown menus) within a block are represented by the tag. This tag includes a "name" attribute indicating the name of the field in lowercase letters.
+Example: 10
+
+ tag: To connect other blocks as input, use the tag. This tag includes a "name" attribute indicating the name of the input.
+Example: ...
+
+ tag: To connect other blocks as statements, use the tag. This tag includes a "name" attribute indicating the name of the statement.
+Example: ...
+
+ tag: To connect consecutive blocks, use the tag.
+Example: ...
+
+ tag: Used to indicate shadow blocks (default blocks).
+
+ tag: Used to save specific changes or configurations of the block.
+
+The Available blocks are:
+
+Control: start, forever, wait, display_sensors, display_string, controls_if, controls_ifelse, logic_compare, logic_operation, logic_negate, logic_boolean
+
+Loops: controls_whileUntil, controls_repeat, controls_flow_statements, controls_for
+
+Operators: math_arithmetic, math_number, math_modulo, math_single, math_constant, math_number_property, math_round, math_random_int
+
+Variables: variables_set, variables_get, math_change, math_number
+
+Lights: brightness, indicators, brightnessHighOrLow
+
+Controller: speedControl, controllerMode, driveModeControls
+
+Sound: soundType, soundMode, inputSound
+
+Sensors: sonarReading, speedReading, voltageDividerReading, wheelOdometerSensors, gyroscope_reading, acceleration_reading, magnetic_reading
+
+Movement: forward&BackwardAtSpeed, left&RightAtSpeed, moveLeft&Right, movementStop
+
+AI: disableAI, objectTracking, autopilot, navigateForwardAndLeft, objectDetection, multipleAIDetection
+
+All available blocks are also defined in the following blocklyJSON - ${blocksJSON}. Each object in the array refers to a block with its unique type and definition. The definition includes an "args0" array, which contains all the block fields with its "name" and "type".
+
+Important: Ensure that the field names in the generated Blockly XML match exactly with the provided field names in args0 in blockly JSON.
+
+${example_prompt}
+
+${custom_blocks_prompt}
+
+${AI_prompt}
+
+If the user asks something related to below prompts, provide the relevant links and answers as follows:
+Build your own Robot Body: refer https://github.com/isl-org/OpenBot/blob/master/body/README.md
+Flash the Arduino Firmware: https://github.com/isl-org/OpenBot/blob/master/firmware/README.md
+Install the Android Apps: https://github.com/isl-org/OpenBot/blob/master/android/README.md
+Drive the robot via a Controller: https://github.com/isl-org/OpenBot/blob/master/controller/README.md
+Program your robot in the Playground: https://github.com/isl-org/OpenBot/blob/master/open-code/README.md
+Train your own Driving Policy: https://github.com/isl-org/OpenBot/blob/master/policy/README.md
+Related to open bot: OpenBot leverages smartphones as brains for low-cost robots. We have designed a small electric vehicle that costs about $50 and serves as a robot body. Our software stack for Android smartphones supports advanced
+robotics workloads such as person following and real-time autonomous navigation and provide the documentation link https://github.com/isl-org/OpenBot?tab=readme-ov-file
+
+If the user greets or uses common pleasantries (e.g., 'hi,' 'hello,' 'how are you?','nice'), respond appropriately to acknowledge them before guiding them back to the relevant topic. `;
+
+const response_structure = `Explain the process according to following rules :
+1.Explain the process of dragging each block from the toolbox and dropping it into the playground. Provide this explanation for each block.
+2.Include a description of the use case for each block.
+3.Suggest various additional blocks that can be added to the playground to enhance the given input.
+4.When there are greetings or not related to blocks then it should not add the previous xml to the response and respond accordingly.
+5.Ensure you are not giving xml tags in explanation part.
+VERY IMPORTANT NOTE: Explain in friendly way as you are teaching kids.
+IMPORTANT:Ensure you tell funny and quirky jokes only when user asks.
+IMPORTANT NOTE: The objectDetection block is a root block, so it should not be connected inside any other root blocks like start. Ensure that all responses respect this constraint.
+VERY IMPORTANT NOTE: The forever block is a root block, so it should not be connected inside any other root blocks like start. Ensure that all responses respect this constraint.
+6.Ensure all the VERY IMPORTANT NOTE and IMPORTANT NOTE are always followed.
+VERY IMPORTANT NOTE: Ensure that all responses respect this above constraint.
+`
+
+export const blocklyFinalPrompt = `You are an assistant for OpenBot playground who provide a detailed and professional step-by-step implementation to achieve the received input based on the following Blockly block JSON which has definition, block type and working of a block - ${blocksJSON}. ${response_structure}. Do not include the JSON in the response. ${blockly_prompt}`
+
+export const personaFinalPrompt = (personaId) => {
+ const selectedPersona = personas.filter((item) => item.key === personaId);
+ return `You are an assistant for the OpenBot Playground, providing detailed and professional step-by-step instructions to help users achieve the received input. Your responses should be influenced by the following persona characteristics:
+ Persona: ${selectedPersona[0].name} Description: ${selectedPersona[0].description} Tone: ${selectedPersona[0].tone} Personality: ${selectedPersona[0].personality}
+
+Blockly Block JSON : The Blockly JSON defines block types and their usage. Refer to this structure, but do not output it directly in the response. When providing XML, ensure field names in the generated Blockly XML match exactly with the provided field names in the JSON.${blocksJSON}. ${response_structure}. Do not include the JSON in the response. ${blockly_prompt}`
+}
+ {/*delete project modal*/}
+ {deleteProject && }
- {/*project name on center when screen is playground*/}
-
+
);
}
@@ -214,62 +198,58 @@ function RightSection(params) {
location,
isOnline,
isAutoSync,
- setIsAutoSync
+ setIsAutoSync,
} = params
const themes = useTheme();
const isMobile = useMediaQuery(themes.breakpoints.down('sm'));
const tabletQuery = window.matchMedia("(min-width: 768px) and (max-width: 1024px)").matches;
const isMobileLandscape = window.matchMedia("(max-height:440px) and (max-width: 1000px) and (orientation: landscape)").matches
const isSignedIn = localStorage.getItem("isSigIn") === "true";
- const {setIsAutoSyncEnabled} = useContext(StoreContext);
- return (
- <>
- {location.pathname === PathName.playGround && isSignedIn && !isMobile && !tabletQuery && !isMobileLandscape &&
-
+ {/*logo*/}
+
+
- );
+
+
- }
+ {/*edit profile pop up */}
+ {editProfileLoaderOpen && }
+ {/*log out pop up*/}
+ {isLogoutModal && }
+ {/*help icon pop up*/}
+ {isHelpCenterModal && }
+ {/*Session expire pop up*/}
+ {isSessionExpireModal && }
-
-
- {/* delete edit profile option popup*/}
- {isProfileModal &&
-
- }
- {/*edit profile pop up */}
- {editProfileLoaderOpen &&
- }
- {/*log out pop up*/}
- {isLogoutModal &&
-
- }
- {/*help icon pop up*/}
- {isHelpCenterModal && }
- {/*Session expire pop up*/}
- {isSessionExpireModal && }
-
+ {/* delete edit profile option popup*/}
+ {isProfileModal &&
+ 
+
+ );
+}
\ No newline at end of file
diff --git a/open-code/src/components/navBar/navbar.module.css b/open-code/src/components/navBar/navbar.module.css
index 0ed19112a..acaa378f9 100644
--- a/open-code/src/components/navBar/navbar.module.css
+++ b/open-code/src/components/navBar/navbar.module.css
@@ -4,6 +4,26 @@
cursor: pointer;
}
+.chatButton {
+ width: 3%;
+ align-items: center;
+ justify-content: center;
+ font-family: Gilroy-Medium, sans-serif;
+ position: fixed;
+ bottom: 675px;
+ right: 21em;
+ z-index: 1;
+ border: none;
+ display: flex;
+ transition: transform 0.3s, filter 0.3s;
+
+}
+
+.chatButton:hover {
+ transform: scale(1.3);
+ filter: brightness(2.5);
+}
+
.extraStyles {
margin: 10px;
}
diff --git a/open-code/src/components/personaCard/peronaCard.js b/open-code/src/components/personaCard/peronaCard.js
new file mode 100644
index 000000000..498513757
--- /dev/null
+++ b/open-code/src/components/personaCard/peronaCard.js
@@ -0,0 +1,55 @@
+import React, { useContext, useState } from 'react';
+import styles from "./personaCard.module.css";
+import { personas } from "../../utils/persona";
+import { ThemeContext } from "../../App";
+import { Themes } from "../../utils/constants";
+import { Images } from "../../utils/images";
+
+/**
+ * Component for choosing persona character
+ * @param handlePersonas
+ * @returns {Element}
+ * @constructor
+ */
+const PersonaCard = ({ handlePersonas }) => {
+ const theme = useContext(ThemeContext);
+ const [selectedPersona, setSelectedPersona] = useState(null); // State to track selected persona
+
+ const handleClick = (key) => {
+ if (!selectedPersona) { // Only allow click if no persona is selected
+ setSelectedPersona(key);
+ handlePersonas(key);
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+export default PersonaCard;
diff --git a/open-code/src/components/personaCard/personaCard.module.css b/open-code/src/components/personaCard/personaCard.module.css
new file mode 100644
index 000000000..85b325712
--- /dev/null
+++ b/open-code/src/components/personaCard/personaCard.module.css
@@ -0,0 +1,77 @@
+.personaContainer {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ padding: 1rem;
+}
+
+.personaCard {
+ background-color: #f0f0f0;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ padding: 0.5rem;
+ width: 90%;
+ text-align: justify;
+ cursor: pointer; /* Default cursor */
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.personaCard:hover {
+ transform: scale(1.05);
+ background-color: #0071C5; /* Hover background color */
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+ color: #FFFFFF;
+}
+
+/* Disable hover effect for non-selected items when one is selected */
+.personaCard:not(.selected):hover {
+ transform: none; /* No scaling on hover */
+ background-color:#0071C5 ; /* Keep the original background color */
+ box-shadow: none; /* No shadow effect */
+}
+
+/* Selected persona style */
+.selected {
+ background-color: #0071C5; /* Highlight color when selected */
+ color: #FFFFFF;
+ pointer-events: none; /* Prevent hover effects */
+}
+
+/* Dark Theme */
+.dark .personaContainer {
+ background-color: #1e1e1e;
+}
+
+.dark .personaCard {
+ background-color: #121212;
+ border: 1px solid #444;
+ color: #FFFFFF;
+}
+
+.dark .personaCard:hover {
+ background-color: #0071C5; /* Hover effect for non-selected items */
+}
+
+.dark .selected {
+ background-color: #0071C5; /* Keep selected color */
+}
+
+/* Media queries for responsiveness */
+@media (max-width: 600px) {
+ .personaContainer {
+ padding: 0.5rem;
+ }
+ .personaCard {
+ width: 100%; /* Full width on smaller screens */
+ }
+}
+.headingContainer {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.icon {
+ width: 24px;
+ height: 24px;
+}
diff --git a/open-code/src/context/context.js b/open-code/src/context/context.js
index 7f41b1e1e..bd09f446a 100644
--- a/open-code/src/context/context.js
+++ b/open-code/src/context/context.js
@@ -58,7 +58,7 @@ export default ({
isDob, setIsDob,
isAutoSyncEnabled, setIsAutoSyncEnabled,
isSessionExpireModal, setIsSessionExpireModal,
- setIsSessionExpire, isTimeoutId, setTimeoutId
+ setIsSessionExpire, isTimeoutId, setTimeoutId,
}
return
+
+
+ Choose Your Persona:
+
+ {personas.slice(0, 5).map((item) => (
+
+ handleClick(item.key)}
+ style={{
+ fontSize: '14px',
+ pointerEvents: selectedPersona ? 'none' : 'auto',
+ cursor: selectedPersona ? 'not-allowed' : 'pointer'
+ }}
+ >
+
+ ))}
+