@copilotkit/react-textarea 0.0.0-0.0.0-max-changeset-10101010101010-20260109191632

package/src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box-core.tsx

@@ -0,0 +1,273 @@
+import useAutosizeTextArea from "../../../hooks/misc/use-autosize-textarea";
+import {
+  EditingEditorState,
+  Generator_InsertionOrEditingSuggestion,
+} from "../../../types/base/autosuggestions-bare-function";
+import { SourceSearchBox } from "../../source-search-box/source-search-box";
+import { DocumentPointer, useCopilotContext } from "@copilotkit/react-core";
+import { Button } from "../../ui/button";
+import { Label } from "../../ui/label";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { streamPromiseFlatten } from "../../../lib/stream-promise-flatten";
+import { IncludedFilesPreview } from "./included-files-preview";
+import { useHoveringEditorContext } from "../hovering-editor-provider";
+
+export type SuggestionState = {
+  editorState: EditingEditorState;
+};
+
+export interface HoveringInsertionPromptBoxCoreProps {
+  state: SuggestionState;
+  performInsertion: (insertedText: string) => void;
+  insertionOrEditingFunction: Generator_InsertionOrEditingSuggestion;
+  contextCategories: string[];
+}
+
+export const HoveringInsertionPromptBoxCore = ({
+  performInsertion,
+  state,
+  insertionOrEditingFunction,
+  contextCategories,
+}: HoveringInsertionPromptBoxCoreProps) => {
+  const { getDocumentsContext } = useCopilotContext();
+
+  const [editSuggestion, setEditSuggestion] = useState<string>("");
+  const [suggestionIsLoading, setSuggestionIsLoading] = useState<boolean>(false);
+
+  const [adjustmentPrompt, setAdjustmentPrompt] = useState<string>("");
+
+  const [generatingSuggestion, setGeneratingSuggestion] = useState<ReadableStream<string> | null>(
+    null,
+  );
+
+  const adjustmentTextAreaRef = useRef<HTMLTextAreaElement>(null);
+  const suggestionTextAreaRef = useRef<HTMLTextAreaElement>(null);
+
+  const [filePointers, setFilePointers] = useState<DocumentPointer[]>([]);
+
+  const [suggestedFiles, setSuggestedFiles] = useState<DocumentPointer[]>([]);
+  useEffect(() => {
+    setSuggestedFiles(getDocumentsContext(contextCategories));
+  }, [contextCategories, getDocumentsContext]);
+
+  useAutosizeTextArea(suggestionTextAreaRef, editSuggestion || "");
+  useAutosizeTextArea(adjustmentTextAreaRef, adjustmentPrompt || "");
+
+  // initially focus on the adjustment prompt text area
+  useEffect(() => {
+    adjustmentTextAreaRef.current?.focus();
+  }, []);
+
+  // continuously read the generating suggestion stream and update the edit suggestion
+  useEffect(() => {
+    // if no generating suggestion, do nothing
+    if (!generatingSuggestion) {
+      return;
+    }
+
+    // Check if the stream is already locked (i.e. already reading from it)
+    if (generatingSuggestion.locked) {
+      return;
+    }
+
+    // reset the edit suggestion
+    setEditSuggestion("");
+
+    // read the generating suggestion stream and continuously update the edit suggestion
+    const reader = generatingSuggestion.getReader();
+    const read = async () => {
+      setSuggestionIsLoading(true);
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+          break;
+        }
+        setEditSuggestion((prev) => {
+          const newSuggestion = prev + value;
+
+          // Scroll to the bottom of the textarea. We call this here to make sure scroll-to-bottom is synchronous with the state update.
+          if (suggestionTextAreaRef.current) {
+            suggestionTextAreaRef.current.scrollTop = suggestionTextAreaRef.current.scrollHeight;
+          }
+          return newSuggestion;
+        });
+      }
+
+      setSuggestionIsLoading(false);
+    };
+    read();
+
+    return () => {
+      // release the lock if the reader is not closed on unmount
+      const releaseLockIfNotClosed = async () => {
+        try {
+          await reader.closed;
+        } catch {
+          reader.releaseLock();
+        }
+      };
+
+      releaseLockIfNotClosed();
+    };
+  }, [generatingSuggestion]);
+
+  // generate an adjustment to the completed text, based on the adjustment prompt
+  const beginGeneratingAdjustment = useCallback(async () => {
+    // don't generate text if the prompt is empty
+    if (!adjustmentPrompt.trim()) {
+      return;
+    }
+
+    // editor state includes the text being edited, and the text before/after the selection
+    // if the current edit suggestion is not empty, then use *it* as the "selected text" - instead of the editor state's selected text
+    let modificationState = state.editorState;
+    if (editSuggestion !== "") {
+      modificationState.selectedText = editSuggestion;
+    }
+
+    // generate the adjustment suggestion
+    const adjustmentSuggestionTextStreamPromise = insertionOrEditingFunction(
+      modificationState,
+      adjustmentPrompt,
+      filePointers,
+      new AbortController().signal,
+    );
+    const adjustmentSuggestionTextStream = streamPromiseFlatten(
+      adjustmentSuggestionTextStreamPromise,
+    );
+
+    setGeneratingSuggestion(adjustmentSuggestionTextStream);
+  }, [
+    adjustmentPrompt,
+    editSuggestion,
+    state.editorState,
+    insertionOrEditingFunction,
+    filePointers,
+  ]);
+
+  const isLoading = suggestionIsLoading;
+
+  const textToEdit = editSuggestion || state.editorState.selectedText;
+  const adjustmentLabel =
+    textToEdit === ""
+      ? "Describe the text you want to insert"
+      : "Describe adjustments to the suggested text";
+  const placeholder =
+    textToEdit === ""
+      ? "e.g. 'summarize the client's top 3 pain-points from @CallTranscript'"
+      : "e.g. 'make it more formal', 'be more specific', ...";
+
+  const { setIsDisplayed } = useHoveringEditorContext();
+
+  const AdjustmentPromptComponent = (
+    <>
+      <Label className="">{adjustmentLabel}</Label>
+      <div className="relative w-full flex items-center">
+        <textarea
+          data-testid="adjustment-prompt"
+          disabled={suggestionIsLoading}
+          ref={adjustmentTextAreaRef}
+          value={adjustmentPrompt}
+          onChange={(e) => setAdjustmentPrompt(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && e.shiftKey) {
+              e.preventDefault();
+              setAdjustmentPrompt(adjustmentPrompt + "\n");
+            } else if (e.key === "Enter") {
+              e.preventDefault();
+              beginGeneratingAdjustment();
+            }
+          }}
+          placeholder={placeholder}
+          style={{ minHeight: "3rem" }}
+          className="w-full bg-slate-100 h-auto h-min-14 text-sm p-2 rounded-md resize-none overflow-visible focus:outline-none focus:ring-0 focus:border-non pr-[3rem]"
+          rows={1}
+        />
+        <button
+          onClick={beginGeneratingAdjustment}
+          className="absolute right-2 bg-blue-500 text-white w-8 h-8 rounded-full flex items-center justify-center"
+          data-testid="generate-button"
+        >
+          <i className="material-icons">arrow_forward</i>
+        </button>
+      </div>
+    </>
+  );
+
+  const SuggestionComponent = (
+    <>
+      <div className="flex justify-between items-end w-full">
+        <Label className="mt-4">Suggested:</Label>
+        <div className="ml-auto">
+          {isLoading && (
+            <div className="flex justify-center items-center">
+              <div
+                className="inline-block h-4 w-4 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+                role="status"
+              >
+                <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
+                  Loading...
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+      <textarea
+        data-testid="suggestion-result"
+        ref={suggestionTextAreaRef}
+        value={editSuggestion}
+        disabled={suggestionIsLoading}
+        onChange={(e) => setEditSuggestion(e.target.value)}
+        className="w-full text-base p-2 border border-gray-300 rounded-md resize-none bg-green-50"
+        style={{ overflow: "auto", maxHeight: "10em" }}
+      />
+    </>
+  );
+
+  const SubmitComponent = (
+    <div className="flex w-full gap-4 justify-start">
+      <Button
+        data-testid="insert-button"
+        className=" bg-green-700 text-white"
+        onClick={() => {
+          performInsertion(editSuggestion);
+        }}
+      >
+        Insert <i className="material-icons">check</i>
+      </Button>
+    </div>
+  );
+
+  // show source search if the last word in the adjustment prompt BEGINS with an @
+  const sourceSearchCandidate = adjustmentPrompt.split(" ").pop();
+  // if the candidate is @someCandidate, then 'someCandidate', otherwise undefined
+  const sourceSearchWord = sourceSearchCandidate?.startsWith("@")
+    ? sourceSearchCandidate.slice(1)
+    : undefined;
+
+  return (
+    <div className="w-full flex flex-col items-start relative gap-2">
+      {AdjustmentPromptComponent}
+      {filePointers.length > 0 && (
+        <IncludedFilesPreview includedFiles={filePointers} setIncludedFiles={setFilePointers} />
+      )}
+      {sourceSearchWord !== undefined && (
+        <SourceSearchBox
+          searchTerm={sourceSearchWord}
+          suggestedFiles={suggestedFiles}
+          onSelectedFile={(filePointer) => {
+            setAdjustmentPrompt(adjustmentPrompt.replace(new RegExp(`@${sourceSearchWord}$`), ""));
+            setFilePointers((prev) => [...prev, filePointer]);
+
+            // focus back on the adjustment prompt, and move the cursor to the end
+            adjustmentTextAreaRef.current?.focus();
+          }}
+        />
+      )}
+      {generatingSuggestion ? SuggestionComponent : null}
+      {generatingSuggestion ? SubmitComponent : null}
+    </div>
+  );
+};

package/src/components/hovering-toolbar/text-insertion-prompt-box/hovering-insertion-prompt-box.tsx

@@ -0,0 +1,30 @@
+import { HoveringInsertionPromptBoxCore } from "./hovering-insertion-prompt-box-core";
+import {
+  EditingEditorState,
+  InsertionEditorApiConfig,
+} from "../../../types/base/autosuggestions-bare-function";
+
+export interface Props {
+  editorState: EditingEditorState;
+  apiConfig: InsertionEditorApiConfig;
+  performInsertion: (insertedText: string) => void;
+  contextCategories: string[];
+}
+
+export const HoveringInsertionPromptBox = (props: Props) => {
+  return (
+    <div
+      className="flex flex-col justify-center items-center space-y-4 rounded-md border shadow-lg p-4 border-gray- bg-white"
+      style={{ width: "35rem" }}
+    >
+      <HoveringInsertionPromptBoxCore
+        state={{
+          editorState: props.editorState,
+        }}
+        insertionOrEditingFunction={props.apiConfig.insertionOrEditingFunction}
+        performInsertion={props.performInsertion}
+        contextCategories={props.contextCategories}
+      />
+    </div>
+  );
+};

package/src/components/hovering-toolbar/text-insertion-prompt-box/included-files-preview.tsx

@@ -0,0 +1,55 @@
+import { DocumentPointer } from "@copilotkit/react-core";
+import { Label } from "../../ui/label";
+import React from "react";
+import Chip from "@mui/material/Chip/Chip.js";
+import Avatar from "@mui/material/Avatar/Avatar.js";
+
+export interface IncludedFilesPreviewProps {
+  includedFiles: DocumentPointer[];
+  setIncludedFiles: React.Dispatch<React.SetStateAction<DocumentPointer[]>>;
+}
+
+export const IncludedFilesPreview = ({
+  includedFiles,
+  setIncludedFiles,
+}: IncludedFilesPreviewProps) => {
+  return (
+    <div className="flex flex-col gap-2 mt-2">
+      <Label className="">Included context:</Label>
+      <div className="flex flex-wrap gap-2">
+        {includedFiles.map((filePointer, index) => {
+          return (
+            <FileChipPreview
+              key={`file-${filePointer.sourceApplication}.${filePointer.name}`}
+              filePointer={filePointer}
+              onDelete={() => {
+                setIncludedFiles((prev) => prev.filter((fp) => fp !== filePointer));
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export interface FileChipPreviewProps {
+  filePointer: DocumentPointer;
+  onDelete: () => void;
+}
+
+export const FileChipPreview = ({ filePointer, onDelete }: FileChipPreviewProps) => {
+  return (
+    <Chip
+      label={filePointer.name}
+      onDelete={onDelete}
+      avatar={
+        <Avatar
+          src={filePointer.iconImageUri}
+          alt={filePointer.sourceApplication}
+          sx={{ backgroundColor: "transparent" }}
+        ></Avatar>
+      }
+    />
+  );
+};

package/src/components/hovering-toolbar/text-insertion-prompt-box/index.ts

@@ -0,0 +1,2 @@
+export { HoveringInsertionPromptBox } from "./hovering-insertion-prompt-box";
+export type { Props } from "./hovering-insertion-prompt-box";

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export { BaseCopilotTextarea } from "./base-copilot-textarea/base-copilot-textarea";
+
+export { CopilotTextarea } from "./copilot-textarea/copilot-textarea";
+export type { CopilotTextareaProps } from "./copilot-textarea/copilot-textarea";

package/src/components/manual-ui/chip-with-icon.tsx

@@ -0,0 +1,17 @@
+export interface ChipWithIconProps {
+  label: string;
+  onDelete: () => void;
+  iconUrl: string;
+}
+
+export const ChipWithIcon = ({ label, onDelete, iconUrl }: ChipWithIconProps) => {
+  return (
+    <span className="inline-flex items-center px-3 py-1 rounded-full bg-slate-200 text-sm font-medium text-white">
+      {iconUrl && <img src={iconUrl} alt="icon" className="w-4 h-4 rounded-full mr-2" />}
+      {label}
+      <button className="ml-2 text-white hover:text-gray-200 focus:outline-none" onClick={onDelete}>
+        x
+      </button>
+    </span>
+  );
+};

package/src/components/source-search-box/source-search-box.tsx

@@ -0,0 +1,117 @@
+import { useState } from "react";
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "../ui/command";
+
+import { Calculator, Calendar, CreditCard, Settings, Smile, User } from "lucide-react";
+
+import { DocumentPointer } from "@copilotkit/react-core";
+
+export interface SourceSearchBoxProps {
+  searchTerm: string;
+  suggestedFiles: DocumentPointer[];
+  onSelectedFile: (filePointer: DocumentPointer) => void;
+}
+
+export function SourceSearchBox(props: SourceSearchBoxProps) {
+  const [selectedValue, setSelectedValue] = useState<string>("");
+
+  return (
+    <Command
+      className="rounded-lg border shadow-md"
+      value={selectedValue}
+      onValueChange={(value) => {
+        setSelectedValue(value);
+      }}
+      filter={(value, search) => {
+        // if the search term is empty, show all commands
+        if (props.searchTerm === "") return 1;
+
+        // if the search term is a prefix of the command, show it
+        if (value.startsWith(props.searchTerm)) return 1;
+
+        // otherwise, don't show it
+        return 0;
+      }}
+    >
+      <CommandInput
+        value={props.searchTerm}
+        className="rounded-t-lg hidden"
+        placeholder="Search for a command..."
+      />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+
+        <CommandGroup heading="Available resources">
+          {props.suggestedFiles.map((filePointer) => {
+            return (
+              <CommandItem
+                key={`word-${filePointer.sourceApplication}.${filePointer.name}`}
+                value={filePointer.name}
+                onSelect={(value) => {
+                  props.onSelectedFile(filePointer);
+                }}
+              >
+                <div className=" px-3  flex flex-row gap-1 items-center">
+                  <Logo width="20px" height="20px">
+                    <img
+                      src={filePointer.iconImageUri}
+                      alt={filePointer.sourceApplication}
+                      className="w-full h-full"
+                    />
+                  </Logo>
+                  {filePointer.name}
+                </div>
+              </CommandItem>
+            );
+          })}
+        </CommandGroup>
+
+        {/* <CommandGroup heading="Suggestions">
+          <CommandItem
+            onSelect={(value) => {
+              console.log(value);
+              console.log(value);
+            }}
+          >
+            <Calendar className="mr-2 h-4 w-4" />
+            <span>Calendar</span>
+          </CommandItem>
+          <CommandItem>
+            <Smile className="mr-2 h-4 w-4" />
+            <span>Search Emoji</span>
+          </CommandItem>
+          <CommandItem>
+            <Calculator className="mr-2 h-4 w-4" />
+            <span>Calculator</span>
+          </CommandItem>
+        </CommandGroup> */}
+        <CommandSeparator />
+      </CommandList>
+    </Command>
+  );
+}
+
+export function Logo({
+  children,
+  width,
+  height,
+}: {
+  children: React.ReactNode;
+  width: string;
+  height: string;
+}) {
+  return (
+    <div className="flex items-center justify-center" style={{ width: width, height: height }}>
+      {children}
+    </div>
+  );
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/components/ui/command.tsx

@@ -0,0 +1,141 @@
+import * as React from "react";
+import { DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn } from "../../lib/utils";
+import { Dialog, DialogContent } from "./dialog";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    {/* <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" /> */}
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden pb-2", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};