Rename the component to and add Storybook stories for settings

Author: robertpiosik

README.md

@@ -32,7 +32,7 @@ Once the response is ready, suggested multi-file changes can be integrated with
 
 ⭐️ **Non-agentic nature**
 
-CWC works solely on hand-picked context. This design choice was dictated by the fact LLMs cannot truly reason—they only match patters seen in training data, therefore they can't reliably make informed decisions (especially those less pronounced in training data). Although agentic coding shows plausible results to some, it is characterized by extensive token demand, slowness of operation and more prominent hallucinations.
+CWC works solely on hand-picked context. This design choice was dictated by the fact LLMs cannot truly reason—they only match patters seen in training data, therefore they can't reliably make informed decisions (especially those less pronounced in training data). Although agentic coding show plausible results, it is characterized by slowness of operation and extensive token demand.
 
 ## <span style="background-color: #fbb100; color: black; padding: 0.2em 0.6em; border-radius: 999px">Chatbot initialization</span>
 

packages/ui/src/components/editor/settings/ApiProviders/index.ts

@@ -0,0 +1,124 @@
+import { useState } from 'react'
+import { ConfigurationsList } from './ConfigurationsList'
+
+export default {
+  component: ConfigurationsList
+}
+
+const initial_configurations: ConfigurationsList.Configuration[] = [
+  {
+    id: '1',
+    model: 'gpt-4o',
+    description: 'OpenAI - 1.0 temp',
+    is_default: true
+  },
+  {
+    id: '2',
+    model: 'claude-3-haiku-20240307',
+    description: 'Anthropic - 0.7 temp'
+  },
+  {
+    id: '3',
+    model: 'gemini-1.5-flash',
+    description: 'Google - cache on'
+  }
+]
+
+const log_action =
+  (action: string) =>
+  (...args: any[]) => {
+    console.log(action, ...args)
+  }
+
+export const Default = () => {
+  const [configurations, set_configurations] = useState(initial_configurations)
+
+  const handle_set_default = (id: string) => {
+    set_configurations(
+      configurations.map((c) => ({
+        ...c,
+        is_default: c.id == id
+      }))
+    )
+    log_action('on_set_default')(id)
+  }
+
+  const handle_unset_default = () => {
+    set_configurations(
+      configurations.map((c) => ({
+        ...c,
+        is_default: false
+      }))
+    )
+    log_action('on_unset_default')()
+  }
+
+  return (
+    <div
+      style={{
+        padding: '1rem',
+        backgroundColor: 'var(--vscode-sideBar-background)'
+      }}
+    >
+      <ConfigurationsList
+        configurations={configurations}
+        on_reorder={(reordered) => {
+          set_configurations(reordered)
+          log_action('on_reorder')(reordered)
+        }}
+        on_edit={log_action('on_edit')}
+        on_delete={log_action('on_delete')}
+        on_add={log_action('on_add')}
+        on_set_default={handle_set_default}
+        on_unset_default={handle_unset_default}
+      />
+    </div>
+  )
+}
+
+export const NoDefaultOption = () => {
+  const [configurations, set_configurations] = useState(
+    initial_configurations.map(({ is_default, ...c }) => c)
+  )
+
+  return (
+    <div
+      style={{
+        padding: '1rem',
+        backgroundColor: 'var(--vscode-sideBar-background)'
+      }}
+    >
+      <ConfigurationsList
+        configurations={configurations}
+        on_reorder={(reordered) => {
+          set_configurations(reordered)
+          log_action('on_reorder')(reordered)
+        }}
+        on_edit={log_action('on_edit')}
+        on_delete={log_action('on_delete')}
+        on_add={log_action('on_add')}
+      />
+    </div>
+  )
+}
+
+export const Empty = () => {
+  return (
+    <div
+      style={{
+        padding: '1rem',
+        backgroundColor: 'var(--vscode-sideBar-background)'
+      }}
+    >
+      <ConfigurationsList
+        configurations={[]}
+        on_reorder={log_action('on_reorder')}
+        on_edit={log_action('on_edit')}
+        on_delete={log_action('on_delete')}
+        on_add={log_action('on_add')}
+        on_set_default={log_action('on_set_default')}
+        on_unset_default={log_action('on_unset_default')}
+      />
+    </div>
+  )
+}

packages/ui/src/components/editor/settings/ConfigurationsList/ConfigurationsList.stories.tsx

@@ -1,12 +1,11 @@
-import { ApiProviders } from './ApiProviders'
+import { ModelProviders } from './ModelProviders'
 import { useState } from 'react'
 
 export default {
-  component: ApiProviders,
-  title: 'Editor/Settings/ApiProviders'
+  component: ModelProviders
 }
 
-const initialProviders: ApiProviders.Provider[] = [
+const initial_providers: ModelProviders.Provider[] = [
   {
     name: 'OpenAI',
     type: 'built-in',
@@ -28,19 +27,19 @@ const initialProviders: ApiProviders.Provider[] = [
 ]
 
 export const Default = () => {
-  const [providers, setProviders] = useState(initialProviders)
+  const [providers, set_providers] = useState(initial_providers)
   return (
     <div
       style={{
         padding: '1rem',
         backgroundColor: 'var(--vscode-sideBar-background)'
       }}
     >
-      <ApiProviders
+      <ModelProviders
         providers={providers}
         on_reorder={(reordered) => {
           console.log('reordered', reordered)
-          setProviders(reordered)
+          set_providers(reordered)
         }}
         on_add_provider={() => console.log('Add provider clicked')}
         on_delete_provider={(name) => console.log('Delete provider', name)}
@@ -59,7 +58,7 @@ export const Empty = () => {
         backgroundColor: 'var(--vscode-sideBar-background)'
       }}
     >
-      <ApiProviders
+      <ModelProviders
         providers={[]}
         on_reorder={(reordered) => console.log('reordered', reordered)}
         on_add_provider={() => console.log('Add provider clicked')}

…gs/ApiProviders/ApiProviders.module.scss …odelProviders/ModelProviders.module.scsspackages/ui/src/components/editor/settings/ApiProviders/ApiProviders.module.scss renamed to packages/ui/src/components/editor/settings/ModelProviders/ModelProviders.module.scss packages/ui/src/components/editor/settings/ApiProviders/ApiProviders.module.scss renamed to packages/ui/src/components/editor/settings/ModelProviders/ModelProviders.module.scss

@@ -1,8 +1,8 @@
-import styles from './ApiProviders.module.scss'
+import styles from './ModelProviders.module.scss'
 import { ReactSortable } from 'react-sortablejs'
 import { IconButton } from '../../IconButton'
 
-export namespace ApiProviders {
+export namespace ModelProviders {
   export type Provider = {
     name: string
     type: 'built-in' | 'custom'
@@ -21,15 +21,15 @@ export namespace ApiProviders {
 }
 
 const with_ids = (
-  providers: ApiProviders.Provider[]
-): (ApiProviders.Provider & { id: string })[] => {
+  providers: ModelProviders.Provider[]
+): (ModelProviders.Provider & { id: string })[] => {
   return providers.map((provider) => ({
     ...provider,
     id: provider.name
   }))
 }
 
-export const ApiProviders: React.FC<ApiProviders.Props> = ({
+export const ModelProviders: React.FC<ModelProviders.Props> = ({
   providers,
   on_reorder,
   on_add_provider,
@@ -103,7 +103,7 @@ export const ApiProviders: React.FC<ApiProviders.Props> = ({
         ) : (
           <div className={styles.row}>
             <div className={styles['empty-message']}>
-              No API providers configured.
+              No model providers configured.
             </div>
           </div>
         )}

…gs/ApiProviders/ApiProviders.stories.tsx …odelProviders/ModelProviders.stories.tsxpackages/ui/src/components/editor/settings/ApiProviders/ApiProviders.stories.tsx renamed to packages/ui/src/components/editor/settings/ModelProviders/ModelProviders.stories.tsx packages/ui/src/components/editor/settings/ApiProviders/ApiProviders.stories.tsx renamed to packages/ui/src/components/editor/settings/ModelProviders/ModelProviders.stories.tsx

@@ -0,0 +1 @@
+export { ModelProviders } from './ModelProviders'