Merge branch 'main' into 656-code-line-numbers

src/layout/shell/Navbar.tsx

@@ -17,9 +17,11 @@
 import { Container } from '@/components/Container/Container';
 import { Link } from '@/components/Link/Link';
 import { Tooltip } from '@/components/Tooltip/Tooltip';
+import { useAppContext } from '@/layout/providers/AppProvider';
 import { AppIcon } from '@/modules/apps/AppIcon';
 import { AppBuilderNavbarActions } from '@/modules/apps/builder/AppBuilderNavbarActions';
 import { AssistantIcon } from '@/modules/assistants/icons/AssistantIcon';
+import { getAssistantName } from '@/modules/assistants/utils';
 import { ChatNavbarActions } from '@/modules/chat/ChatNavbarActions';
 import { ProjectSelector } from '@/modules/projects/ProjectSelector';
 import { useLayout } from '@/store/layout';
@@ -33,7 +35,6 @@ import classes from './Navbar.module.scss';
 import { SidebarProps } from './Sidebar';
 import { SidebarButton } from './SidebarButton';
 import { SkipNav } from './SkipNav';
-import { useAppContext } from '@/layout/providers/AppProvider';
 
 interface Props {
   sidebarId: SidebarProps['id'];
@@ -78,7 +79,7 @@ export function Navbar({ sidebarId, sidebarOpen }: Props) {
         return navbarProps.assistant
           ? [
               {
-                title: navbarProps.assistant.name ?? '',
+                title: getAssistantName(navbarProps.assistant),
                 icon: (
                   <AssistantIcon
                     assistant={navbarProps.assistant ?? null}

src/modules/apps/AppsHome.tsx

@@ -23,7 +23,7 @@ import { AdminView } from '@/components/AdminView/AdminView';
 import { CardsList } from '@/components/CardsList/CardsList';
 import { Link } from '@/components/Link/Link';
 import { useAppContext } from '@/layout/providers/AppProvider';
-import { ONBOARDING_AGENTS_PARAM, ONBOARDING_PARAM } from '@/utils/constants';
+import { ONBOARDING_PARAM } from '@/utils/constants';
 import { noop } from '@/utils/helpers';
 import { InfiniteData, useQueryClient } from '@tanstack/react-query';
 import { produce } from 'immer';
@@ -32,14 +32,13 @@ import { useRouter } from 'next-nprogress-bar';
 import { useSearchParams } from 'next/navigation';
 import { useState } from 'react';
 import { useDebounceValue } from 'usehooks-ts';
-import { useAssistants } from '../assistants/hooks/useAssistants';
-import { NewAgentModal } from '../onboarding/NewAgentModal';
+import { useFirstAssistant } from '../assistants/hooks/useFirstAssistatn';
+import { GeneralOnboardingModal } from '../onboarding/general/GeneralOnboardingModal';
 import { ReadOnlyTooltipContent } from '../projects/ReadOnlyTooltipContent';
 import classes from './AppsHome.module.scss';
 import blinkingBeeAnimation from './BlinkingBeeAnimation.json';
 import { useArtifacts } from './hooks/useArtifacts';
 import { AppsList } from './library/AppsList';
-import { AppsOnboardingModal } from './onboarding/AppsOnboardingModal';
 import { useArtifactsQueries } from './queries';
 import { Artifact } from './types';
 
@@ -54,8 +53,6 @@ export function AppsHome() {
   const searchParams = useSearchParams();
   const showOnboarding =
     !isProjectReadOnly && searchParams?.has(ONBOARDING_PARAM);
-  const showAgentsOnboarding =
-    !isProjectReadOnly && searchParams?.has(ONBOARDING_AGENTS_PARAM);
 
   const queryClient = useQueryClient();
   const artifactsQueries = useArtifactsQueries();
@@ -76,11 +73,9 @@ export function AppsHome() {
     isFetchingNextPage,
   } = useArtifacts({ params });
 
-  const { data: assistantsData } = useAssistants({
-    params: { limit: 1 },
+  const firstAssistant = useFirstAssistant({
     enabled: !data?.artifacts.length,
   });
-  const firstAssistant = assistantsData?.assistants.at(0);
 
   const handleDeleteArtifactSuccess = (artifact: Artifact) => {
     queryClient.setQueryData<InfiniteData<ListArtifactsResponse>>(
@@ -160,11 +155,7 @@ export function AppsHome() {
       </AdminView>
 
       {showOnboarding && (
-        <AppsOnboardingModal onRequestClose={noop} onAfterClose={noop} isOpen />
-      )}
-      {showAgentsOnboarding && (
-        <NewAgentModal
-          isOnboarding
+        <GeneralOnboardingModal
           onRequestClose={noop}
           onAfterClose={noop}
           isOpen

src/modules/apps/builder/AppBuilderProvider.tsx

@@ -16,6 +16,7 @@
 
 'use client';
 import { useStateWithRef } from '@/hooks/useStateWithRef';
+import { ARTIFACT_TEMPLATES } from '@/modules/onboarding/apps/templates';
 import { useOnboardingCompleted } from '@/modules/users/useOnboardingCompleted';
 import { useSearchParams } from 'next/navigation';
 import {
@@ -27,7 +28,6 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { ARTIFACT_TEMPLATES } from '../onboarding/templates';
 import { Artifact } from '../types';
 
 interface Props {

src/modules/assistants/AssistantsHome.tsx

@@ -32,7 +32,7 @@ import { useDebounceValue } from 'usehooks-ts';
 import { AssistantsList } from '../assistants/library/AssistantsList';
 import { useAssistantsQueries } from '../assistants/queries';
 import { Assistant } from '../assistants/types';
-import { NewAgentModal } from '../onboarding/NewAgentModal';
+import { GeneralOnboardingModal } from '../onboarding/general/GeneralOnboardingModal';
 import { ProjectHome } from '../projects/ProjectHome';
 import { ReadOnlyTooltipContent } from '../projects/ReadOnlyTooltipContent';
 import { useAssistants } from './hooks/useAssistants';
@@ -126,8 +126,7 @@ export function AssistantsHome() {
       </ProjectHome>
 
       {showOnboarding && (
-        <NewAgentModal
-          isOnboarding
+        <GeneralOnboardingModal
           onRequestClose={noop}
           onAfterClose={noop}
           isOpen

src/modules/assistants/AssistantsNav.tsx

@@ -34,13 +34,14 @@ import { Add } from '@carbon/react/icons';
 import clsx from 'clsx';
 import { useRouter } from 'next-nprogress-bar';
 import { PropsWithChildren, useState } from 'react';
-import { NewAgentModal } from '../onboarding/NewAgentModal';
+import { NewAgentModal } from '../onboarding/assistants/NewAgentModal';
 import { ASSISTANTS_ORDER_DEFAULT } from './AssistantsHome';
 import classes from './AssistantsNav.module.scss';
 import { AssistantModalRenderer } from './detail/AssistantModalRenderer';
 import { useAssistants } from './hooks/useAssistants';
 import { AssistantIcon } from './icons/AssistantIcon';
 import { Assistant } from './types';
+import { getAssistantName } from './utils';
 
 interface Props {
   enableFetch?: boolean;
@@ -83,7 +84,7 @@ export function AssistantsNav({ enableFetch, className }: Props) {
         <ul>
           {data?.assistants.map((assistant) => (
             <AgentLink key={assistant.id} assistant={assistant}>
-              {assistant.name}
+              {getAssistantName(assistant)}
             </AgentLink>
           ))}
 

src/modules/assistants/builder/AssistantBuilderProvider.tsx

@@ -53,6 +53,7 @@ import { Assistant, AssistantMetadata, AssistantTemplate } from '../types';
 import {
   decodeStarterQuestionsMetadata,
   encodeStarterQuestionsMetadata,
+  getAssistantName,
 } from '../utils';
 import { useSaveAssistant } from './useSaveAssistant';
 
@@ -315,8 +316,8 @@ function formValuesFromAssistant(
       name: assistant?.uiMetadata.icon,
       color: assistant?.uiMetadata.color ?? 'white',
     },
-    ownName: assistant?.name
-      ? `${assistant.name}${isDuplicate ? ' ( Copy )' : ''}`
+    ownName: assistant
+      ? `${getAssistantName(assistant)}${isDuplicate ? ' ( Copy )' : ''}`
       : 'New agent',
     description: assistant?.description ?? '',
     instructions: assistant?.instructions || '',

src/modules/assistants/builder/useDeleteAssistant.ts

@@ -20,6 +20,7 @@ import { useModal } from '@/layout/providers/ModalProvider';
 import { useMutation } from '@tanstack/react-query';
 import { useAssistantsQueries } from '../queries';
 import { Assistant } from '../types';
+import { getAssistantName } from '../utils';
 
 interface Props {
   assistant: Assistant;
@@ -46,7 +47,7 @@ export function useDeleteAssistant({ assistant, onSuccess }: Props) {
 
   const deleteWithConfirmation = () =>
     openConfirmation({
-      title: `Delete ${assistant.name}?`,
+      title: `Delete ${getAssistantName(assistant)}?`,
       body: 'Are you sure you want to delete this app? Once an app is deleted, it can’t be undone.',
       primaryButtonText: 'Delete agent',
       danger: true,

src/modules/assistants/hooks/useFirstAssistatn.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright 2024 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useAssistants } from './useAssistants';
+
+export function useFirstAssistant({ enabled }: { enabled?: boolean } = {}) {
+  const { data } = useAssistants({
+    params: { limit: 1 },
+    enabled,
+  });
+
+  return data?.assistants.at(0);
+}

src/modules/assistants/icons/AssistantIcon.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Assistant, AssistantTemplate } from '../types';
-import { getAssistantIconName } from '../utils';
+import { getAssistantIconName, getAssistantName } from '../utils';
 import {
   AssistantBaseIcon,
   AssistantBaseIconProps,
@@ -40,12 +40,13 @@ export function AssistantIcon({
   ...props
 }: AssistantIconProps) {
   const iconName = iconNameProps ?? getAssistantIconName(assistant);
+  const name = getAssistantName(assistant);
 
   return (
     <AssistantBaseIcon
       name={iconName}
       color={color ?? assistant?.uiMetadata.color}
-      initialLetter={assistant?.name?.at(0) ?? initialLetter}
+      initialLetter={name.at(0) ?? initialLetter}
       {...props}
     />
   );

src/modules/assistants/utils.ts

@@ -14,8 +14,10 @@
  * limitations under the License.
  */
 
+import { APP_NAME } from '@/utils/constants';
 import { simpleHashInRange } from '@/utils/helpers';
 import has from 'lodash/has';
+import { ThreadAssistant } from '../chat/types';
 import { StarterQuestion } from './builder/AssistantBuilderProvider';
 import {
   ASSISTANT_ICONS,
@@ -87,7 +89,29 @@ export function getAssistantIconName(
 }
 
 export function isAssistant(
-  assistant: Assistant | AssistantTemplate,
+  assistant: Assistant | AssistantTemplate | ThreadAssistant,
 ): assistant is Assistant {
   return 'id' in assistant;
 }
+
+export function isThreadAssistant(
+  assistant: Assistant | AssistantTemplate | ThreadAssistant,
+): assistant is ThreadAssistant {
+  return 'data' in assistant;
+}
+
+export function getAssistantName(
+  assistant: Assistant | AssistantTemplate | ThreadAssistant | null,
+): string {
+  if (!assistant) {
+    return APP_NAME;
+  }
+
+  return (
+    (isAssistant(assistant)
+      ? assistant.name || assistant.id
+      : isThreadAssistant(assistant) && assistant.data
+        ? getAssistantName(assistant.data)
+        : assistant.name) ?? APP_NAME
+  );
+}

src/modules/chat/EmptyChatView.tsx

@@ -18,10 +18,10 @@
 import { Container } from '@/components/Container/Container';
 import { useAppContext } from '@/layout/providers/AppProvider';
 import { useUserProfile } from '@/store/user-profile';
-import { APP_NAME } from '@/utils/constants';
 import clsx from 'clsx';
 import { memo } from 'react';
 import { AssistantIcon } from '../assistants/icons/AssistantIcon';
+import { getAssistantName } from '../assistants/utils';
 import classes from './EmptyChatView.module.scss';
 import { AssistantAvatar } from './layout/AssistantAvatar';
 import { Disclaimer } from './layout/Disclaimer';
@@ -43,8 +43,9 @@ export const EmptyChatView = memo(function EmptyChatView({
   const { assistant: chatAssistant, builderState } = useChat();
 
   const assistant = chatAssistant.data ?? appAssistant;
-  const assistantName =
-    (builderState ? builderState.name : assistant?.name) ?? APP_NAME;
+  const assistantName = builderState
+    ? builderState.name
+    : getAssistantName(assistant);
   const assistantDescription =
     (builderState ? builderState.description : assistant?.description) ??
     'How can I assist you?';

src/modules/chat/history/useGetThreadAssistant.ts

@@ -18,11 +18,11 @@ import { ApiError } from '@/app/api/errors';
 import { Thread } from '@/app/api/threads/types';
 import { useAppContext } from '@/layout/providers/AppProvider';
 import { useAssistantsQueries } from '@/modules/assistants/queries';
-import { APP_NAME } from '@/utils/constants';
+import { getAssistantName } from '@/modules/assistants/utils';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
-import { ThreadAssistant } from '../types';
 import { useThreadsQueries } from '../queries';
+import { ThreadAssistant } from '../types';
 
 export function useGetThreadAssistant(
   thread?: Thread | null,
@@ -81,6 +81,6 @@ export function useGetThreadAssistant(
 }
 
 export function getThreadAssistantName(assistant: ThreadAssistant) {
-  const name = assistant.data?.name ?? assistant.name;
-  return name ? `${name}${assistant.isDeleted ? ' (deleted)' : ''}` : APP_NAME;
+  const name = getAssistantName(assistant);
+  return `${name}${assistant.isDeleted ? ' (deleted)' : ''}`;
 }

src/modules/chat/providers/ChatProvider.tsx

@@ -36,6 +36,7 @@ import {
 import { useModal } from '@/layout/providers/ModalProvider';
 import { FILE_SEARCH_TOOL_DEFINITION } from '@/modules/assistants/builder/AssistantBuilderProvider';
 import { GET_USER_LOCATION_FUNCTION_TOOL } from '@/modules/assistants/tools/functionTools';
+import { getAssistantName } from '@/modules/assistants/utils';
 import {
   getToolUsageId,
   isExternalTool,
@@ -58,11 +59,11 @@ import {
 } from 'react';
 import { v4 as uuid } from 'uuid';
 import { useDeleteMessage } from '../api/useDeleteMessage';
-import { useThreadsQueries } from '../queries';
 import { THREAD_TITLE_MAX_LENGTH } from '../history/ThreadItem';
 import { useGetThreadAssistant } from '../history/useGetThreadAssistant';
 import { useChatStream } from '../hooks/useChatStream';
 import { useThreadApi } from '../hooks/useThreadApi';
+import { useThreadsQueries } from '../queries';
 import {
   ChatMessage,
   MessageWithFiles,
@@ -312,7 +313,7 @@ export function ChatProvider({
       const { thread: createdThread } = await mutateCreateThread({
         tool_resources: toolResources,
         metadata: encodeMetadata<ThreadMetadata>({
-          assistantName: assistant?.name ?? '',
+          assistantName: getAssistantName(assistant),
           assistantId: assistant?.id ?? '',
           title: truncate(message, { length: THREAD_TITLE_MAX_LENGTH }),
         }),
@@ -327,8 +328,7 @@ export function ChatProvider({
       return createdThread;
     },
     [
-      assistant?.id,
-      assistant?.name,
+      assistant,
       mutateCreateThread,
       mutateUpdateThread,
       setThread,

src/modules/chat/types.ts

@@ -18,11 +18,10 @@ import {
   MessageAttachments,
   MessageResult,
 } from '@/app/api/threads-messages/types';
-import { Assistant } from '../assistants/types';
 import { AssistantPlan, ThreadRun } from '@/app/api/threads-runs/types';
-import { VectoreStoreFileUpload } from '../knowledge/files/VectorStoreFilesUploadProvider';
 import { EntityWithDecodedMetadata } from '@/app/api/types';
-import { Thread } from '@/app/api/threads/types';
+import { Assistant } from '../assistants/types';
+import { VectoreStoreFileUpload } from '../knowledge/files/VectorStoreFilesUploadProvider';
 
 export interface ThreadAssistant {
   name?: string;

src/modules/apps/onboarding/AppTemplateCard.tsx → src/modules/onboarding/apps/AppTemplateCard.tsx

@@ -15,10 +15,10 @@
  */
 
 import { CardsListItem } from '@/components/CardsList/CardsListItem';
+import { AppIcon } from '@/modules/apps/AppIcon';
+import { AppTemplate } from '@/modules/apps/types';
 import { MouseEventHandler } from 'react';
 import classes from './AppTemplateCard.module.scss';
-import { AppTemplate } from '../types';
-import { AppIcon } from '../AppIcon';
 
 interface Props {
   template: AppTemplate;