fix(frontend): commas in selected categories messge bb-340

apps/frontend/src/modules/chat/slices/chat.slice.ts

@@ -73,10 +73,7 @@ const { actions, name, reducer } = createSlice({
 
 				state.messages.push(...messages);
 
-				state.buttonsMode = ButtonsModeOption.SUGGESTIONS_EXPLANATION;
-			})
-			.addCase(getTasksForCategories.rejected, (state) => {
-				state.dataStatus = DataStatus.REJECTED;
+				state.buttonsMode = ButtonsModeOption.SUGGESTIONS_MANIPULATION;
 			})
 			.addCase(explainTasksSuggestions.pending, (state) => {
 				state.dataStatus = DataStatus.PENDING;
@@ -92,12 +89,15 @@ const { actions, name, reducer } = createSlice({
 				state.messages.push(...messages);
 				state.buttonsMode = ButtonsModeOption.SUGGESTIONS_MANIPULATION;
 			})
+			.addCase(changeTasksSuggestion.rejected, (state) => {
+				state.dataStatus = DataStatus.REJECTED;
+			})
+
 			.addCase(changeTasksSuggestion.pending, (state) => {
 				state.dataStatus = DataStatus.PENDING;
 			})
 			.addCase(changeTasksSuggestion.fulfilled, (state, action) => {
 				const { messages, taskSuggestions } = action.payload;
-
 				state.dataStatus = DataStatus.FULFILLED;
 				state.taskSuggestions = taskSuggestions;
 

apps/frontend/src/pages/chat/libs/components/buttons-controller/libs/components/categories-selector/categories-selector.tsx

@@ -36,11 +36,9 @@ const CategoriesSelector: React.FC = () => {
 				threadId: threadId ?? "",
 			};
 
-			let namesOfSelectedCategories = "";
-
-			for (const category of newSelectedCategories) {
-				namesOfSelectedCategories += `${category.name}\n`;
-			}
+			let namesOfSelectedCategories = newSelectedCategories
+				.map((category) => category.name)
+				.join(", ");
 
 			dispatch(chatActions.setButtonsMode(ButtonsModeOption.NONE));
 			dispatch(chatActions.addAssistantTextMessage(CATEGORIES_SELECTOR_TEXT));

apps/frontend/src/pages/chat/libs/components/initial-messages/initial-messages.tsx

@@ -30,7 +30,7 @@ const InitialMessages: React.FC = () => {
 			<div className={styles["message-container"]}>
 				<Icon name="aiAssistantAvatar" />
 				<div className={styles["content-container"]}>
-					<p>here&apos;s how your wheel looks like right now:</p>
+					<p>Here&apos;s how your wheel looks like right now:</p>
 					<div className={styles["content"]}>
 						<BalanceWheelChart data={chartData} variant="chat" />
 					</div>