shelley: ui: Add a hint when no AI models are configured.

xleine created 3 months ago

Change summary

ui/src/components/ChatInterface.tsx | 14 +++++++++++---
ui/src/styles.css                   | 23 +++++++++++------------
2 files changed, 22 insertions(+), 15 deletions(-)

Detailed changes

ui/src/components/ChatInterface.tsx

@@ -1205,9 +1205,17 @@ function ChatInterface({
               </a>
               .
             </p>
-            <p className="text-sm" style={{ color: "var(--text-secondary)" }}>
-              Send a message to start the conversation.
-            </p>
+            {models.length === 0 ? (
+              <div className="add-model-hint">
+                <p className="text-sm" style={{ color: "var(--text-secondary)" }}>
+                  No AI models configured. Press <kbd>Ctrl</kbd><span>+</span><kbd>K</kbd> or <kbd>⌘</kbd><span>+</span><kbd>K</kbd> to add a model.
+                </p>
+              </div>
+            ) : (
+              <p className="text-sm" style={{ color: "var(--text-secondary)" }}>
+                Send a message to start the conversation.
+              </p>
+            )}
           </div>
         </div>
       );

ui/src/styles.css

@@ -4073,18 +4073,6 @@ svg {
   flex-shrink: 0;
 }
 
-.command-palette-shortcut kbd,
-.command-palette-footer kbd {
-  display: inline-block;
-  padding: 0.125rem 0.375rem;
-  font-size: 0.75rem;
-  font-family: inherit;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-color);
-  border-radius: 0.25rem;
-  color: var(--text-secondary);
-}
-
 .command-palette-list {
   flex: 1;
   overflow-y: auto;
@@ -4802,6 +4790,17 @@ svg {
   padding-bottom: 0.5rem;
 }
 
+kbd {
+  display: inline-block;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.75rem;
+  font-family: inherit;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: 0.25rem;
+  color: var(--text-secondary);
+}
+
 /* System Prompt View */
 .system-prompt-view {
   background: var(--gray-100);