feat(prompt-tuning): new Prompt Tuning component (#201)

* [feat] modal open on button click * [feat] modal open close working * [feat] edit modal html/css * [feat] task_view import for prompt list * [feat] semantic search view in list * [feat] view name and dropdown list * [feat] property name on hover * [feat] edit modal working except view * [feat] view dropdown complete * [feat] tooltips & inline dropdown * [feat] Rename, add variables & parameters * [feat] rename event complete * [feat] event for closing tag * [feat] add context variable & parameter events * [feat] save prompt event * [feat] delete prompt action event * [feat] select view event * [feat] Add new prompt done * [feat] data as json promptSamples * [feat] storybook args streamlined * [feat] parameters moved to right * [feat] function controls documented * [feat] add new prompt event * [fix] improve closing tag * [fix] linting * [fix] lint extension * chore(package): remove changelog and edit version * chore(prompt-tuning): edit boolean attribute --------- Co-authored-by: Anna Wen <54281166+annawen1@users.noreply.github.com>
carbon-design-system · Jun 27, 2024 · 908ef0e · 908ef0e
1 parent 60091e5
commit 908ef0e
Show file tree

Hide file tree

Showing 16 changed files with 1,820 additions and 0 deletions.
diff --git a/packages/prompt-tuning/__stories__/prompt-tuning.mdx b/packages/prompt-tuning/__stories__/prompt-tuning.mdx
@@ -0,0 +1,53 @@
+import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
+import * as PromptTuningStories from './prompt-tuning.stories';
+import packageJson from '../package.json';
+
+<Meta of={PromptTuningStories} />
+
+# Prompt Tuning
+
+> 💡 Check our
+> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-labs/tree/main/packages/prompt-tuning/examples/prompt-tuning)
+> example implementation.
+
+[![Edit carbon-labs](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-labs/tree/main/packages/prompt-tuning/examples/prompt-tuning)
+
+## Overview
+
+The prompt-tuning component.
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon-labs/ai-prompt-tuning/es/index.js';
+```
+
+### Styles
+
+You'll also need to import the theming tokens from `@carbon/styles` either from
+npm or from our CDN helpers. Checkout our Stackblitz example above to see how
+that is implemented.
+
+{/* prettier-ignore */}
+<Markdown>{`${cdnJs({ components: ['prompt-tuning'] },packageJson)}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
+
+### HTML
+
+```html
+<clabs-prompt-tuning
+  color="green"
+  tooltip-position="bottom"
+  tooltip-text="Tooltip text">
+  PromptTuning text
+</clabs-prompt-tuning>
+```
+
+### &lt;clabs-prompt-tuning&gt; attributes and properties
+
+<ArgTypes of="clabs-prompt-tuning" />
diff --git a/packages/prompt-tuning/__stories__/prompt-tuning.stories.js b/packages/prompt-tuning/__stories__/prompt-tuning.stories.js
@@ -0,0 +1,211 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import '../components/prompt-tuning/prompt-tuning';
+import { html } from 'lit';
+import { action } from '@storybook/addon-actions';
+
+import '@carbon/web-components/es/components/button/index.js';
+import semantic_search_view from './semantic_search_view.json';
+
+export default {
+  title: 'Components/Prompt Tuning/Prompt Tuning',
+  component: 'clabs-prompt-tuning',
+};
+
+const defaultArgs = {
+  promptSamples: semantic_search_view.samples,
+  viewList: [
+    'task_view',
+    'semantic_search_view',
+    'collections_view',
+    'semantic_querying_view',
+    'table_details_view',
+    'table_upload_view',
+    'visualization_view',
+    'table_expansion_view',
+    'glossary_view',
+    'table_comparison_view',
+    'causal_interference_view',
+  ],
+  currentView: {
+    name: 'semantic_search_view',
+    contextVariables: ['table_ids'],
+    parameters: ['mode', 'question', 'table_ids'],
+  },
+  onSaveRename: action('save-rename'),
+  onCloseTag: action('close-tag'),
+  onAddContextVariable: action('add-context-variable'),
+  onAddParameter: action('add-parameter'),
+  onSavePrompt: action('save-prompt'),
+  onDeletePrompt: action('delete-prompt'),
+  onChangeView: action('change-view'),
+  onAddPrompt: action('add-prompt'),
+  isListModalOpen: true,
+};
+
+/* Default controls */
+const defaultControls = {
+  isListModalOpen: {
+    name: 'open',
+    control: { type: 'boolean' },
+    description: 'Whether the tuning prompts modal is open or not',
+    table: {
+      category: '',
+      defaultValue: { summary: true },
+    },
+  },
+  promptSamples: {
+    control: { type: 'object' },
+    description: 'Current view data',
+    table: {
+      defaultValue: {
+        summary: 'Using a JSON example from semantic search view for storybook',
+      },
+    },
+  },
+  currentView: {
+    control: { type: 'object' },
+    description: 'Name, context variables, and parameters in the current view',
+    table: {
+      defaultValue: {
+        summary: 'Using a JSON example with semantic search view for storybook',
+      },
+    },
+  },
+  viewList: {
+    control: { type: 'object' },
+    description: 'List of views',
+    table: {
+      defaultValue: {
+        summary: 'Using an example of a list of views for storybook',
+      },
+    },
+  },
+  onAddContextVariable: {
+    action: 'add-context-variable',
+    description:
+      'Fires when user saves new context variable for the current view',
+    table: {
+      category: 'Events',
+      defaultValue: { summary: 'function' },
+    },
+  },
+  onAddParameter: {
+    action: 'add-parameter',
+    description: 'Fires when user saves new parameter for the current view',
+    table: {
+      category: 'Events',
+      defaultValue: { summary: 'function' },
+    },
+  },
+  onChangeView: {
+    action: 'change-view',
+    description:
+      'Fires when user chooses a different view in the select dropdown',
+    table: {
+      category: 'Events',
+      defaultValue: { summary: 'function' },
+    },
+  },
+  onCloseTag: {
+    action: 'change-view',
+    description:
+      'Fires when user clicks the X for the current view context variable or parameter',
+    table: {
+      category: 'Events',
+      defaultValue: { summary: 'function' },
+    },
+  },
+  onDeletePrompt: {
+    action: 'delete-prompt',
+    description:
+      'Fires when user clicks the trash icon next to a prompt table row',
+    table: {
+      category: 'Events',
+      defaultValue: { summary: 'function' },
+    },
+  },
+  onSavePrompt: {
+    action: 'save-prompt',
+    description: 'Fires when user edits a prompt and saves the changes',
+    table: {
+      category: 'Events',
+      defaultValue: { summary: 'function' },
+    },
+  },
+  onSaveRename: {
+    action: 'save-rename',
+    description: 'Fires when user renames the current view and saves changes',
+    table: {
+      category: 'Events',
+      defaultValue: { summary: 'function' },
+    },
+  },
+  onAddPrompt: {
+    action: 'save-rename',
+    description: 'Fires when user adds a new prompt',
+    table: {
+      category: 'Events',
+      defaultValue: { summary: 'function' },
+    },
+  },
+
+  isEditModalOpen: {
+    table: {
+      disable: true,
+    },
+  },
+  text: {
+    table: {
+      disable: true,
+    },
+  },
+};
+
+/**
+ * More on writing stories with args: https://storybook.js.org/docs/web-components/writing-stories/args
+ *
+ * @type {{args: {label: string}, render: (function(*): TemplateResult<1>)}}
+ */
+export const Default = {
+  argTypes: defaultControls,
+  args: defaultArgs,
+  /**
+   * Renders the template for Storybook
+   * @param {string} args.content - content to generate from
+   * @returns {TemplateResult<1>}
+   */
+  render: ({
+    isListModalOpen,
+    promptSamples,
+    viewList,
+    currentView,
+    onSaveRename,
+    onCloseTag,
+    onAddContextVariable,
+    onAddParameter,
+    onSavePrompt,
+    onDeletePrompt,
+    onChangeView,
+    onAddPrompt,
+  }) =>
+    html` <clabs-prompt-tuning
+      ?isListModalOpen="${isListModalOpen}"
+      .promptSamples=${promptSamples}
+      .currentView=${currentView}
+      .viewList=${viewList}
+      @save-rename=${onSaveRename}
+      @close-tag=${onCloseTag}
+      @add-context-variable=${onAddContextVariable}
+      @add-parameter=${onAddParameter}
+      @save-prompt=${onSavePrompt}
+      @delete-prompt=${onDeletePrompt}
+      @change-view=${onChangeView}
+      @add-prompt=${onAddPrompt}></clabs-prompt-tuning>`,
+};