@kronor/dtv 0.2.9

package/src/components/SpeechInput.tsx

@@ -0,0 +1,67 @@
+import { useState, useRef, useEffect } from 'react';
+import { InputText } from 'primereact/inputtext';
+
+interface SpeechInputProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+
+function SpeechInput({ value, onChange }: SpeechInputProps) {
+    const [isListening, setIsListening] = useState(false);
+    const recognitionRef = useRef<SpeechRecognition | null>(null);
+
+    useEffect(() => {
+        if (!('webkitSpeechRecognition' in window || 'SpeechRecognition' in window)) return;
+        recognitionRef.current = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+        recognitionRef.current.continuous = false;
+        recognitionRef.current.interimResults = false;
+        recognitionRef.current.lang = 'en-US';
+        recognitionRef.current.onresult = (event: SpeechRecognitionEvent) => {
+            const transcript = event.results[0][0].transcript;
+            onChange(transcript);
+            setIsListening(false);
+        };
+        recognitionRef.current.onend = () => setIsListening(false);
+        recognitionRef.current.onerror = () => setIsListening(false);
+    }, [onChange]);
+
+    const handleMicClick = () => {
+        if (!recognitionRef.current) return;
+        if (isListening) {
+            recognitionRef.current.stop();
+            setIsListening(false);
+        } else {
+            onChange('');
+            setIsListening(true);
+            recognitionRef.current.start();
+        }
+    };
+
+    return (
+        <div className="tw:flex tw:flex-1 tw:items-center tw:gap-2">
+            <InputText
+                value={value}
+                onChange={e => onChange(e.target.value)}
+                placeholder="Speak or type here..."
+                className="tw:flex-1"
+            />
+            <button
+                type="button"
+                onClick={handleMicClick}
+                className={`tw:rounded-full tw:p-2 tw:border ${isListening ? 'tw:bg-red-500 tw:text-white' : 'tw:bg-gray-200 tw:text-black'} tw:transition`}
+                aria-label={isListening ? 'Stop listening' : 'Start listening'}
+            >
+                {/* Mic icon: classic microphone shape */}
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="tw:h-5">
+                    <rect x="9" y="2" width="6" height="12" rx="3" />
+                    <path d="M5 10v2a7 7 0 0 0 14 0v-2" />
+                    <line x1="12" y1="19" x2="12" y2="22" />
+                    <line x1="8" y1="22" x2="16" y2="22" />
+                </svg>
+            </button>
+            <span className="tw:text-s tw:ml-2">{isListening ? 'Listening...' : ''}</span>
+        </div>
+    );
+}
+
+export default SpeechInput;

package/src/components/Table.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { DataTable, DataTableExportFunctionEvent } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Tag } from 'primereact/tag';
+import { ColumnDefinition } from '../framework/column-definition';
+import { NoRowsComponent } from '../framework/view';
+import { FlexRow, FlexColumn, DateTime } from '../framework/cell-renderer-components/LayoutHelpers';
+import { CurrencyAmount } from '../framework/cell-renderer-components/CurrencyAmount';
+import { majorToMinor, minorToMajor } from '../framework/currency';
+import { Mapping } from '../framework/cell-renderer-components/Mapping';
+import { Link } from '../framework/cell-renderer-components/Link';
+import { FilterState, getFilterStateById, setFilterStateById } from '../framework/state';
+import { FilterFormState } from '../framework/filter-form-state';
+
+type TableProps = {
+    viewId: string;
+    columns: ColumnDefinition[];
+    data: Record<string, unknown>[][]; // Array of rows, each row is an array of values for the columns
+    noRowsComponent?: NoRowsComponent; // The noRowsComponent function
+    setFilterState: (filterState: FilterState) => void; // Function to update filter state
+    filterState: FilterState; // Current filter state
+    triggerRefetch: () => void; // Function to trigger data refetch
+    ref?: React.Ref<DataTable<any>>; // An outside ref to the DataTable instance
+};
+
+function Table({
+    viewId,
+    columns,
+    data,
+    noRowsComponent,
+    setFilterState,
+    filterState,
+    triggerRefetch,
+    ref
+}: TableProps) {
+    // Create wrapped setFilterState that provides current state to updater function
+    const wrappedSetFilterState = (updater: (currentState: FilterState) => FilterState) => {
+        const newState = updater(filterState);
+        setFilterState(newState);
+    };
+
+    // Instantiate the noRowsComponent if it exists
+    const noDataRowsComponent = noRowsComponent
+        ? noRowsComponent({
+            filterState,
+            setFilterState: wrappedSetFilterState,
+            applyFilters: triggerRefetch,
+            updateFilterById: (filterId: string, updater: (currentValue: FilterFormState) => FilterFormState) => {
+                wrappedSetFilterState(currentState => {
+                    try {
+                        const currentFilter = getFilterStateById(currentState, filterId);
+                        const updatedFilter = updater(currentFilter);
+                        if (updatedFilter === currentFilter) return currentState;
+                        return setFilterStateById(currentState, filterId, updatedFilter);
+                    } catch {
+                        return currentState; // filter missing -> no change
+                    }
+                });
+            }
+        })
+        : null;
+
+    const exportFunction = (event: DataTableExportFunctionEvent<any>) => {
+        const data = (event.rowData as [])[Number(event.field)]
+        return data[Object.keys(data)[0]]
+    }
+
+    return (
+        <DataTable
+            ref={ref}
+            value={data}
+            tableStyle={{ minWidth: '50rem' }}
+            showGridlines
+            stripedRows
+            size='small'
+            emptyMessage={noDataRowsComponent}
+            exportFunction={exportFunction}
+            exportFilename={viewId}
+        >
+            {columns.map((column, columnIndex) => (
+                <Column
+                    key={columnIndex}
+                    field={columnIndex.toString()}
+                    header={column.name}
+                    body={rowData => column.cellRenderer({
+                        data: rowData[columnIndex],
+                        setFilterState: wrappedSetFilterState,
+                        applyFilters: triggerRefetch,
+                        updateFilterById: (filterId: string, updater: (currentValue: FilterFormState) => FilterFormState) => {
+                            wrappedSetFilterState(currentState => {
+                                try {
+                                    const currentFilter = getFilterStateById(currentState, filterId);
+                                    const updatedFilter = updater(currentFilter);
+                                    if (updatedFilter === currentFilter) return currentState;
+                                    return setFilterStateById(currentState, filterId, updatedFilter);
+                                } catch {
+                                    return currentState;
+                                }
+                            });
+                        },
+                        createElement: React.createElement,
+                        components: {
+                            Badge: Tag,
+                            FlexRow,
+                            FlexColumn,
+                            Mapping,
+                            DateTime,
+                            CurrencyAmount,
+                            Link
+                        },
+                        currency: { minorToMajor, majorToMinor }
+                    })}
+                />
+            ))}
+        </DataTable>
+    );
+}
+
+export default Table;

package/src/components/TablePagination.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button } from 'primereact/button';
+
+interface TablePaginationProps {
+    onPageChange: () => void;
+    onPrevPage: () => void;
+    hasNextPage: boolean;
+    hasPrevPage: boolean;
+    currentPage: number; // 0-based
+    rowsPerPage: number;
+    actualRows: number; // number of rows in the current page
+}
+
+const TablePagination: React.FC<TablePaginationProps> = ({ onPageChange, onPrevPage, hasNextPage, hasPrevPage, currentPage, rowsPerPage, actualRows }) => {
+    const start = currentPage * rowsPerPage + 1;
+    const end = start + actualRows - 1;
+    return (
+        <div className="tw:flex tw:justify-center tw:items-center tw:mt-4 tw:gap-2">
+            <Button
+                rounded
+                icon="pi pi-angle-left"
+                onClick={onPrevPage}
+                disabled={!hasPrevPage}
+                className="p-button-sm"
+                data-testid="pagination-prev"
+            />
+            <span className="tw:text-s tw:text-gray-600 tw:mx-3" data-testid="pagination-page">{start}-{end}</span>
+            <Button
+                rounded
+                icon="pi pi-angle-right"
+                onClick={onPageChange}
+                disabled={!hasNextPage}
+                className="p-button-sm"
+                data-testid="pagination-next"
+            />
+        </div>
+    );
+};
+
+export default TablePagination;

package/src/components/aiAssistant.test.ts

@@ -0,0 +1,270 @@
+// src/components/aiAssistant.test.ts
+import { FilterSchemasAndGroups } from '../framework/filters';
+import { buildInitialFormState } from '../framework/state';
+import { mergeFilterFormState } from './aiAssistant';
+
+
+describe('aiAssistant customOperator patching', () => {
+    it('should patch customOperator values when AI returns a plain string', () => {
+        // Create a filter schema with a customOperator
+        const filterSchema: FilterSchemasAndGroups = {
+            groups: [{ name: 'test', label: 'Test Group' }],
+            filters: [
+                {
+                    id: 'test-filter-1',
+                    label: 'Test Filter',
+                    group: 'test',
+                    expression: {
+                        type: 'equals',
+                        field: 'test',
+                        value: {
+                            type: 'customOperator',
+                            operators: [
+                                { label: 'Equals', value: '_eq' },
+                                { label: 'Not Equals', value: '_neq' }
+                            ],
+                            valueControl: { type: 'text' }
+                        }
+                    },
+                    aiGenerated: false
+                }
+            ]
+        };
+
+        // Build empty state
+        const emptyState = buildInitialFormState(filterSchema.filters[0].expression);
+
+        // AI returns a plain string instead of an object
+        const aiState = {
+            type: 'leaf',
+            field: 'test',
+            value: 'test_value'
+        };
+
+        // Apply our merge function
+        const result = mergeFilterFormState(filterSchema.filters[0].expression, emptyState, aiState);
+
+        // The result should have the string wrapped in an object with the default operator
+        expect(result.type).toBe('leaf');
+        if (result.type === 'leaf') {
+            expect(result.value).toEqual({
+                operator: '_eq',
+                value: 'test_value'
+            });
+        }
+    });
+
+    it('should not modify values when AI returns proper objects', () => {
+        // Create a filter schema with a text field
+        const filterSchema: FilterSchemasAndGroups = {
+            groups: [{ name: 'test', label: 'Test Group' }],
+            filters: [
+                {
+                    id: 'test-filter-2',
+                    label: 'Test Filter',
+                    group: 'test',
+                    expression: {
+                        type: 'equals',
+                        field: 'test_field',
+                        value: {
+                            type: 'customOperator',
+                            operators: [
+                                { label: 'equals', value: '_eq' },
+                                { label: 'not equals', value: '_neq' }
+                            ],
+                            valueControl: { type: 'text' }
+                        }
+                    },
+                    aiGenerated: false
+                }
+            ]
+        };
+
+        // Build initial empty state
+        const emptyState = buildInitialFormState(filterSchema.filters[0].expression);
+
+        // Simulate AI returning a proper object
+        const aiState = {
+            type: 'leaf',
+            field: 'test_field',
+            value: {
+                operator: '_neq',
+                value: 'test_value'
+            }
+        };
+
+        // Apply our merge function
+        const result = mergeFilterFormState(filterSchema.filters[0].expression, emptyState, aiState);
+
+        // The result should preserve the original object
+        expect(result.type).toBe('leaf');
+        if (result.type === 'leaf') {
+            expect(result.value).toEqual({
+                operator: '_neq',
+                value: 'test_value'
+            });
+        }
+    });
+
+    it('should not modify non-customOperator values', () => {
+        // Create a filter schema with a regular text filter
+        const filterSchema: FilterSchemasAndGroups = {
+            groups: [{ name: 'test', label: 'Test Group' }],
+            filters: [
+                {
+                    id: 'test-filter-3',
+                    label: 'Test Filter',
+                    group: 'test',
+                    expression: {
+                        type: 'equals',
+                        field: 'test_field',
+                        value: {
+                            type: 'text'
+                        }
+                    },
+                    aiGenerated: false
+                }
+            ]
+        };
+
+        // Build initial empty state
+        const emptyState = buildInitialFormState(filterSchema.filters[0].expression);
+
+        // Simulate AI returning a string value for a text filter
+        const aiState = {
+            type: 'leaf',
+            field: 'test_field',
+            value: 'test_value'
+        };
+
+        // Apply our merge function
+        const result = mergeFilterFormState(filterSchema.filters[0].expression, emptyState, aiState);
+
+        // The result should preserve the original string value
+        expect(result.type).toBe('leaf');
+        if (result.type === 'leaf') {
+            expect(result.value).toBe('test_value');
+        }
+    });
+
+    it('should map NOT wrapped customOperator to not-equals operator', () => {
+        // Create a filter schema with a customOperator that has not-equals
+        const filterSchema: FilterSchemasAndGroups = {
+            groups: [{ name: 'test', label: 'Test Group' }],
+            filters: [
+                {
+                    id: 'test-filter-not',
+                    label: 'Test Filter',
+                    group: 'test',
+                    expression: {
+                        type: 'equals',
+                        field: 'test',
+                        value: {
+                            type: 'customOperator',
+                            operators: [
+                                { label: 'Equals', value: '_eq' },
+                                { label: 'Not Equals', value: '_neq' }
+                            ],
+                            valueControl: { type: 'text' }
+                        }
+                    },
+                    aiGenerated: false
+                }
+            ]
+        };
+
+        // Build empty state
+        const emptyState = buildInitialFormState(filterSchema.filters[0].expression);
+
+        // AI returns a NOT wrapped around a leaf with string value
+        const aiState = {
+            type: 'not',
+            child: {
+                type: 'leaf',
+                field: 'test',
+                value: 'test_value'
+            }
+        };
+
+        // Apply our merge function
+        const result = mergeFilterFormState(filterSchema.filters[0].expression, emptyState, aiState);
+
+        // The result should map to not-equals operator
+        expect(result.type).toBe('leaf');
+        if (result.type === 'leaf') {
+            expect(result.value).toEqual({
+                operator: '_neq',
+                value: 'test_value'
+            });
+        }
+    });
+
+    it('should collapse OR children into array for in filter', () => {
+        const filterSchema: FilterSchemasAndGroups = {
+            groups: [{ name: 'test', label: 'Test Group' }],
+            filters: [
+                {
+                    id: 'in-filter',
+                    label: 'In Filter',
+                    group: 'test',
+                    expression: {
+                        type: 'in',
+                        field: 'category',
+                        value: { type: 'text' }
+                    },
+                    aiGenerated: false
+                }
+            ]
+        };
+
+        const emptyState = buildInitialFormState(filterSchema.filters[0].expression);
+        const aiState = {
+            type: 'or',
+            children: [
+                { type: 'leaf', field: 'category', value: 'A' },
+                { type: 'leaf', field: 'category', value: 'B' },
+                { type: 'leaf', field: 'category', value: 'A' } // duplicate to test uniqueness
+            ]
+        };
+
+        const result = mergeFilterFormState(filterSchema.filters[0].expression, emptyState, aiState);
+        expect(result.type).toBe('leaf');
+        if (result.type === 'leaf') {
+            expect(result.value).toEqual(['A', 'B']);
+        }
+    });
+
+    it('should collapse OR children into array for notIn filter', () => {
+        const filterSchema: FilterSchemasAndGroups = {
+            groups: [{ name: 'test', label: 'Test Group' }],
+            filters: [
+                {
+                    id: 'nin-filter',
+                    label: 'Not In Filter',
+                    group: 'test',
+                    expression: {
+                        type: 'notIn',
+                        field: 'status',
+                        value: { type: 'text' }
+                    },
+                    aiGenerated: false
+                }
+            ]
+        };
+
+        const emptyState = buildInitialFormState(filterSchema.filters[0].expression);
+        const aiState = {
+            type: 'or',
+            children: [
+                { type: 'leaf', field: 'status', value: 'NEW' },
+                { type: 'leaf', field: 'status', value: 'ARCHIVED' }
+            ]
+        };
+
+        const result = mergeFilterFormState(filterSchema.filters[0].expression, emptyState, aiState);
+        expect(result.type).toBe('leaf');
+        if (result.type === 'leaf') {
+            expect(result.value).toEqual(['NEW', 'ARCHIVED']);
+        }
+    });
+});