|
1 | 1 | import type { Meta, StoryObj } from '@storybook/react-webpack5'; |
2 | | -import React, { useCallback, useState } from "react"; |
| 2 | +import React, { useCallback, useMemo, useRef, useState } from "react"; |
3 | 3 | import { countries, generateData } from './data'; |
4 | 4 |
|
5 | 5 | import DataGrid, { |
@@ -290,7 +290,6 @@ export const ColumnReordering: Story = { |
290 | 290 | rtlEnabled: false, |
291 | 291 | columnHidingEnabled: true, |
292 | 292 | dataSource: countries, |
293 | | - // @ts-expect-error |
294 | 293 | columns: 'regularColumns', |
295 | 294 | columnFixing: { |
296 | 295 | enabled: false |
@@ -374,6 +373,102 @@ const aiIntegration = new AIIntegration({ |
374 | 373 | }); |
375 | 374 |
|
376 | 375 |
|
| 376 | +const aiResponseOptions = [ |
| 377 | + { |
| 378 | + text: 'Success with one executed command', |
| 379 | + response: { |
| 380 | + actions: [{ name: 'Command executed successfully', args: {} }], |
| 381 | + }, |
| 382 | + }, |
| 383 | + { |
| 384 | + text: 'Success with several executed commands', |
| 385 | + response: { |
| 386 | + actions: [ |
| 387 | + { name: 'Command executed successfully', args: {} }, |
| 388 | + { name: 'Another command executed successfully', args: {} }, |
| 389 | + ], |
| 390 | + }, |
| 391 | + }, |
| 392 | + { |
| 393 | + text: 'Success with one executed command and an error command', |
| 394 | + response: { |
| 395 | + actions: [ |
| 396 | + { name: 'Command executed successfully', args: {} }, |
| 397 | + { name: 'Error executing command', args: {} }, |
| 398 | + ], |
| 399 | + }, |
| 400 | + }, |
| 401 | + { |
| 402 | + text: 'Error', |
| 403 | + response: null, |
| 404 | + error: 'Error from AI service', |
| 405 | + }, |
| 406 | +]; |
| 407 | + |
| 408 | +const aiResponseOptionsMap = { |
| 409 | + 'Success with one executed command': aiResponseOptions[0], |
| 410 | + 'Success with several executed commands': aiResponseOptions[1], |
| 411 | + 'Success with one executed command and an error command': aiResponseOptions[2], |
| 412 | + 'Error': aiResponseOptions[3], |
| 413 | +}; |
| 414 | + |
| 415 | +export const AIAssistant: Story = { |
| 416 | + argTypes: { |
| 417 | + 'aiResponse': { |
| 418 | + control: 'select', |
| 419 | + options: Object.keys(aiResponseOptionsMap), |
| 420 | + description: 'Simulated AI response type', |
| 421 | + }, |
| 422 | + }, |
| 423 | + args: { |
| 424 | + dataSource: countries, |
| 425 | + keyExpr: 'ID', |
| 426 | + showBorders: true, |
| 427 | + columns: ['Country', 'Area', 'Population_Total', 'GDP_Total'], |
| 428 | + aiResponse: 'Success with one executed command', |
| 429 | + }, |
| 430 | + render: ({ aiResponse, ...args }) => { |
| 431 | + const responseRef = useRef(aiResponseOptions[0]); |
| 432 | + |
| 433 | + responseRef.current = aiResponseOptionsMap[aiResponse as string] ?? aiResponseOptions[0]; |
| 434 | + |
| 435 | + const aiIntegrationInstance = useMemo(() => new AIIntegration({ |
| 436 | + sendRequest() { |
| 437 | + let rejectFn: (reason?: unknown) => void; |
| 438 | + const current = responseRef.current; |
| 439 | + |
| 440 | + const promise = new Promise<string>((resolve, reject) => { |
| 441 | + rejectFn = reject; |
| 442 | + |
| 443 | + setTimeout(() => { |
| 444 | + if (current.error) { |
| 445 | + reject(new Error(current.error)); |
| 446 | + } else { |
| 447 | + resolve(JSON.stringify(current.response)); |
| 448 | + } |
| 449 | + }, 2000); |
| 450 | + }); |
| 451 | + |
| 452 | + return { |
| 453 | + promise, |
| 454 | + abort: () => { rejectFn(new Error('Aborted')); }, |
| 455 | + }; |
| 456 | + }, |
| 457 | + }), []); |
| 458 | + |
| 459 | + return ( |
| 460 | + <DataGrid |
| 461 | + {...args} |
| 462 | + // @ts-expect-error --- IGNORE --- |
| 463 | + aiAssistant={{ |
| 464 | + enabled: true, |
| 465 | + aiIntegration: aiIntegrationInstance, |
| 466 | + }} |
| 467 | + /> |
| 468 | + ); |
| 469 | + }, |
| 470 | +}; |
| 471 | + |
377 | 472 | export const AiColumn: Story = { |
378 | 473 | args: { |
379 | 474 | dataSource: countries, |
|
0 commit comments