Data Table AI Filter Command Palette

1"use client";
2 
3import { TextShimmer } from "@/components/data-table/data-table-filter-command-ai/text-shimmer";
4import { useAIFilters } from "@/components/data-table/data-table-filter-command-ai/use-ai-filters";
5import {
6  columnFiltersParserFromSchema,
7  getFieldOptions,
8  getFilterValue,
9  getWordByCaretPosition,
10  replaceInputByFieldType,
11} from "@/components/data-table/data-table-filter-command/utils";
12import { useDataTable } from "@/components/data-table/data-table-provider";
13import type { DataTableFilterField } from "@/components/data-table/types";
14import {
15  Command,
16  CommandEmpty,
17  CommandGroup,
18  CommandItem,
19  CommandList,
20  CommandSeparator,
21} from "@/components/ui/command";
22import { Kbd } from "@/components/ui/kbd";
23import { Separator } from "@/components/ui/separator";
24import { useHotKey } from "@/hooks/use-hot-key";
25import { useLocalStorage } from "@/hooks/use-local-storage";
26import { isStructuredQuery } from "@/lib/ai";
27import { getCommandHistoryKey } from "@/lib/constants/local-storage";
28import { formatCompactNumber } from "@/lib/format";
29import type { SchemaDefinition } from "@/lib/store/schema/types";
30import type { TableSchemaDefinition } from "@/lib/table-schema";
31import { cn } from "@/lib/utils";
32import { Command as CommandPrimitive } from "cmdk";
33import { formatDistanceToNow } from "date-fns";
34import { LoaderCircle, Search, Sparkles, X } from "lucide-react";
35import React, { useEffect, useMemo, useRef, useState } from "react";
36import { toast } from "sonner";
37 
38interface DataTableFilterAICommandProps {
39  /** BYOS schema definition for parsing/serializing filter values */
40  schema: SchemaDefinition;
41  /** Table schema definition for AI context generation */
42  tableSchema: TableSchemaDefinition;
43  /** API endpoint that streams AI filter results */
44  api: string;
45  /** Unique ID for this table (used to namespace localStorage) */
46  tableId?: string;
47}
48 
49export function DataTableFilterAICommand({
50  schema,
51  tableSchema,
52  api,
53  tableId = "default",
54}: DataTableFilterAICommandProps) {
55  const {
56    table,
57    isLoading,
58    filterFields: _filterFields,
59    getFacetedUniqueValues,
60  } = useDataTable();
61  const columnFilters = table.getState().columnFilters;
62  const inputRef = useRef<HTMLInputElement>(null);
63  const [open, setOpen] = useState<boolean>(false);
64  const [currentWord, setCurrentWord] = useState<string>("");
65  const isSerializingRef = useRef(false);
66  const filterFields = useMemo(
67// … truncated