Better handling of no models

Author: ScriptSmith

ui/src/components/ChatHeader/ChatHeader.tsx

@@ -45,6 +45,8 @@ interface ChatHeaderProps {
   /** Callback when instances change */
   onInstancesChange: (instances: ModelInstance[]) => void;
   availableModels: ModelInfo[];
+  /** Whether models are still loading */
+  isLoadingModels?: boolean;
   /** Callback when instance parameters change */
   onInstanceParametersChange?: (instanceId: string, params: ModelParameters) => void;
   /** Callback when instance label changes */
@@ -81,6 +83,7 @@ export function ChatHeader({
   selectedInstances,
   onInstancesChange,
   availableModels,
+  isLoadingModels = false,
   onInstanceParametersChange,
   onInstanceLabelChange,
   disabledInstances = [],
@@ -153,6 +156,7 @@ export function ChatHeader({
                 selectedInstances={selectedInstances}
                 onInstancesChange={onInstancesChange}
                 availableModels={availableModels}
+                isLoading={isLoadingModels}
                 onInstanceParametersChange={onInstanceParametersChange}
                 onInstanceLabelChange={onInstanceLabelChange}
                 disabledInstances={disabledInstances}
@@ -428,6 +432,7 @@ export function ChatHeader({
             selectedInstances={selectedInstances}
             onInstancesChange={onInstancesChange}
             availableModels={availableModels}
+            isLoading={isLoadingModels}
             onInstanceParametersChange={onInstanceParametersChange}
             onInstanceLabelChange={onInstanceLabelChange}
             disabledInstances={disabledInstances}

ui/src/components/ChatMessageList/ChatMessageList.tsx

@@ -103,6 +103,8 @@ interface MessageGroup {
 interface ChatMessageListProps {
   /** Whether to show loading state for models */
   isLoadingModels?: boolean;
+  /** Whether models finished loading but none are available */
+  noModelsAvailable?: boolean;
   /** Callback to regenerate a response */
   onRegenerate?: (messageId: string, model: string) => void;
   /** Callback to fork conversation from a specific message */
@@ -115,6 +117,7 @@ interface ChatMessageListProps {
 
 export function ChatMessageList({
   isLoadingModels = false,
+  noModelsAvailable = false,
   onRegenerate,
   onForkFromMessage,
   onEditAndRerun,
@@ -334,7 +337,11 @@ export function ChatMessageList({
         <div className={`mx-auto px-3 py-4 sm:px-4 sm:py-6 ${widescreenMode ? "" : "max-w-6xl"}`}>
           {!hasMessages && !hasStreamingResponses ? (
             <div className="h-[calc(100vh-280px)] sm:h-[calc(100vh-300px)] flex items-center justify-center">
-              <EmptyChat selectedModels={selectedModels} isLoadingModels={isLoadingModels} />
+              <EmptyChat
+                selectedModels={selectedModels}
+                isLoadingModels={isLoadingModels}
+                noModelsAvailable={noModelsAvailable}
+              />
             </div>
           ) : (
             <div

ui/src/components/ChatView/ChatView.tsx

@@ -176,6 +176,7 @@ export function ChatView({
           selectedInstances={selectedInstances}
           onInstancesChange={setSelectedInstances}
           availableModels={availableModels}
+          isLoadingModels={isLoadingModels}
           onInstanceParametersChange={handleInstanceParametersChange}
           onInstanceLabelChange={handleInstanceLabelChange}
           disabledInstances={disabledInstances}
@@ -199,6 +200,7 @@ export function ChatView({
       <main className="flex flex-1 flex-col overflow-hidden">
         <ChatMessageList
           isLoadingModels={isLoadingModels}
+          noModelsAvailable={!isLoadingModels && availableModels.length === 0}
           onRegenerate={onRegenerate}
           onRegenerateAll={onRegenerateAll}
           onForkFromMessage={onForkFromMessage}

ui/src/components/EmptyChat/EmptyChat.stories.tsx

@@ -112,6 +112,24 @@ export const LoadingModels: Story = {
   },
 };
 
+export const NoModelsAvailable: Story = {
+  args: {
+    selectedModels: [],
+    isLoadingModels: false,
+    noModelsAvailable: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Should show no models message
+    await expect(canvas.getByText(/no models available/i)).toBeInTheDocument();
+    await expect(canvas.getByText(/add a provider/i)).toBeInTheDocument();
+
+    // Should NOT show example prompts when no models are available
+    await expect(canvas.queryByText(/General/i)).not.toBeInTheDocument();
+  },
+};
+
 /**
  * Test: Clicking a category shows its prompts
  */

ui/src/components/EmptyChat/EmptyChat.tsx

@@ -8,13 +8,21 @@ import { EXAMPLE_PROMPT_CATEGORIES, type PromptCategory } from "./examplePrompts
 interface EmptyChatProps {
   selectedModels: string[];
   isLoadingModels?: boolean;
+  noModelsAvailable?: boolean;
 }
 
-export function EmptyChat({ selectedModels, isLoadingModels = false }: EmptyChatProps) {
+export function EmptyChat({
+  selectedModels,
+  isLoadingModels = false,
+  noModelsAvailable = false,
+}: EmptyChatProps) {
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const setPendingPrompt = useChatUIStore((s) => s.setPendingPrompt);
 
   const getMessage = () => {
+    if (noModelsAvailable) {
+      return "No models available. Add a provider in settings to get started.";
+    }
     if (selectedModels.length === 0) {
       return "Select a model to start chatting.";
     }
@@ -49,7 +57,7 @@ export function EmptyChat({ selectedModels, isLoadingModels = false }: EmptyChat
       )}
 
       {/* Example prompts section */}
-      {!isLoadingModels && (
+      {!isLoadingModels && !noModelsAvailable && (
         <div className="mt-8 w-full max-w-2xl">
           {/* Category tabs */}
           <div className="flex flex-wrap justify-center gap-2 mb-4">

ui/src/components/ModelSelector/ModelSelector.stories.tsx

@@ -298,3 +298,35 @@ function WithDuplicateSettingsStory() {
 export const WithDuplicateSettings: Story = {
   render: () => <WithDuplicateSettingsStory />,
 };
+
+function LoadingStory() {
+  const [instances, setInstances] = useState<ModelInstance[]>([]);
+  return (
+    <ModelSelector
+      selectedInstances={instances}
+      onInstancesChange={setInstances}
+      availableModels={[]}
+      isLoading={true}
+    />
+  );
+}
+
+export const Loading: Story = {
+  render: () => <LoadingStory />,
+};
+
+function NoModelsAvailableStory() {
+  const [instances, setInstances] = useState<ModelInstance[]>([]);
+  return (
+    <ModelSelector
+      selectedInstances={instances}
+      onInstancesChange={setInstances}
+      availableModels={[]}
+      isLoading={false}
+    />
+  );
+}
+
+export const NoModelsAvailable: Story = {
+  render: () => <NoModelsAvailableStory />,
+};

ui/src/components/ModelSelector/ModelSelector.tsx

@@ -43,6 +43,8 @@ interface ModelSelectorProps {
   /** Callback when instances change */
   onInstancesChange: (instances: ModelInstance[]) => void;
   availableModels: ModelInfo[];
+  /** Whether models are still loading from the API */
+  isLoading?: boolean;
   maxModels?: number;
   /** Callback when instance parameters change */
   onInstanceParametersChange?: (instanceId: string, params: ModelParameters) => void;
@@ -188,6 +190,7 @@ export function ModelSelector({
   selectedInstances,
   onInstancesChange,
   availableModels,
+  isLoading: isLoadingProp,
   maxModels = 10,
   onInstanceParametersChange,
   onInstanceLabelChange,
@@ -298,7 +301,7 @@ export function ModelSelector({
     ]);
   };
 
-  const isLoading = availableModels.length === 0;
+  const isLoading = isLoadingProp ?? false;
   const canToggleDisabled = hasMessages && !!onDisabledInstancesChange;
 
   // Convert instances to model IDs for the picker (for backward compatibility)

ui/src/pages/chat/ChatPage.tsx

@@ -37,7 +37,7 @@ export default function ChatPage() {
   const { preferences } = usePreferences();
 
   // Fetch models from API
-  const { data: modelsResponse } = useQuery(apiV1ModelsOptions());
+  const { data: modelsResponse, isPending: isLoadingModels } = useQuery(apiV1ModelsOptions());
   const availableModels: ModelInfo[] = useMemo(
     () => modelsResponse?.data?.map((m) => m as ModelInfo).filter((m) => m.id) || [],
     [modelsResponse?.data]
@@ -259,7 +259,7 @@ export default function ChatPage() {
         availableModels={availableModels}
         conversation={currentConversation}
         isStreaming={isStreaming}
-        isLoadingModels={availableModels.length === 0}
+        isLoadingModels={isLoadingModels}
         onSendMessage={handleSendMessage}
         onStopStreaming={stopStreaming}
         onClearMessages={clearMessages}