@marimo-team/frontend 0.14.18-dev26 → 0.14.18-dev28

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

@@ -333,11 +333,15 @@ export const ProviderSelect: React.FC<ProviderSelectProps> = ({
   );
 };
 
-const renderCopilotProvider = (
-  form: UseFormReturn<UserConfig>,
-  onSubmit: (values: UserConfig) => Promise<void>,
-  config: UserConfig,
-) => {
+const renderCopilotProvider = ({
+  form,
+  config,
+  onSubmit,
+}: {
+  form: UseFormReturn<UserConfig>;
+  config: UserConfig;
+  onSubmit: (values: UserConfig) => Promise<void>;
+}) => {
   const copilot = form.getValues("completion.copilot");
   if (copilot === false) {
     return null;
@@ -409,7 +413,7 @@ export const AiCodeCompletionConfig: React.FC<AiConfigProps> = ({
         testId="copilot-select"
       />
 
-      {renderCopilotProvider(form, onSubmit, config)}
+      {renderCopilotProvider({ form, config, onSubmit })}
     </SettingGroup>
   );
 };
@@ -419,16 +423,25 @@ const AccordionFormItem = ({
   triggerClassName,
   provider,
   children,
+  isConfigured,
 }: {
   title: string;
   triggerClassName?: string;
   provider: AiProviderIconProps["provider"];
   children: React.ReactNode;
+  isConfigured: boolean;
 }) => {
   return (
     <AccordionItem value={provider}>
       <AccordionTrigger className={triggerClassName}>
-        <AiProviderTitle provider={provider}>{title}</AiProviderTitle>
+        <AiProviderTitle provider={provider}>
+          {title}
+          {isConfigured && (
+            <span className="ml-2 px-1 rounded bg-muted text-xs font-medium border">
+              Configured
+            </span>
+          )}
+        </AiProviderTitle>
       </AccordionTrigger>
       <AccordionContent wrapperClassName="flex flex-col gap-4">
         {children}
@@ -443,6 +456,10 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
 }) => {
   const isWasmRuntime = isWasm();
 
+  const hasValue = (name: FieldPath<UserConfig>) => {
+    return !!form.getValues(name);
+  };
+
   return (
     <SettingGroup>
       <p className="text-sm text-muted-secondary">
@@ -458,6 +475,7 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
           title="OpenAI"
           provider="openai"
           triggerClassName="pt-0"
+          isConfigured={hasValue("ai.open_ai.api_key")}
         >
           <ApiKey
             form={form}
@@ -485,7 +503,11 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
           />
         </AccordionFormItem>
 
-        <AccordionFormItem title="Anthropic" provider="anthropic">
+        <AccordionFormItem
+          title="Anthropic"
+          provider="anthropic"
+          isConfigured={hasValue("ai.anthropic.api_key")}
+        >
           <ApiKey
             form={form}
             config={config}
@@ -504,7 +526,11 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
           />
         </AccordionFormItem>
 
-        <AccordionFormItem title="Google" provider="google">
+        <AccordionFormItem
+          title="Google"
+          provider="google"
+          isConfigured={hasValue("ai.google.api_key")}
+        >
           <ApiKey
             form={form}
             config={config}
@@ -523,7 +549,11 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
           />
         </AccordionFormItem>
 
-        <AccordionFormItem title="Ollama" provider="ollama">
+        <AccordionFormItem
+          title="Ollama"
+          provider="ollama"
+          isConfigured={hasValue("ai.ollama.base_url")}
+        >
           <BaseUrl
             form={form}
             config={config}
@@ -534,7 +564,40 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
           />
         </AccordionFormItem>
 
-        <AccordionFormItem title="Azure" provider="azure">
+        <AccordionFormItem
+          title="GitHub"
+          provider="github"
+          isConfigured={hasValue("ai.github.api_key")}
+        >
+          <ApiKey
+            form={form}
+            config={config}
+            name="ai.github.api_key"
+            placeholder="ghp_..."
+            testId="ai-github-api-key-input"
+            description={
+              <>
+                Your GitHub API token from{" "}
+                <Kbd className="inline">gh auth token</Kbd>.
+              </>
+            }
+          />
+          <BaseUrl
+            form={form}
+            config={config}
+            name="ai.github.base_url"
+            placeholder="https://api.githubcopilot.com/"
+            testId="ai-github-base-url-input"
+          />
+        </AccordionFormItem>
+
+        <AccordionFormItem
+          title="Azure"
+          provider="azure"
+          isConfigured={
+            hasValue("ai.azure.api_key") && hasValue("ai.azure.base_url")
+          }
+        >
           <ApiKey
             form={form}
             config={config}
@@ -560,7 +623,11 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
           />
         </AccordionFormItem>
 
-        <AccordionFormItem title="AWS Bedrock" provider="bedrock">
+        <AccordionFormItem
+          title="AWS Bedrock"
+          provider="bedrock"
+          isConfigured={hasValue("ai.bedrock.region_name")}
+        >
           <p className="text-sm text-muted-secondary mb-2">
             To use AWS Bedrock, you need to configure AWS credentials and
             region. See the{" "}
@@ -646,6 +713,10 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
         <AccordionFormItem
           title="OpenAI-Compatible"
           provider="openai-compatible"
+          isConfigured={
+            hasValue("ai.open_ai_compatible.api_key") &&
+            hasValue("ai.open_ai_compatible.base_url")
+          }
         >
           <ApiKey
             form={form}

package/src/components/editor/output/CalloutOutput.styles.ts

@@ -6,13 +6,13 @@ export const calloutStyles = cva(
   {
     variants: {
       kind: {
-        neutral: "border-(--slate-9) shadow-(--slate-8)",
+        neutral: "border-(--slate-9) shadow-(color:--slate-8)",
         // @deprecated, use danger instead
-        alert: "bg-(--red-2) border-(--red-9) shadow-(--red-8)",
-        info: "bg-(--sky-1) border-(--sky-8) shadow-(--sky-7)",
-        danger: "bg-(--red-2) border-(--red-9) shadow-(--red-8)",
-        warn: "bg-(--amber-2) border-(--amber-9) shadow-(--amber-8)",
-        success: "bg-(--grass-2) border-(--grass-9) shadow-(--grass-8)",
+        alert: "bg-(--red-2) border-(--red-9) shadow-(color:--red-8)",
+        info: "bg-(--sky-1) border-(--sky-8) shadow-(color:--sky-7)",
+        danger: "bg-(--red-2) border-(--red-9) shadow-(color:--red-8)",
+        warn: "bg-(--amber-2) border-(--amber-9) shadow-(color:--amber-8)",
+        success: "bg-(--grass-2) border-(--grass-9) shadow-(color:--grass-8)",
       },
     },
     defaultVariants: {

package/src/components/editor/renderers/CellArray.tsx

@@ -341,7 +341,7 @@ const AddCellButtons: React.FC<{
           "shadow-sm border border-border rounded transition-all duration-200 overflow-hidden divide-x divide-border flex",
           !isAiButtonOpen && "w-fit",
           isAiButtonOpen &&
-            "opacity-100 w-full max-w-4xl shadow-lg shadow-(--blue-3)",
+            "opacity-100 w-full max-w-4xl shadow-lg shadow-(color:--blue-3)",
           className,
         )}
       >

package/src/core/ai/ids/__tests__/ids.test.ts

@@ -26,6 +26,7 @@ describe("AiModelId", () => {
         "google",
         "ollama",
         "bedrock",
+        "github",
       ];
 
       providers.forEach((provider) => {
@@ -67,6 +68,12 @@ describe("AiModelId", () => {
         expect(modelId.shortModelId).toBe("titan-text");
       });
 
+      it("should parse github qualified id", () => {
+        const modelId = AiModelId.parse("github/gpt-4o");
+        expect(modelId.providerId).toBe("github");
+        expect(modelId.shortModelId).toBe("gpt-4o");
+      });
+
       it("should handle multiple slashes", () => {
         const modelId = AiModelId.parse("openai/gpt-4/turbo");
         expect(modelId.providerId).toBe("openai");
@@ -171,6 +178,7 @@ describe("AiModelId", () => {
         "google",
         "ollama",
         "bedrock",
+        "github",
       ];
 
       providers.forEach((provider) => {

package/src/core/ai/ids/ids.ts

@@ -10,6 +10,7 @@ export const PROVIDERS = [
   "bedrock",
   "deepseek",
   "azure",
+  "github",
 ] as const;
 export type ProviderId = (typeof PROVIDERS)[number];
 

package/dist/assets/_baseMap-DrbRr9s_.js

@@ -1 +0,0 @@
-import{b as m}from"./_baseEach-BvIVAeE-.js";import{x as s}from"./index-Bg-oxR2t.js";function e(r,o){var a=-1,t=s(r)?Array(r.length):[];return m(r,function(n,f,i){t[++a]=o(n,f,i)}),t}export{e as b};

package/dist/assets/channel-C5D8_wdC.js

@@ -1 +0,0 @@
-import{U as s,C as o}from"./mermaid-Dn9IUXi8.js";const n=(a,r)=>s.lang.round(o.parse(a)[r]);export{n as c};

package/dist/assets/classDiagram-M3E45YP4-Bzxtjbca.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as t,C as o}from"./chunk-SZ463SBG-DKY2KPhj.js";import{_ as e}from"./mermaid-Dn9IUXi8.js";import"./transform-B8bpuzxV.js";import"./chunk-E2GYISFI-DGILtsZz.js";import"./chunk-BFAMUDN2-CLGtBusC.js";import"./chunk-SKB7J2MH-xs1kEiQZ.js";import"./index-Bg-oxR2t.js";import"./step-BwsUM5iJ.js";import"./timer-BwIYMJWC.js";var i={parser:t,get db(){return new o},renderer:s,styles:a,init:e(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{i as diagram};

package/dist/assets/classDiagram-v2-YAWTLIQI-Bzxtjbca.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as t,C as o}from"./chunk-SZ463SBG-DKY2KPhj.js";import{_ as e}from"./mermaid-Dn9IUXi8.js";import"./transform-B8bpuzxV.js";import"./chunk-E2GYISFI-DGILtsZz.js";import"./chunk-BFAMUDN2-CLGtBusC.js";import"./chunk-SKB7J2MH-xs1kEiQZ.js";import"./index-Bg-oxR2t.js";import"./step-BwsUM5iJ.js";import"./timer-BwIYMJWC.js";var i={parser:t,get db(){return new o},renderer:s,styles:a,init:e(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{i as diagram};

package/dist/assets/clone-DngVHtKT.js

@@ -1 +0,0 @@
-import{b as n}from"./_baseUniq-Cz-AR5wG.js";function o(r){return n(r,4)}export{o as c};