[breadboard-ui] Tweak drawable & webcam styles in LLM Content (breadb…

…oard-ai#1576) Fixes breadboard-ai#1574
eltociear · Apr 30, 2024 · 2b55477 · 2b55477
1 parent 81a43c4
commit 2b55477
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 4 deletions.
diff --git a/packages/breadboard-ui/src/elements/input/drawable/drawable.ts b/packages/breadboard-ui/src/elements/input/drawable/drawable.ts
@@ -33,6 +33,7 @@ export class DrawableInput extends LitElement {
         0 2px 3px 0 rgba(0, 0, 0, 0.23);
       --default-bb-border-radius: 8px;
       --default-bb-input-background-color: #fff;
+      --default-bb-outline: transparent;
 
       position: relative;
       display: block;
@@ -44,6 +45,7 @@ export class DrawableInput extends LitElement {
       box-shadow: var(--bb-box-shadow, var(--default-bb-box-shadow));
       border-radius: var(--bb-border-radius, var(--default-bb-border-radius));
       aspect-ratio: 4/3;
+      outline: 1px solid var(--bb-outline, var(--default-bb-outline));
     }
 
     canvas {

diff --git a/packages/breadboard-ui/src/elements/input/llm-input/llm-input.ts b/packages/breadboard-ui/src/elements/input/llm-input/llm-input.ts
@@ -226,6 +226,18 @@ export class LLMInput extends LitElement {
       color: var(--bb-neutral-600);
     }
 
+    .value bb-webcam-input {
+      --bb-border-radius: var(--bb-grid-size);
+      --bb-box-shadow: none;
+      --bb-outline: var(--bb-neutral-300);
+    }
+
+    .value bb-drawable-input {
+      --bb-border-radius: var(--bb-grid-size);
+      --bb-box-shadow: none;
+      --bb-outline: var(--bb-neutral-300);
+    }
+
     #no-parts {
       padding: 0 var(--bb-grid-size-3);
     }

diff --git a/packages/breadboard-ui/src/elements/input/webcam/webcam.ts b/packages/breadboard-ui/src/elements/input/webcam/webcam.ts
@@ -23,6 +23,7 @@ export class WebcamInput extends LitElement {
         0 2px 3px 0 rgba(0, 0, 0, 0.23);
       --default-bb-border-radius: 8px;
       --default-bb-input-background-color: #fff;
+      --default-bb-outline: transparent;
 
       display: block;
       width: 100%;
@@ -33,6 +34,7 @@ export class WebcamInput extends LitElement {
       box-shadow: var(--bb-box-shadow, var(--default-bb-box-shadow));
       border-radius: var(--bb-grid-size);
       aspect-ratio: 4/3;
+      outline: 1px solid var(--bb-outline, var(--default-bb-outline));
     }
 
     canvas {

diff --git a/packages/breadboard-ui/src/elements/node-info/schema-editor.ts b/packages/breadboard-ui/src/elements/node-info/schema-editor.ts
@@ -354,7 +354,7 @@ export class SchemaEditor extends LitElement {
             value.items.behavior?.includes("llm-content");
 
           if (isLLMObject || isArrayOfLLMObjects) {
-            let objectFormat = [value.format];
+            let objectFormat = value.format ? [value.format] : [];
             if (
               isArrayOfLLMObjects &&
               value.items &&
@@ -369,8 +369,26 @@ export class SchemaEditor extends LitElement {
                 id="${id}-format"
                 multiple
                 ?readonly=${!this.editable}
+                @input=${(evt: InputEvent) => {
+                  if (!(evt.target instanceof HTMLSelectElement)) {
+                    return;
+                  }
+
+                  if (
+                    evt.target.selectedOptions.length === 0 ||
+                    evt.target.selectedOptions[0].value !== "none"
+                  ) {
+                    return;
+                  }
+
+                  for (let i = 1; i < evt.target.options.length; i++) {
+                    evt.target.options[i].selected = false;
+                  }
+                }}
               >
-                <option value="none">Any</option>
+                <option value="none" ?selected=${objectFormat.length === 0}>
+                  Any
+                </option>
                 <option
                   value="audio-file"
                   ?selected=${objectFormat.includes("audio-file")}
@@ -792,8 +810,6 @@ export class SchemaEditor extends LitElement {
       schema.type = "object";
     }
 
-    console.log(schema);
-
     this.schema = schema;
     return true;
   }