Apply a default system instruction for coding assistance when none is specified, and refactor the preset editing UI to use collapsible fieldsets and improve field presentation

Author: robertpiosik

packages/browser/src/content-scripts/send-prompt-content-script/chatbots/ai-studio.ts

@@ -3,6 +3,7 @@ import { CHATBOTS } from '@shared/constants/chatbots'
 import { show_response_ready_notification } from '../utils/show-response-ready-notification'
 import { add_apply_response_button } from '../utils/add-apply-response-button'
 import { report_initialization_error } from '../utils/report-initialization-error'
+import { default_system_instructions } from '../constants/default-system-instructions'
 
 export const ai_studio: Chatbot = {
   wait_until_ready: async () => {
@@ -30,8 +31,8 @@ export const ai_studio: Chatbot = {
     })
   },
   enter_system_instructions: async (chat) => {
-    const system_instructions = chat.system_instructions
-    if (!system_instructions) return
+    const system_instructions =
+      chat.system_instructions || default_system_instructions
     await open_panel()
     const system_instructions_button = document.querySelector(
       'button[data-test-system-instructions-card]'

packages/browser/src/content-scripts/send-prompt-content-script/chatbots/open-webui.ts

@@ -4,6 +4,7 @@ import {
   observe_for_responses
 } from '../utils/add-apply-response-button'
 import { report_initialization_error } from '../utils/report-initialization-error'
+import { default_system_instructions } from '../constants/default-system-instructions'
 
 export const open_webui: Chatbot = {
   wait_until_ready: async () => {
@@ -23,7 +24,8 @@ export const open_webui: Chatbot = {
     await new Promise((resolve) => setTimeout(resolve, 500))
   },
   enter_system_instructions: async (chat) => {
-    const system_instructions = chat.system_instructions
+    const system_instructions =
+      chat.system_instructions || default_system_instructions
     if (!system_instructions) return
     const controls_button = document.querySelector(
       'button[aria-label="Controls"]'

packages/browser/src/content-scripts/send-prompt-content-script/chatbots/openrouter.ts

@@ -4,6 +4,7 @@ import {
   observe_for_responses
 } from '../utils/add-apply-response-button'
 import { report_initialization_error } from '../utils/report-initialization-error'
+import { default_system_instructions } from '../constants/default-system-instructions'
 
 const show_options_modal = async (function_name: string) => {
   const options_button = Array.from(
@@ -58,7 +59,8 @@ export const openrouter: Chatbot = {
     await new Promise((resolve) => setTimeout(resolve, 500))
   },
   enter_system_instructions: async (chat) => {
-    const system_instructions = chat.system_instructions
+    const system_instructions =
+      chat.system_instructions || default_system_instructions
     if (!system_instructions) return
     if (!(await show_options_modal('enter_system_instructions'))) return
     const textarea = document.querySelector(

packages/browser/src/content-scripts/send-prompt-content-script/constants/default-system-instructions.ts

@@ -0,0 +1 @@
+export const default_system_instructions = "You're a helpful coding assistant."

packages/ui/src/components/editor/panel/Field/Field.module.scss

@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
-  padding: 0 12px;
 
   &__label {
     font-size: 12px;

packages/ui/src/components/editor/panel/Field/Field.tsx

@@ -5,15 +5,16 @@ type Props = {
   html_for?: string
   info?: React.ReactNode
   children?: React.ReactNode
-  title?: string
 }
 
 export const Field: React.FC<Props> = (props) => {
   return (
-    <div className={styles.field} title={props.title}>
-      <label htmlFor={props.html_for} className={styles.field__label}>
-        {props.label}
-      </label>
+    <div className={styles.field}>
+      {props.label && (
+        <label htmlFor={props.html_for} className={styles.field__label}>
+          {props.label}
+        </label>
+      )}
       {props.children}
       {props.info && <div className={styles.field__info}>{props.info}</div>}
     </div>

packages/ui/src/components/editor/panel/Fieldset/Fieldset.module.scss

@@ -1,25 +1,21 @@
 .fieldset {
   display: flex;
   flex-direction: column;
+  border: 1px solid var(--cwc-border-color-dimmed);
+  border-radius: 10px;
 
   &__label {
-    padding: 8px 12px 4px;
+    padding: 8px 12px 8px 12px;
     font-size: 11px;
     font-weight: 600;
-    color: var(--vscode-descriptionForeground);
+    color: var(--cwc-text-color-dimmed);
     text-transform: uppercase;
-  }
-
-  &__header {
-    height: var(--list-item-height);
-    padding: 0 12px;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    cursor: pointer;
+    gap: 4px;
 
-    &:hover {
-      background-color: var(--vscode-list-hoverBackground);
+    &--interactive {
+      cursor: pointer;
     }
 
     &__left {
@@ -33,5 +29,6 @@
     display: flex;
     flex-direction: column;
     gap: 8px;
+    padding: 2px 12px 12px 12px;
   }
 }

packages/ui/src/components/editor/panel/Fieldset/Fieldset.stories.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react'
+import { Fieldset } from './Fieldset'
+import { Field } from '../Field'
+
+export default {
+  component: Fieldset
+}
+
+export const Default = () => (
+  <div style={{ width: '300px' }}>
+    <Fieldset label="General Settings">
+      <Field label="Name">
+        <div
+          style={{
+            height: '24px',
+            border: '1px solid var(--vscode-input-border)',
+            background: 'var(--vscode-input-background)'
+          }}
+        />
+      </Field>
+      <Field label="Description">
+        <div
+          style={{
+            height: '24px',
+            border: '1px solid var(--vscode-input-border)',
+            background: 'var(--vscode-input-background)'
+          }}
+        />
+      </Field>
+    </Fieldset>
+  </div>
+)
+
+export const Collapsible = () => {
+  const [is_collapsed, set_is_collapsed] = useState(false)
+
+  return (
+    <div style={{ width: '300px' }}>
+      <Fieldset
+        label="Advanced Settings"
+        is_collapsed={is_collapsed}
+        on_toggle_collapsed={() => set_is_collapsed(!is_collapsed)}
+      >
+        <Field label="API Key">
+          <div
+            style={{
+              height: '24px',
+              border: '1px solid var(--vscode-input-border)',
+              background: 'var(--vscode-input-background)'
+            }}
+          />
+        </Field>
+        <Field label="Secret">
+          <div
+            style={{
+              height: '24px',
+              border: '1px solid var(--vscode-input-border)',
+              background: 'var(--vscode-input-background)'
+            }}
+          />
+        </Field>
+      </Fieldset>
+    </div>
+  )
+}
+
+export const CollapsedByDefault = () => {
+  const [is_collapsed, set_is_collapsed] = useState(true)
+
+  return (
+    <div style={{ width: '300px' }}>
+      <Fieldset
+        label="Experimental Features"
+        is_collapsed={is_collapsed}
+        on_toggle_collapsed={() => set_is_collapsed(!is_collapsed)}
+      >
+        <div style={{ padding: '8px', fontSize: '12px' }}>
+          These features are experimental and may change.
+        </div>
+      </Fieldset>
+    </div>
+  )
+}

packages/ui/src/components/editor/panel/Fieldset/Fieldset.tsx

@@ -18,19 +18,20 @@ export const Fieldset: React.FC<Props> = ({
     return (
       <div className={styles.fieldset}>
         <div
-          className={styles.fieldset__header}
+          className={cn(
+            styles.fieldset__label,
+            styles['fieldset__label--interactive']
+          )}
           onClick={on_toggle_collapsed}
           role="button"
         >
-          <div className={styles.fieldset__header__left}>
-            <span
-              className={cn('codicon', {
-                'codicon-chevron-down': !is_collapsed,
-                'codicon-chevron-right': is_collapsed
-              })}
-            />
-            <span>{label}</span>
-          </div>
+          <span>{label}</span>
+          <span
+            className={cn('codicon', {
+              'codicon-chevron-down': !is_collapsed,
+              'codicon-chevron-right': is_collapsed
+            })}
+          />
         </div>
         {!is_collapsed && (
           <div className={styles.fieldset__content}>{children}</div>

packages/vscode/src/views/panel/backend/message-handlers/handle-update-preset.ts

@@ -39,7 +39,7 @@ export const handle_update_preset = async (
 
   const are_presets_equal = (a: Preset, b: Preset): boolean => {
     return (
-      (a.name == b.name || !b.name) &&
+      a.name == b.name &&
       a.chatbot == b.chatbot &&
       a.prompt_prefix == b.prompt_prefix &&
       a.prompt_suffix == b.prompt_suffix &&