Redirect to conversation on create (microsoft#97)

workbench-app/src/routes/AssistantEditor.tsx

@@ -3,7 +3,7 @@
 import { useAccount } from '@azure/msal-react';
 import { Title3, Toolbar, makeStyles, shorthands, tokens } from '@fluentui/react-components';
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { AppView } from '../components/App/AppView';
 import { Loading } from '../components/App/Loading';
 import { AssistantDelete } from '../components/Assistants/AssistantDelete';
@@ -70,6 +70,7 @@ export const AssistantEditor: React.FC = () => {
     const [createConversationMessage] = useCreateConversationMessageMutation();
     const account = useAccount();
     const siteUtility = useSiteUtility();
+    const navigate = useNavigate();
 
     if (assistantConversationsError) {
         const errorMessage = JSON.stringify(assistantConversationsError);
@@ -128,6 +129,9 @@ export const AssistantEditor: React.FC = () => {
 
         // add assistant to conversation
         await addConversationParticipant({ conversationId: conversation.id, participantId: assistantId });
+
+        // navigate to conversation
+        navigate(`/conversation/${conversation.id}`);
     };
 
     if (isLoadingAssistant || isLoadingAssistantConversations || !assistant) {

workbench-app/src/routes/Dashboard.tsx

@@ -2,6 +2,7 @@
 
 import { makeStyles, tokens } from '@fluentui/react-components';
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import { AppMenu } from '../components/App/AppMenu';
 import { AppView } from '../components/App/AppView';
 import { ExperimentalNotice } from '../components/App/ExperimentalNotice';
@@ -11,6 +12,7 @@ import { MyConversations } from '../components/Conversations/MyConversations';
 import { MyWorkflows } from '../components/Workflows/MyWorkflows';
 import { useLocalUserAccount } from '../libs/useLocalUserAccount';
 import { useSiteUtility } from '../libs/useSiteUtility';
+import { Conversation } from '../models/Conversation';
 import { useGetAssistantsQuery, useGetConversationsQuery } from '../services/workbench';
 import { useGetWorkflowDefinitionsQuery } from '../services/workbench/workflow';
 
@@ -36,6 +38,7 @@ export const Dashboard: React.FC = () => {
         isLoading: isLoadingWorkflowDefinitions,
     } = useGetWorkflowDefinitionsQuery();
     const { getUserId } = useLocalUserAccount();
+    const navigate = useNavigate();
 
     const siteUtility = useSiteUtility();
     siteUtility.setDocumentTitle('Dashboard');
@@ -55,6 +58,13 @@ export const Dashboard: React.FC = () => {
         throw new Error(`Error loading workflow definitions: ${errorMessage}`);
     }
 
+    const handleConversationCreate = React.useCallback(
+        (conversation: Conversation) => {
+            navigate(`/conversation/${conversation.id}`);
+        },
+        [navigate],
+    );
+
     const appMenuAction = <AppMenu />;
 
     if (isLoadingAssistants || isLoadingConversations || isLoadingWorkflowDefinitions) {
@@ -74,12 +84,17 @@ export const Dashboard: React.FC = () => {
             <div className={classes.root}>
                 <ExperimentalNotice />
                 <MyAssistants assistants={assistants} />
-                <MyConversations conversations={myConversations} participantId="me" />
+                <MyConversations
+                    conversations={myConversations}
+                    participantId="me"
+                    onCreate={handleConversationCreate}
+                />
                 {conversationsSharedWithMe.length > 0 && (
                     <MyConversations
                         title="Conversations Shared with Me"
                         conversations={conversationsSharedWithMe}
                         participantId="me"
+                        onCreate={handleConversationCreate}
                     />
                 )}
                 <MyWorkflows workflowDefinitions={workflowDefinitions} />