@marimo-team/islands 0.19.7-dev38 → 0.19.7-dev39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.7-dev38",
+  "version": "0.19.7-dev39",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/app-config/ai-config.tsx

@@ -5,6 +5,7 @@ import {
   BotIcon,
   BrainIcon,
   ChevronRightIcon,
+  InfoIcon,
   PlusIcon,
   Trash2Icon,
 } from "lucide-react";
@@ -61,6 +62,7 @@ import {
 } from "../ui/accordion";
 import { Button } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
+import { DropdownMenuSeparator } from "../ui/dropdown-menu";
 import { Label } from "../ui/label";
 import { ExternalLink } from "../ui/links";
 import {
@@ -272,6 +274,32 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                 placeholder={placeholder}
                 onSelect={selectModel}
                 triggerClassName="text-sm"
+                customDropdownContent={
+                  <>
+                    <DropdownMenuSeparator />
+                    <p className="px-2 py-1.5 text-sm text-muted-secondary flex items-center gap-1">
+                      Enter a custom model
+                      <Tooltip content="Models should include the provider prefix, e.g. 'openai/gpt-4o'">
+                        <InfoIcon className="h-3 w-3" />
+                      </Tooltip>
+                    </p>
+                    <div className="px-2 py-1">
+                      <Input
+                        className="w-full border-border shadow-none focus-visible:shadow-xs"
+                        placeholder={placeholder}
+                        {...field}
+                        value={asStringOrEmpty(field.value)}
+                        onKeyDown={Events.stopPropagation()}
+                      />
+                      {value && (
+                        <IncorrectModelId
+                          value={value}
+                          includeSuggestion={false}
+                        />
+                      )}
+                    </div>
+                  </>
+                }
                 forRole={forRole}
               />
             </FormControl>

package/src/components/chat/chat-panel.tsx

@@ -433,7 +433,7 @@ const ChatPanel = () => {
     return (
       <PanelEmptyState
         title="Chat with AI"
-        description="No AI provider configured or model selected"
+        description="No AI provider configured or Chat model not selected"
         action={
           <Button
             variant="outline"

package/src/components/editor/ai/add-cell-with-ai.tsx

@@ -272,6 +272,7 @@ export const AddCellWithAI: React.FC<{
             triggerClassName="h-7 text-xs max-w-64"
             iconSize="small"
             forRole="edit"
+            showAddCustomModelDocs={true}
           />
         </div>
       </div>

package/src/components/editor/ai/ai-completion-editor.tsx

@@ -363,6 +363,7 @@ export const AiCompletionEditor: React.FC<Props> = ({
                   iconSize="small"
                   forRole="edit"
                   displayIconOnly={true}
+                  placeholder="Edit model"
                 />
               </div>
               {completion && (

package/src/components/editor/renderers/cell-array.tsx

@@ -13,6 +13,7 @@ import {
   SquareMIcon,
 } from "lucide-react";
 import { useEffect } from "react";
+import { useOpenSettingsToTab } from "@/components/app-config/state";
 import { StartupLogsAlert } from "@/components/editor/alerts/startup-logs-alert";
 import { Cell } from "@/components/editor/notebook-cell";
 import { PackageAlert } from "@/components/editor/package-alert";
@@ -253,6 +254,7 @@ const AddCellButtons: React.FC<{
   const [isAiButtonOpen, isAiButtonOpenActions] = useBoolean(false);
   const aiEnabled = useAtomValue(aiEnabledAtom);
   const canInteractWithApp = useAtomValue(canInteractWithAppAtom);
+  const { handleClick } = useOpenSettingsToTab();
 
   const buttonClass = cn(
     "mb-0 rounded-none sm:px-4 md:px-5 lg:px-8 tracking-wide no-wrap whitespace-nowrap",
@@ -320,7 +322,9 @@ const AddCellButtons: React.FC<{
         </Button>
         <Tooltip
           content={
-            aiEnabled ? null : <span>Enable via settings under AI Assist</span>
+            aiEnabled ? null : (
+              <span>AI provider not found or Edit model not selected</span>
+            )
           }
           delayDuration={100}
           asChild={false}
@@ -329,8 +333,12 @@ const AddCellButtons: React.FC<{
             className={buttonClass}
             variant="text"
             size="sm"
-            disabled={!aiEnabled || !canInteractWithApp}
-            onClick={isAiButtonOpenActions.toggle}
+            disabled={!canInteractWithApp}
+            onClick={
+              aiEnabled
+                ? isAiButtonOpenActions.toggle
+                : () => handleClick("ai", "ai-providers")
+            }
           >
             <SparklesIcon className="mr-2 size-4 shrink-0" />
             Generate with AI