fix(toolkit): add loading screens and fix issues with code snippet (#662

)

* fix(toolkit): add loading screens and fix issues with code snippet

* fix(toolkit): add loading screens and fix issues with code snippet

src/interfaces/assistants_web/package.json

@@ -9,7 +9,7 @@
     "yarn": "9999"
   },
   "scripts": {
-    "dev": "next dev --port 4444 --turbo",
+    "dev": "next dev --port 4444",
     "build": "next build",
     "lint": "next lint",
     "ts-lint": "tsc -noEmit -incremental -watch",

src/interfaces/assistants_web/src/app/(main)/(chat)/Chat.tsx

@@ -52,7 +52,7 @@ const Chat: React.FC<{ agentId?: string; conversationId?: string }> = ({
     if (conversationId) {
       setConversation({ id: conversationId });
     }
-  }, []);
+  }, [agent, tools, conversation]);
 
   useEffect(() => {
     if (!conversation) return;

src/interfaces/assistants_web/src/app/(main)/(chat)/a/[agentId]/c/[conversationId]/loading.tsx

@@ -0,0 +1,11 @@
+import { Spinner } from '@/components/Shared';
+
+const Loading: React.FC<React.PropsWithChildren> = () => {
+  return (
+    <div className="flex h-screen w-full items-center justify-center bg-marble-980 dark:bg-volcanic-150">
+      <Spinner className="h-10 w-10" />
+    </div>
+  );
+};
+
+export default Loading;

src/interfaces/assistants_web/src/app/(main)/(chat)/a/[agentId]/loading.tsx

@@ -0,0 +1,11 @@
+import { Spinner } from '@/components/Shared';
+
+const Loading: React.FC<React.PropsWithChildren> = () => {
+  return (
+    <div className="flex h-screen w-full items-center justify-center bg-marble-980 dark:bg-volcanic-150">
+      <Spinner className="h-10 w-10" />
+    </div>
+  );
+};
+
+export default Loading;

src/interfaces/assistants_web/src/app/(main)/(chat)/c/[conversationId]/loading.tsx

@@ -0,0 +1,11 @@
+import { Spinner } from '@/components/Shared';
+
+const Loading: React.FC<React.PropsWithChildren> = () => {
+  return (
+    <div className="flex h-screen w-full items-center justify-center bg-marble-980 dark:bg-volcanic-150">
+      <Spinner className="h-10 w-10" />
+    </div>
+  );
+};
+
+export default Loading;

src/interfaces/assistants_web/src/app/(main)/(chat)/layout.tsx

@@ -46,7 +46,7 @@ const ChatLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
         as="div"
         className={cn(
           'border-marble-950 bg-marble-980 px-6 dark:border-volcanic-200 dark:bg-volcanic-100',
-          'absolute inset-0 flex-shrink-0 rounded-lg border lg:static lg:w-[360px] lg:rounded-none lg:rounded-r-lg lg:border-y lg:border-l-0 lg:border-r'
+          'absolute inset-0 rounded-lg border lg:static lg:w-[360px] lg:rounded-none lg:rounded-r-lg lg:border-y lg:border-l-0 lg:border-r'
         )}
         enter="transition-all transform ease-in-out duration-300"
         enterFrom="translate-x-full"

src/interfaces/assistants_web/src/components/Agents/DeleteAgent.tsx

@@ -40,7 +40,7 @@ export const DeleteAgent: React.FC<Props> = ({ name, agentId, onClose }) => {
           onClick={handleDeleteAgent}
           disabled={isPending}
           icon="arrow-right"
-          theme="danger"
+          theme="coral"
           iconPosition="end"
         />
       </div>

src/interfaces/assistants_web/src/components/Agents/RightPanel.tsx

@@ -20,8 +20,7 @@ type Props = {};
 
 const RightPanel: React.FC<Props> = () => {
   const [isDeletingFile, setIsDeletingFile] = useState(false);
-  const { disabledAssistantKnowledge, setRightPanelOpen } =
-    useSettingsStore();
+  const { disabledAssistantKnowledge, setRightPanelOpen } = useSettingsStore();
   const { agentId, conversationId } = useChatRoutes();
   const { data: agent } = useAgent({ agentId });
   const { theme } = useBrandedColors(agentId);

src/interfaces/assistants_web/src/context/index.tsx

@@ -5,11 +5,7 @@ import { ModalContext, ModalProvider } from '@/context/ModalContext';
 export const ContextStore: React.FC<{
   children: React.ReactNode;
 }> = ({ children }) => {
-  return (
-    <ModalProvider>
-      {children}
-    </ModalProvider>
-  );
+  return <ModalProvider>{children}</ModalProvider>;
 };
 
 export const useContextStore = () => {

src/interfaces/assistants_web/src/hooks/chat.ts

@@ -254,7 +254,7 @@ export const useChat = (config?: { onSend?: (msg: string) => void }) => {
               documentsMap = { ...documentsMap, ...newDocumentsMap };
               outputFiles = { ...outputFiles, ...newOutputFilesMap };
               saveOutputFiles({ ...savedOutputFiles, ...outputFiles });
-              
+
               // we are only interested in web_search results
               // ignore search results of pyhton interpreter tool
               if (

src/interfaces/assistants_web/src/styles/code-style.css

@@ -235,7 +235,7 @@
   .hljs-function,
   .hljs-symbol,
   .hljs-bullet {
-    color: #990073;
+    color: #e074fb;
   }
 
   .hljs-built_in {