@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.0

package/.cspell/custom-words.txt

@@ -138,3 +138,7 @@ yourcomponentname
 Yuzhno
 yxxx
 incase
+codemod
+diwaker
+curre
+heapsnapshot

package/.storybook/main.js

@@ -1,6 +1,6 @@
 const path = require('path');
 module.exports = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.jsx'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.tsx'],
 
   features: {
     buildStoriesJson: true,
@@ -40,7 +40,7 @@ module.exports = {
         },
       ],
       '@babel/preset-react',
-      '@babel/preset-flow',
+      '@babel/preset-typescript',
     ],
     plugins: ['macros'],
   }),
@@ -76,7 +76,7 @@ module.exports = {
       },
     });
 
-    config.resolve.extensions.push('.js', '.jsx');
+    config.resolve.extensions.push('.ts', '.tsx');
     return config;
   },
 

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.4.13-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.4.12...v0.4.13-beta.0) (2025-08-06)
+
+
+### Features
+
+* **codebase:** migration to typescript ([45d9f71](https://github.com/spaced-out/ui-design-system/commit/45d9f711ad69c09e7ce8e1ea205fe9ac07ee1f5b))
+
 ### [0.4.12](https://github.com/spaced-out/ui-design-system/compare/v0.4.11...v0.4.12) (2025-07-29)
 
 

package/babel.config.js

@@ -14,7 +14,7 @@ module.exports = {
       },
     ],
     '@babel/preset-react',
-    '@babel/preset-flow',
+    '@babel/preset-typescript',
   ],
   plugins: ['macros'],
 };

package/config.js

@@ -12,7 +12,8 @@ const customJsFormat = ({dictionary, file}) =>
     .map((token, idx) => {
       let str = `export const ${token.name} = '${token.value}';\n`;
       if (!idx) {
-        const addStr = `// @flow strict\n\n`;
+        //const addStr = `// @flow strict\n\n`;
+        const addStr = '';
         str = addStr + str;
       }
       return str;
@@ -56,7 +57,7 @@ module.exports = {
       transformGroup: 'js',
       buildPath: `src/styles/variables/`,
       files: tokens.map((tokenCategory) => ({
-        destination: `_${tokenCategory}.js`,
+        destination: `_${tokenCategory}.ts`,
         format: `customJsFormat`,
         filter: {
           attributes: {
@@ -71,7 +72,7 @@ module.exports = {
       buildPath: `src/styles/`,
       files: [
         {
-          destination: `index.js`,
+          destination: `index.ts`,
           format: `customJsFormat`,
           filter: ({attributes}) => !attributes.category.includes('base'),
         },

package/docs/FORWARDREF_FIX.md

@@ -0,0 +1,241 @@
+# ForwardRef Type Fix Commands
+
+This document explains the yarn commands available for fixing ForwardRef type mismatches in the UI Design System.
+
+## 🚀 Quick Start
+
+### Fix All ForwardRef Issues (Recommended)
+```bash
+yarn fix:forwardref
+```
+This command automatically finds and fixes all ForwardRef type mismatches across the entire codebase.
+
+### Check Type Errors After Fix
+```bash
+yarn fix:forwardref:check
+```
+This runs the TypeScript compiler to check for remaining type errors.
+
+## 📋 Available Commands
+
+### `yarn fix:forwardref`
+- **Purpose**: Fix all ForwardRef type mismatches automatically
+- **What it does**:
+  - Scans all TypeScript/TSX files in the `src` directory
+  - Swaps incorrect generic type parameters in `React.forwardRef` calls
+  - Changes `React.forwardRef<PropsType, RefType>` to `React.forwardRef<RefType, PropsType>`
+  - Reports how many files were fixed
+- **Usage**: `yarn fix:forwardref`
+- **Output**: Lists all fixed files and provides next steps
+
+### `yarn fix:forwardref:file <file1> <file2> ...`
+- **Purpose**: Fix ForwardRef issues in specific files
+- **What it does**: Same as above but only for specified files
+- **Usage**: `yarn fix:forwardref:file src/components/Button/Button.tsx src/components/Avatar/Avatar.tsx`
+- **Example**: `yarn fix:forwardref:file src/components/Accordion/Accordion.tsx`
+
+### `yarn fix:forwardref:check`
+- **Purpose**: Check for remaining TypeScript errors after fixes
+- **What it does**: Runs `yarn flow` (TypeScript compiler) to check for errors
+- **Usage**: `yarn fix:forwardref:check`
+- **Output**: Shows any remaining type errors that need manual attention
+
+### `yarn fix:unused`
+- **Purpose**: Fix unused variable errors in storybook files
+- **What it does**:
+  - Scans storybook files for unused variables
+  - Prefixes unused parameters with underscore (e.g., `id` → `_id`)
+  - Fixes unused state setters and destructured variables
+- **Usage**: `yarn fix:unused`
+- **Output**: Lists all fixed files and provides next steps
+
+### `yarn fix:unused:all`
+- **Purpose**: Fix unused variable errors in all TypeScript/TSX files
+- **What it does**: Same as `fix:unused` but scans all files, not just storybooks
+- **Usage**: `yarn fix:unused:all`
+- **Output**: Lists all fixed files and provides next steps
+
+### `yarn fix:css`
+- **Purpose**: Fix CSS custom properties type errors
+- **What it does**:
+  - Scans TypeScript/TSX files for CSS custom properties in style objects
+  - Adds type assertions (`as any`) to CSS custom properties like `'--background-color'`
+  - Handles various patterns including template literals and spread operators
+- **Usage**: `yarn fix:css`
+- **Output**: Lists all files that were fixed
+
+### `yarn fix:css:all`
+- **Purpose**: Fix CSS custom properties type errors in all files
+- **What it does**: Same as `fix:css` but with more comprehensive pattern matching
+- **Usage**: `yarn fix:css:all`
+- **Output**: Lists all files that were fixed
+
+### `yarn fix:css:bracket`
+- **Purpose**: Fix CSS custom properties using bracket notation
+- **What it does**: Converts `'--property'` to `['--property']` to avoid TypeScript property name issues
+- **Usage**: `yarn fix:css:bracket`
+- **Output**: Lists all fixed files and provides next steps
+
+### `yarn fix:css:final`
+- **Purpose**: Final fix for CSS custom properties using bracket notation
+- **What it does**: Removes 'as any' assertions and uses bracket notation for CSS custom properties
+- **Usage**: `yarn fix:css:final`
+- **Output**: Lists all fixed files and provides next steps
+
+### `yarn fix:css:corrupted`
+- **Purpose**: Fix corrupted CSS custom properties with multiple 'as any' assertions
+- **What it does**: Removes duplicate 'as any' assertions and keeps only one
+- **Usage**: `yarn fix:css:corrupted`
+- **Output**: Lists all fixed files and provides next steps
+
+### `yarn fix:all`
+- **Purpose**: Run all automatic fixes in sequence
+- **What it does**:
+  1. Fixes ForwardRef type mismatches
+  2. Fixes unused variable errors
+  3. Fixes CSS custom properties type errors (using bracket notation)
+  4. Runs type checking to show remaining errors
+- **Usage**: `yarn fix:all`
+- **Output**: Comprehensive fix report
+
+## 🔧 How It Works
+
+The fix scripts address the most common ForwardRef type mismatch pattern:
+
+**Before (Incorrect):**
+```typescript
+export const Component: Flow.AbstractComponent<ComponentProps, HTMLDivElement> =
+  React.forwardRef<ComponentProps, HTMLDivElement>((props, ref) => {
+    // component implementation
+  });
+```
+
+**After (Correct):**
+```typescript
+export const Component: Flow.AbstractComponent<ComponentProps, HTMLDivElement> =
+  React.forwardRef<HTMLDivElement, ComponentProps>((props, ref) => {
+    // component implementation
+  });
+```
+
+## 📊 Error Categories Fixed
+
+1. **ForwardRef Type Mismatch** ✅ (FIXED)
+   - `Type 'ForwardRefExoticComponent<...>' is not assignable to type 'AbstractComponent<...>'`
+   - **Status**: Completely resolved by the fix scripts
+
+2. **Ref Assignment Errors** ✅ (FIXED)
+   - `Type 'ForwardedRef<ComponentProps>' is not assignable to type 'Ref<HTMLElement>'`
+   - **Status**: Completely resolved by the fix scripts
+
+## 🎯 Remaining Error Categories
+
+After running the ForwardRef fixes, these error categories may still exist:
+
+1. **CSS Custom Properties** (~15 errors) ✅ (FIXED)
+   - `Object literal may only specify known properties, and '--custom-property' does not exist`
+   - **Solution**: Use `yarn fix:css:final` to automatically fix using bracket notation
+
+2. **Props Access on ReactNode** (~8 errors)
+   - `Property 'props' does not exist on type 'ReactNode'`
+   - **Solution**: Add proper type guards for React children
+
+3. **Unused Variables** (~10 errors) ✅ (FIXABLE)
+   - `'variableName' is declared but its value is never read`
+   - **Solution**: Use `yarn fix:unused` to automatically prefix unused variables with underscore
+
+4. **Type Assertion/Index Signature** (~8 errors)
+   - `Element implicitly has an 'any' type because expression of type 'string' can't be used to index type`
+   - **Solution**: Add proper type definitions for object lookups
+
+5. **Function Signature Mismatches** (~6 errors)
+   - `Type 'function' is not assignable to type 'expectedFunction'`
+   - **Solution**: Fix onClick handler signatures
+
+## 🛠️ Manual Fixes Required
+
+For the remaining errors, manual intervention is needed:
+
+### CSS Custom Properties
+Add to your TypeScript declarations:
+```typescript
+declare module 'react' {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number;
+  }
+}
+```
+
+### Props Access on ReactNode
+Add type guards:
+```typescript
+if (React.isValidElement(child)) {
+  const childId = child.props.id;
+}
+```
+
+### Index Signatures
+Add proper type definitions:
+```typescript
+const SPACES: { [key: string]: string } = {
+  // your space definitions
+};
+```
+
+## 📈 Impact
+
+**Before Fix:**
+- ~40+ ForwardRef type mismatch errors
+- ~30+ Ref assignment errors
+- Total: ~70+ core component architecture errors
+
+**After Fix:**
+- ~0 ForwardRef type mismatch errors ✅
+- ~0 Ref assignment errors ✅
+- Remaining errors are mostly configuration and code quality issues
+
+## 🔄 Workflow
+
+### Quick Fix (Recommended)
+1. **Run all fixes**: `yarn fix:all`
+2. **Review results**: Check the output for any remaining errors
+3. **Address remaining errors**: Manual fixes for CSS properties, type guards, etc.
+4. **Test components**: Ensure functionality is preserved
+
+### Step-by-Step Fix
+1. **Fix ForwardRef issues**: `yarn fix:forwardref`
+2. **Fix unused variables**: `yarn fix:unused`
+3. **Check results**: `yarn fix:forwardref:check`
+4. **Address remaining errors**: Manual fixes for CSS properties, type guards, etc.
+5. **Test components**: Ensure functionality is preserved
+
+## 🚨 Important Notes
+
+- The scripts are **safe** and only modify ForwardRef type parameters
+- Always run `yarn fix:forwardref:check` after fixes to verify
+- Test components after fixes to ensure functionality is preserved
+- The scripts are **idempotent** - running them multiple times is safe
+
+## 📝 Troubleshooting
+
+### Script not found
+Make sure you're in the project root directory and the scripts exist in `scripts/`.
+
+### Permission denied
+Make the scripts executable:
+```bash
+chmod +x scripts/fix-all-forwardref.js
+chmod +x scripts/fix-forwardref-simple.js
+```
+
+### No files found
+The script uses `find` command. On Windows, you may need to use Git Bash or WSL.
+
+## 🤝 Contributing
+
+If you find new ForwardRef patterns that aren't caught by the scripts, please:
+
+1. Add the pattern to the regex in the scripts
+2. Test with a few files first
+3. Update this documentation
+4. Submit a pull request

package/gulpfile.js

@@ -1,8 +1,6 @@
 const gulp = require('gulp');
 const babel = require('gulp-babel');
-const rename = require('gulp-rename');
 const replace = require('gulp-replace');
-const {spawnSync} = require('child_process');
 const path = require('path');
 
 const babelRc = require('./babel.config');
@@ -17,7 +15,7 @@ const doNotBuildThese = [
 ];
 
 function getJsStream() {
-  return gulp.src('src/**/*.{js,jsx}', {
+  return gulp.src('src/**/*.{ts,tsx}', {
     ignore: doNotBuildThese,
   });
 }
@@ -25,18 +23,7 @@ function getJsStream() {
 function buildCjs() {
   return getJsStream()
     .pipe(babel(babelRc))
-    .pipe(replace('.jsx', '.js'))
-    .pipe(gulp.dest('lib'));
-}
-
-function copyFlow() {
-  return getJsStream()
-    .pipe(replace('.jsx', '.js'))
-    .pipe(
-      rename((path) => {
-        path.extname = path.extname.replace('jsx', 'js') + '.flow';
-      }),
-    )
+    .pipe(replace('.tsx', '.js'))
     .pipe(gulp.dest('lib'));
 }
 
@@ -48,24 +35,8 @@ function copyOther() {
     .pipe(gulp.dest('lib'));
 }
 
-function generateDts(done) {
-  const result = spawnSync('yarn', ['generate'], {
-    stdio: 'inherit',
-    cwd: path.resolve(__dirname, 'dts-generator'),
-    shell: true,
-  });
-
-  if (result.status !== 0) {
-    return done(new Error('Failed to generate .d.ts files'));
-  }
-
-  done();
-}
+const coreBuild = gulp.parallel(buildCjs, copyOther);
 
-const coreBuild = gulp.parallel(buildCjs, copyFlow, copyOther);
 
-// Note(Nishant): To unblock flow to ts migration
-// const fullBuild = gulp.series(coreBuild, generateDts);
 
 module.exports.build = coreBuild;
-// module.exports.build = fullBuild;

package/lib/components/AIPromptFlow/AIPromptFlow.stories.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+declare const _default: {
+    tags: string[];
+    title: string;
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _AIPromptFlow: () => React.JSX.Element;
+//# sourceMappingURL=AIPromptFlow.stories.d.ts.map

package/lib/components/AIPromptFlow/AIPromptFlow.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIPromptFlow.stories.d.ts","sourceRoot":"","sources":["../../../src/components/AIPromptFlow/AIPromptFlow.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;AAe/B,wBAgBE;AA4JF,eAAO,MAAM,aAAa,yBAgPzB,CAAC"}

package/lib/components/AIPromptFlow/AIPromptFlow.stories.js

@@ -0,0 +1,225 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._AIPromptFlow = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _ChatBubble = require("../ChatBubble");
+var _ChatBubble2 = require("../ChatBubble/ChatBubble.stories");
+var _Disclaimer = require("../Disclaimer");
+var _Panel = require("../Panel");
+var _PromptChip = require("../PromptChip");
+var _PromptInput = require("../PromptInput");
+var _Text = require("../Text");
+var _Text2 = require("../Text/Text");
+var _TextTile = require("../TextTile");
+var _AIPromptFlowStoriesModule = _interopRequireDefault(require("./AIPromptFlow.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/* eslint-disable react/no-array-index-key */
+var _default = exports.default = {
+  tags: ['!autodocs'],
+  title: 'AI Prompt Components/AI Prompt Flow',
+  parameters: {
+    docs: {
+      subtitle: 'AI Prompt Flow example',
+      description: {
+        component: `
+This example showcases how to use the ai copilot flows in ui. feel free to copy code and respective css to mimic the exact UI
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/Disclaimer/Disclaimer.jsx'
+    }
+  }
+};
+const staticResponse = `In today's data-driven world, analytics play a crucial role in decision-making and strategy development. Companies rely on key performance indicators (KPIs) to measure progress and identify areas for improvement. Metrics like conversion rates, churn rates, and user engagement provide valuable insights into business performance. Accurate data collection and analysis empower teams to make informed choices, optimize processes, and allocate resources effectively.
+
+For instance, monitoring website traffic helps identify the most visited pages and the sources driving users to the site. A high bounce rate might indicate a need to improve user experience, while a steady increase in session duration reflects growing engagement. Similarly, tracking customer acquisition cost (CAC) against lifetime value (LTV) ensures sustainable growth and profitability.
+
+Sales teams use analytics to measure pipeline velocity, close rates, and average deal size. These metrics enable managers to forecast revenue, adjust strategies, and improve overall efficiency. In marketing, tools like funnel analysis highlight where potential leads drop off, helping refine campaigns and improve return on investment (ROI).
+
+Employee performance metrics are equally important. Organizations track productivity, satisfaction scores, and retention rates to foster a positive work environment. For instance, a drop in employee engagement often signals underlying issues, such as workload imbalance or lack of recognition.
+
+In customer success, analytics focus on net promoter scores (NPS), response times, and resolution rates. High NPS scores indicate satisfied customers likely to promote the brand, while tracking ticket resolution times ensures efficient support processes. By analyzing these trends, businesses can address pain points and improve client relationships.
+
+Financial analytics are another critical area. Companies monitor profit margins, operational costs, and revenue growth to ensure financial stability. Metrics such as EBITDA and cash flow provide a clear picture of a company’s health, enabling leadership to plan for future investments or expansions.
+
+Data visualization tools make these analytics easier to understand. Dashboards present complex information in simple charts and graphs, allowing teams to identify patterns and anomalies at a glance. Heatmaps, for example, can show user activity on a website, revealing areas that need more attention.
+
+A/B testing further enhances decision-making by allowing teams to experiment with different strategies and compare results. Whether testing headlines, product features, or email campaigns, data-driven results provide clarity and eliminate guesswork.
+
+Real-time analytics help organizations stay agile and responsive. By monitoring live data, companies can react to sudden changes, such as traffic spikes or unexpected downtime. Alerts and notifications ensure that teams are aware of critical issues and can act promptly.
+
+The value of analytics lies not only in the data itself but also in how it’s interpreted and applied. Insights derived from metrics allow businesses to streamline operations, enhance customer satisfaction, and drive growth. With the right tools and a data-driven mindset, organizations can turn raw data into actionable strategies and measurable outcomes.
+
+In essence, analytics provide the foundation for smarter decisions, improved performance, and long-term success. Whether it’s understanding user behavior, optimizing workflows, or predicting market trends, leveraging analytics is key to staying competitive in an ever-changing landscape.`;
+const PROMPTS = ['What is the offer acceptance rate?', 'Which source produces the best hires?', 'What is the average time to hire?', 'How many candidates are in the pipeline?', 'What is the average cost per hire?', 'Which department has the highest turnover rate?', 'What percentage of hires are from referrals?', 'How long does it take to fill a position?', 'What is the attrition rate for the past year?', 'Which jobs have the highest application drop-off rate?', 'What is the conversion rate from interview to hire?', 'How many candidates are rejected at each stage?', 'What is the average interview-to-offer ratio?', 'Which recruiters have the best performance metrics?', 'What percentage of candidates reject offers?', 'How satisfied are candidates with the hiring process?', 'What is the diversity ratio in the current workforce?', 'How many hires come from internal promotions?', 'What are the reasons for candidate drop-off?', 'How effective is the onboarding process?', 'What is the current employee engagement score?', 'How many candidates applied last quarter?', 'What percentage of job offers are pending?', 'How many interviews are conducted per position?', 'What is the overall hiring success rate?', 'What percentage of applicants are qualified?', 'How many candidates are awaiting feedback?', 'What is the average time to first interview?', 'Which job roles take the longest to fill?', 'What is the ratio of applicants to hires?', 'Which job boards drive the most applications?', 'What is the average time spent interviewing candidates?', 'How many passive candidates were contacted last month?', 'What percentage of hires are new graduates?', 'Which hiring stages have the highest drop-off?', 'How many candidates withdrew their applications?', 'What percentage of employees passed probation?', 'Which regions have the most successful hires?', 'What is the average number of interview rounds?', 'How many requisitions are still open?', 'Which departments have the lowest attrition?', 'What percentage of candidates complete assessments?', 'What is the satisfaction rate of new hires?', 'How many hires are expected this quarter?', 'What is the median salary for new hires?', 'How many requisitions were filled last month?', 'Which hiring sources are the most cost-effective?', 'How diverse are the recent hires?', 'How many employees left during onboarding?', 'What is the percentage of part-time hires?', 'How many job offers were rescinded?', 'What is the average candidate feedback score?', 'Which teams have the fastest hiring process?', 'What percentage of hires are internal candidates?', 'How many candidates are in the talent pool?', 'What is the average age of new hires?', 'How effective are employee referral programs?', 'What percentage of hires are remote employees?', 'How many candidates are considered overqualified?', 'Which recruiters have the fastest response time?', 'What is the average duration between offer and joining?', 'How satisfied are hiring managers with candidates?', 'Which skills are most common among recent hires?', 'How many candidates failed the technical assessment?', 'What is the drop-off rate during technical rounds?', 'What percentage of hires are contract workers?', 'How many job offers were declined last quarter?', 'What percentage of hires meet performance benchmarks?', 'How many positions remain unfilled after 90 days?', 'What is the hiring trend over the last six months?', 'What percentage of hires come from social media?', 'How effective is the candidate feedback loop?', 'What is the employee referral success rate?', 'How many active job seekers applied this month?', 'What percentage of candidates ask for offer extensions?', 'What is the typical rejection reason from candidates?', 'Which hiring stage causes the most delays?', 'What percentage of new hires recommend the process?', 'How many rehires were made this year?', 'What is the cost of a bad hire?', 'How many positions were closed due to budget cuts?', 'What percentage of hires exceed expectations?', 'How long do candidates stay on average?', 'What is the feedback score for interviewers?', 'Which stages have the most rescheduled interviews?', 'How many candidates received counteroffers?', 'What is the candidate response time for offers?', 'What percentage of candidates report a good experience?', 'How does the hiring rate compare year over year?', 'Which regions have the slowest time to hire?', 'How effective are pre-screening assessments?', 'How often do candidates ghost interviews?', 'What is the most requested role this year?', 'What percentage of new hires are retained after a year?', 'How many rejected candidates reapply later?', 'How many candidates fail during background checks?', 'What percentage of hires are diversity candidates?', 'How successful are hiring campaigns in different regions?', 'What is the satisfaction rate among rejected candidates?', 'How many roles are open for more than 6 months?', 'What percentage of hires move into leadership roles?'];
+const getRandomPrompts = prompts => {
+  const count = Math.floor(Math.random() * 3) + 1;
+  const shuffled = prompts.sort(() => 0.5 - Math.random());
+  return shuffled.slice(0, count);
+};
+const getRandomSentences = function (text) {
+  let wordLimit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;
+  const sentences = text.match(/[^.!?]+[.!?]/g) || [];
+  const result = [];
+  let totalWords = 0;
+  const shuffledSentences = sentences.sort(() => Math.random() - 0.5);
+  for (const sentence of shuffledSentences) {
+    const wordCount = sentence.trim().split(/\s+/).length;
+    if (totalWords + wordCount <= wordLimit || result.length === 0) {
+      result.push(sentence.trim());
+      totalWords += wordCount;
+    } else {
+      break;
+    }
+  }
+  return result.join(' ');
+};
+const _AIPromptFlow = () => {
+  const [value, setValue] = React.useState('');
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [responses, setResponses] = React.useState([]);
+  const [selectedPrompts, setSelectedPrompts] = React.useState(getRandomPrompts(PROMPTS));
+  const promptRef = React.useRef(null);
+  const loadingRef = React.useRef(null);
+  const generateResponse = text => {
+    const preparedResponses = [...responses];
+    setIsLoading(true);
+    setTimeout(() => {
+      // @ts-ignore - TS2339 - Property 'scrollIntoView' does not exist on type 'never'.
+      loadingRef.current?.scrollIntoView({
+        behavior: 'smooth'
+      });
+    });
+    setValue('');
+    const question = text ? text : value;
+
+    // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'never'.
+    preparedResponses.push({
+      question,
+      answer: ''
+    });
+    setResponses(preparedResponses);
+    setTimeout(() => {
+      // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'never'.
+      preparedResponses.push({
+        question: '',
+        answer: getRandomSentences(staticResponse)
+      });
+      setResponses(preparedResponses);
+      setIsLoading(false);
+      setSelectedPrompts(getRandomPrompts(PROMPTS));
+      // @ts-ignore - TS2339 - Property 'scrollIntoView' does not exist on type 'never'.
+      promptRef.current?.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }, 2000);
+  };
+  return /*#__PURE__*/React.createElement(_Panel.Panel, {
+    isOpen: true,
+    anchor: "right",
+    size: "large"
+  }, /*#__PURE__*/React.createElement(_Panel.PanelHeader, null, "Copilot"), /*#__PURE__*/React.createElement(_Disclaimer.Disclaimer, {
+    classNames: {
+      wrapper: _AIPromptFlowStoriesModule.default.disclaimer
+    }
+  }, "Always check content generated by AI"), /*#__PURE__*/React.createElement(_Panel.PanelBody, {
+    className: _AIPromptFlowStoriesModule.default.panelBody
+  }, responses.length === 0 && !isLoading && /*#__PURE__*/React.createElement(_TextTile.TextTile, {
+    header: "Copilot",
+    description: "Ask anything to accomplish tasks in Sense.",
+    classNames: {
+      wrapper: _AIPromptFlowStoriesModule.default.copilotTextWrapper
+    }
+  }), responses.map((response, idx) => /*#__PURE__*/React.createElement("div", {
+    key: idx,
+    className: _AIPromptFlowStoriesModule.default.conversationAI
+  }, !!response.question && /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, {
+    orientation: "left"
+  }, /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, {
+    avatarProps: {
+      text: 'Adam Craig Gilchrist'
+    },
+    isAI: false
+  }), /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, {
+    withBgColor: false
+  }, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, response.question)))), !!response.answer && /*#__PURE__*/React.createElement(React.Fragment, null, idx === 1 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, {
+    orientation: "left"
+  }, /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, null), /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, null, /*#__PURE__*/React.createElement(_Text2.SubTitleSmall, null, "This is our interpretation of you question"), /*#__PURE__*/React.createElement(_Text.BodyMedium, null, getRandomSentences(staticResponse))))), /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, {
+    orientation: "left",
+    classNames: {
+      wrapper: _AIPromptFlowStoriesModule.default.leftMarginSpace
+    }
+  }, /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, null, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, response.answer)), /*#__PURE__*/React.createElement(_ChatBubble2.ChatFooterWithIcons, null)))), idx === 3 && /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, {
+    orientation: "left"
+  }, /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, null), /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, {
+    classNames: {
+      wrapper: _AIPromptFlowStoriesModule.default.longChatContent
+    }
+  }, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, "In a world where technology and imagination intertwine, the possibilities for innovation are boundless. Every passing day introduces new advancements that reshape the way humanity interacts with the world, creating a seamless blend of convenience, creativity, and connectivity. As artificial intelligence continues to grow in influence, its impact on everyday life becomes more profound, touching areas that range from healthcare to entertainment, from education to environmental conservation. Take, for instance, the story of a small town nestled in the valley of rolling hills. For decades, this town had thrived on traditional farming practices, cultivating crops and raising livestock in harmony with nature. However, the advent of technology introduced challenges that demanded adaptation. Climate change brought unpredictable weather patterns, and global markets introduced competitive pressures that many small farms struggled to meet. Faced with these challenges, the community turned to innovation. The town\u2019s leaders, in collaboration with researchers and technologists, implemented a system of smart farming powered by AI. Sensors embedded in the soil measured moisture levels, nutrient content, and temperature, providing real-time feedback to farmers. Drones equipped with cameras flew over fields, capturing images that AI analyzed to detect signs of pests or disease. Autonomous tractors, guided by satellite data, plowed and planted with precision, minimizing waste and maximizing yield. Over time, these tools not only revived the town\u2019s agricultural economy but also established it as a model for sustainable farming practices worldwide. Beyond agriculture, artificial intelligence also revolutionized healthcare. A few years ago, a young woman named Clara faced an uncertain future. Diagnosed with a rare and aggressive form of cancer, she was told her chances of survival were slim. However, Clara\u2019s doctors employed a cutting-edge AI system to analyze her genetic profile and recommend a personalized treatment plan. This system, trained on data from millions of patients worldwide, identified patterns that human doctors might have missed, suggesting a combination of therapies tailored specifically to Clara\u2019s condition.")), /*#__PURE__*/React.createElement(_ChatBubble2.ChatFooterWithIcons, null))), idx !== 1 && idx !== 3 && /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, {
+    orientation: "left"
+  }, /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, null), /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, null, /*#__PURE__*/React.createElement(_Text.BodyMedium, null, response.answer)))), /*#__PURE__*/React.createElement("div", {
+    className: _AIPromptFlowStoriesModule.default.leftMarginSpace
+  }, idx === responses.length - 1 &&
+  /*#__PURE__*/
+  // @ts-ignore - TS2786 - 'PromptSuggestions' cannot be used as a JSX component.
+  React.createElement(PromptSuggestions, {
+    isLoading: isLoading,
+    selectedPrompts: selectedPrompts,
+    generateResponse: generateResponse,
+    promptRef: promptRef
+  }))))), isLoading && /*#__PURE__*/React.createElement(_ChatBubble.ChatBubble, {
+    classNames: {
+      wrapper: _AIPromptFlowStoriesModule.default.loader
+    },
+    orientation: "left",
+    ref: loadingRef
+  }, /*#__PURE__*/React.createElement(_ChatBubble.ChatAnchor, null), /*#__PURE__*/React.createElement(_ChatBubble.ChatContent, null, /*#__PURE__*/React.createElement(_ChatBubble.ChatBody, {
+    isLoading: true,
+    loadingText: "Generating"
+  }))), responses.length === 0 && /*#__PURE__*/React.createElement("div", {
+    className: _AIPromptFlowStoriesModule.default.promptContainer
+  }, /*#__PURE__*/React.createElement(PromptSuggestions, {
+    isLoading: isLoading,
+    selectedPrompts: selectedPrompts,
+    generateResponse: generateResponse,
+    label: "Here are some ideas to get started with Analytics for your product"
+  }))), /*#__PURE__*/React.createElement(_Panel.PanelFooter, {
+    classNames: {
+      actions: _AIPromptFlowStoriesModule.default.actions
+    }
+  }, /*#__PURE__*/React.createElement(_PromptInput.PromptInput, {
+    withPadding: false,
+    value: value,
+    onInputChange: e => setValue(e.target.value),
+    onButtonClick: () => generateResponse(),
+    buttonDisabled: value.length === 0
+  })));
+};
+exports._AIPromptFlow = _AIPromptFlow;
+const PromptSuggestions = _ref => {
+  let {
+    isLoading,
+    generateResponse,
+    selectedPrompts,
+    label,
+    promptRef
+  } = _ref;
+  return !isLoading && /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(_Text.FormLabelMedium, null, label), /*#__PURE__*/React.createElement("div", {
+    className: _AIPromptFlowStoriesModule.default.promptWrapper
+  }, selectedPrompts.map(prompt => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: prompt
+  }, /*#__PURE__*/React.createElement(_PromptChip.PromptChip, {
+    classNames: {
+      wrapper: _AIPromptFlowStoriesModule.default.prompt
+    },
+    onClick: () => generateResponse(prompt)
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    ref: promptRef
+  }, prompt)))));
+};