Dev #709, #710, #711

app/src/client/app/PlayGroundPage.tsx

@@ -82,7 +82,19 @@ const PlayGroundPage = ({ user }: { user: User }) => {
   useEffect(() => {
     if (formSubmitMsg && currentChatDetails) {
       if (!currentChatDetails.userRespondedWithNextAction) {
-        setTriggerChatFormSubmitMsg(formSubmitMsg);
+        try {
+          const decodedMessage = decodeURIComponent(formSubmitMsg);
+          setTriggerChatFormSubmitMsg(decodedMessage);
+        } catch (err: any) {
+          console.log('Error: ' + err.message);
+          setNotificationErrorMessage('There was an error processing your message. Please start a new chat.');
+          updateCurrentChat({
+            id: activeChatId,
+            data: {
+              isChatTerminated: true,
+            },
+          });
+        }
       }
       removeQueryParameters();
     }
@@ -197,9 +209,11 @@ const PlayGroundPage = ({ user }: { user: User }) => {
                 />
               </>
             ) : (
-              <div className='z-[999999] absolute inset-0 flex items-center justify-center bg-white bg-opacity-50'>
-                <Loader />
-              </div>
+              !currentChatDetails.isChatTerminated && (
+                <div className='z-[10000] absolute inset-0 flex items-center justify-center bg-white bg-opacity-50'>
+                  <Loader />
+                </div>
+              )
             )}
           </div>
         ) : (

app/src/client/components/NotificationBox.tsx

@@ -14,7 +14,7 @@ const NotificationBox: React.FC<NotificationBoxProps> = ({ type, message, onClic
   const isSuccess = type === 'success';
 
   return (
-    <div className='fixed inset-0 flex items-center justify-center z-50 p-16 backdrop-blur-sm bg-airt-font-base/30'>
+    <div className='fixed inset-0 flex items-center justify-center z-[10000] p-16 backdrop-blur-sm bg-airt-font-base/30'>
       <div className='bg-airt-primary rounded-lg shadow-lg p-8 m-4 max-w-sm mx-auto'>
         <h2 className='text-xl font-bold mb-4 text-airt-font-base'>{isSuccess ? 'Success' : 'Error'}</h2>
         <p className='text-airt-font-base'>{message}</p>

app/src/client/components/SelectTeamToChat.tsx

@@ -1,10 +1,10 @@
 import { useState, useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
+import Select from 'react-select';
 import { type Chat } from 'wasp/entities';
 import { SelectedModelSchema } from '../interfaces/BuildPageInterfaces';
 import { CreateNewChatProps } from '../interfaces/PlaygroundPageInterface';
 import NotificationBox from './NotificationBox';
-import { SelectInput } from './form/SelectInput';
 import TextareaAutosize from 'react-textarea-autosize';
 import { createNewChat } from 'wasp/client/operations';
 
@@ -18,8 +18,8 @@ const SelectTeamToChat = ({ userTeams }: any) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const isRedirecting = useRef(false);
 
-  const handleTeamChange = (value: string) => {
-    setTeam(value);
+  const handleTeamChange = (selectedOption: { value: string; label: string } | null) => {
+    setTeam(selectedOption ? selectedOption.value : '');
   };
 
   const handleMessageChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -51,7 +51,8 @@ const SelectTeamToChat = ({ userTeams }: any) => {
       };
       const chat: Chat = await createNewChat(props);
       isRedirecting.current = true;
-      history.push(`/playground/${chat.uuid}?initiateChatMsg=${message}`);
+      const encodedMessage = encodeURIComponent(message);
+      history.push(`/playground/${chat.uuid}?initiateChatMsg=${encodedMessage}`);
     } catch (err: any) {
       setNotificationErrorMessage(`Error creating chat. Please try again later.`);
       console.log('Error: ' + err.message);
@@ -70,7 +71,12 @@ const SelectTeamToChat = ({ userTeams }: any) => {
     setNotificationErrorMessage(null);
   };
 
-  const options = allTeams ? allTeams.map((team: SelectedModelSchema) => team.json_str.name) : [];
+  const options = allTeams
+    ? allTeams.map((team: SelectedModelSchema) => ({
+        value: team.json_str.name,
+        label: team.json_str.name,
+      }))
+    : [];
 
   return (
     <div className='lg:mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10'>
@@ -81,14 +87,13 @@ const SelectTeamToChat = ({ userTeams }: any) => {
             <label className='text-airt-primary' htmlFor='selectTeam'>
               Select Team
             </label>
-            <SelectInput
+            <Select
               id='selectTeam'
-              value={team}
               options={options}
               onChange={handleTeamChange}
-              propertyTypes={null}
-              handleAddProperty={() => {}}
-              isRequired={true}
+              className='pt-1 pb-1'
+              value={options.find((option) => option.value === team) || null}
+              isSearchable={true}
             />
             {formError.team && <div style={{ color: 'red' }}>{formError.team}</div>}
             <label className='mt-2  text-airt-primary inline-block' htmlFor='setSystemMessage'>

auth_callout/packages/auth-service/package.json

@@ -8,7 +8,7 @@
   "type": "module",
   "main": "./lib/index.js",
   "devDependencies": {
-    "@types/node": "^22.5.2"
+    "@types/node": "^22.5.3"
   },
   "dependencies": {
     "@prisma/client": "^5.19.0",