@meta-1/editor 0.0.28 → 1.0.0

package/src/components/tiptap-extension/node-alignment-extension.ts

@@ -0,0 +1,285 @@
+import type { NodeWithPos } from "@tiptap/core"
+import { Extension } from "@tiptap/core"
+import type { EditorState, Transaction } from "@tiptap/pm/state"
+import { getSelectedNodesOfType } from "../../lib/tiptap-utils"
+import { updateNodesAttr } from "../../lib/tiptap-utils"
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    nodeAlignment: {
+      setNodeTextAlign: (textAlign: string) => ReturnType
+      unsetNodeTextAlign: () => ReturnType
+      toggleNodeTextAlign: (textAlign: string) => ReturnType
+      setNodeVAlign: (verticalAlign: string) => ReturnType
+      unsetNodeVAlign: () => ReturnType
+      toggleNodeVAlign: (verticalAlign: string) => ReturnType
+      setNodeAlignment: (
+        textAlign?: string,
+        verticalAlign?: string
+      ) => ReturnType
+      unsetNodeAlignment: () => ReturnType
+    }
+  }
+}
+
+export interface NodeAlignmentOptions {
+  /**
+   * Node types that should support alignment
+   * @default ["paragraph", "heading", "blockquote", "tableCell", "tableHeader"]
+   */
+  types: string[]
+  /**
+   * Use inline style instead of data attribute
+   * @default true
+   */
+  useStyle?: boolean
+  /**
+   * Valid text alignment values
+   * @default ["left", "center", "right", "justify"]
+   */
+  textAlignValues: string[]
+  /**
+   * Valid vertical alignment values
+   * @default ["top", "middle", "bottom"]
+   */
+  verticalAlignValues: string[]
+}
+
+function getToggleValue(
+  targets: NodeWithPos[],
+  attributeName: string,
+  inputValue: string
+): string | null {
+  if (targets.length === 0) return null
+
+  for (const target of targets) {
+    const currentValue = target.node.attrs?.[attributeName] ?? null
+    if (currentValue !== inputValue) {
+      return inputValue
+    }
+  }
+  return null
+}
+
+export const NodeAlignment = Extension.create<NodeAlignmentOptions>({
+  name: "nodeAlignment",
+
+  addOptions() {
+    return {
+      types: ["paragraph", "heading", "blockquote", "tableCell", "tableHeader"],
+      useStyle: true,
+      textAlignValues: ["left", "center", "right", "justify"],
+      verticalAlignValues: ["top", "middle", "bottom"],
+    }
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          nodeTextAlign: {
+            default: null as string | null,
+
+            parseHTML: (element: HTMLElement) => {
+              const styleAlign = element.style?.textAlign
+              if (
+                styleAlign &&
+                this.options.textAlignValues.includes(styleAlign)
+              ) {
+                return styleAlign
+              }
+
+              const dataAlign = element.getAttribute("data-node-text-align")
+              if (
+                dataAlign &&
+                this.options.textAlignValues.includes(dataAlign)
+              ) {
+                return dataAlign
+              }
+              return null
+            },
+
+            renderHTML: (attributes) => {
+              const align = attributes.nodeTextAlign as string | null
+              if (!align || !this.options.textAlignValues.includes(align))
+                return {}
+
+              if (this.options.useStyle) {
+                return { style: `text-align: ${align}` }
+              } else {
+                return { "data-node-text-align": align }
+              }
+            },
+          },
+
+          nodeVerticalAlign: {
+            default: null as string | null,
+
+            parseHTML: (element: HTMLElement) => {
+              const styleVAlign = element.style?.verticalAlign
+              if (
+                styleVAlign &&
+                this.options.verticalAlignValues.includes(styleVAlign)
+              ) {
+                return styleVAlign
+              }
+              const dataVAlign = element.getAttribute(
+                "data-node-vertical-align"
+              )
+              if (
+                dataVAlign &&
+                this.options.verticalAlignValues.includes(dataVAlign)
+              ) {
+                return dataVAlign
+              }
+              return null
+            },
+
+            renderHTML: (attributes) => {
+              const vAlign = attributes.nodeVerticalAlign as string | null
+              if (!vAlign || !this.options.verticalAlignValues.includes(vAlign))
+                return {}
+
+              if (this.options.useStyle) {
+                return { style: `vertical-align: ${vAlign}` }
+              } else {
+                return { "data-node-vertical-align": vAlign }
+              }
+            },
+          },
+        },
+      },
+    ]
+  },
+
+  addCommands() {
+    const executeAlignmentCommand = (
+      attributeName: "nodeTextAlign" | "nodeVerticalAlign",
+      getTargetValue: (
+        targets: NodeWithPos[],
+        inputValue?: string
+      ) => string | null
+    ) => {
+      return (inputValue?: string) =>
+        ({ state, tr }: { state: EditorState; tr: Transaction }) => {
+          const targets = getSelectedNodesOfType(
+            state.selection,
+            this.options.types
+          )
+          if (targets.length === 0) return false
+          const targetValue = getTargetValue(targets, inputValue)
+          return updateNodesAttr(tr, targets, attributeName, targetValue)
+        }
+    }
+
+    return {
+      // TEXT ALIGN
+      setNodeTextAlign: executeAlignmentCommand(
+        "nodeTextAlign",
+        (_, inputValue) => {
+          if (!inputValue || !this.options.textAlignValues.includes(inputValue))
+            return null
+          return inputValue
+        }
+      ),
+      unsetNodeTextAlign: executeAlignmentCommand("nodeTextAlign", () => null),
+      toggleNodeTextAlign: executeAlignmentCommand(
+        "nodeTextAlign",
+        (targets, inputValue) => {
+          if (!inputValue || !this.options.textAlignValues.includes(inputValue))
+            return null
+          return getToggleValue(targets, "nodeTextAlign", inputValue)
+        }
+      ),
+
+      // VERTICAL ALIGN
+      setNodeVAlign: executeAlignmentCommand(
+        "nodeVerticalAlign",
+        (_, inputValue) => {
+          if (
+            !inputValue ||
+            !this.options.verticalAlignValues.includes(inputValue)
+          )
+            return null
+          return inputValue
+        }
+      ),
+      unsetNodeVAlign: executeAlignmentCommand("nodeVerticalAlign", () => null),
+      toggleNodeVAlign: executeAlignmentCommand(
+        "nodeVerticalAlign",
+        (targets, inputValue) => {
+          if (
+            !inputValue ||
+            !this.options.verticalAlignValues.includes(inputValue)
+          )
+            return null
+          return getToggleValue(targets, "nodeVerticalAlign", inputValue)
+        }
+      ),
+
+      // BOTH
+      setNodeAlignment:
+        (textAlign?: string, verticalAlign?: string) =>
+        ({ state, tr }: { state: EditorState; tr: Transaction }) => {
+          const targets = getSelectedNodesOfType(
+            state.selection,
+            this.options.types
+          )
+          if (targets.length === 0) return false
+
+          let hasChanges = false
+
+          for (const { node, pos } of targets) {
+            const newAttrs = { ...node.attrs }
+
+            if (textAlign && this.options.textAlignValues.includes(textAlign)) {
+              newAttrs.nodeTextAlign = textAlign
+              hasChanges = true
+            }
+
+            if (
+              verticalAlign &&
+              this.options.verticalAlignValues.includes(verticalAlign)
+            ) {
+              newAttrs.nodeVerticalAlign = verticalAlign
+              hasChanges = true
+            }
+
+            if (hasChanges) tr.setNodeMarkup(pos, undefined, newAttrs)
+          }
+
+          return hasChanges
+        },
+
+      unsetNodeAlignment:
+        () =>
+        ({ state, tr }: { state: EditorState; tr: Transaction }) => {
+          const targets = getSelectedNodesOfType(
+            state.selection,
+            this.options.types
+          )
+          if (targets.length === 0) return false
+
+          let hasChanges = false
+
+          for (const { node, pos } of targets) {
+            const hasText = node.attrs?.nodeTextAlign ?? null
+            const hasV = node.attrs?.nodeVerticalAlign ?? null
+
+            if (hasText || hasV) {
+              const newAttrs = {
+                ...node.attrs,
+                nodeTextAlign: null,
+                nodeVerticalAlign: null,
+              }
+              tr.setNodeMarkup(pos, undefined, newAttrs)
+              hasChanges = true
+            }
+          }
+
+          return hasChanges
+        },
+    }
+  },
+})

package/src/components/tiptap-extension/node-background-extension.ts

@@ -0,0 +1,150 @@
+import type { NodeWithPos } from "@tiptap/core"
+import { Extension } from "@tiptap/core"
+import type { EditorState, Transaction } from "@tiptap/pm/state"
+import { getSelectedNodesOfType } from "../../lib/tiptap-utils"
+import { updateNodesAttr } from "../../lib/tiptap-utils"
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    nodeBackground: {
+      setNodeBackgroundColor: (backgroundColor: string) => ReturnType
+      unsetNodeBackgroundColor: () => ReturnType
+      toggleNodeBackgroundColor: (backgroundColor: string) => ReturnType
+    }
+  }
+}
+
+export interface NodeBackgroundOptions {
+  /**
+   * Node types that should support background colors
+   * @default ["paragraph", "heading", "blockquote", "taskList", "bulletList", "orderedList", "tableCell", "tableHeader"]
+   */
+  types: string[]
+  /**
+   * Use inline style instead of data attribute
+   * @default true
+   */
+  useStyle?: boolean
+}
+
+/**
+ * Determines the target color for toggle operations
+ */
+function getToggleColor(
+  targets: NodeWithPos[],
+  inputColor: string
+): string | null {
+  if (targets.length === 0) return null
+
+  for (const target of targets) {
+    const currentColor = target.node.attrs?.backgroundColor ?? null
+    if (currentColor !== inputColor) {
+      return inputColor
+    }
+  }
+
+  return null
+}
+
+export const NodeBackground = Extension.create<NodeBackgroundOptions>({
+  name: "nodeBackground",
+
+  addOptions() {
+    return {
+      types: [
+        "paragraph",
+        "heading",
+        "blockquote",
+        "taskList",
+        "bulletList",
+        "orderedList",
+        "tableCell",
+        "tableHeader",
+      ],
+      useStyle: true,
+    }
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          backgroundColor: {
+            default: null as string | null,
+
+            parseHTML: (element: HTMLElement) => {
+              const styleColor = element.style?.backgroundColor
+              if (styleColor) return styleColor
+
+              const dataColor = element.getAttribute("data-background-color")
+              return dataColor || null
+            },
+
+            renderHTML: (attributes) => {
+              const color = attributes.backgroundColor as string | null
+              if (!color) return {}
+
+              if (this.options.useStyle) {
+                return {
+                  style: `background-color: ${color}`,
+                }
+              } else {
+                return {
+                  "data-background-color": color,
+                }
+              }
+            },
+          },
+        },
+      },
+    ]
+  },
+
+  addCommands() {
+    /**
+     * Generic command executor for background color operations
+     */
+    const executeBackgroundCommand = (
+      getTargetColor: (
+        targets: NodeWithPos[],
+        inputColor?: string
+      ) => string | null
+    ) => {
+      return (inputColor?: string) =>
+        ({ state, tr }: { state: EditorState; tr: Transaction }) => {
+          const targets = getSelectedNodesOfType(
+            state.selection,
+            this.options.types
+          )
+
+          if (targets.length === 0) return false
+
+          const targetColor = getTargetColor(targets, inputColor)
+
+          return updateNodesAttr(tr, targets, "backgroundColor", targetColor)
+        }
+    }
+
+    return {
+      /**
+       * Set background color to specific value
+       */
+      setNodeBackgroundColor: executeBackgroundCommand(
+        (_, inputColor) => inputColor || null
+      ),
+
+      /**
+       * Remove background color
+       */
+      unsetNodeBackgroundColor: executeBackgroundCommand(() => null),
+
+      /**
+       * Toggle background color (set if different/missing, unset if all have it)
+       */
+      toggleNodeBackgroundColor: executeBackgroundCommand(
+        (targets, inputColor) => getToggleColor(targets, inputColor || "")
+      ),
+    }
+  },
+})

package/src/components/tiptap-extension/ui-state-extension.ts

@@ -0,0 +1,97 @@
+import { Extension } from "@tiptap/core"
+
+export interface UiState {
+  aiGenerationIsSelection: boolean
+  aiGenerationIsLoading: boolean
+  aiGenerationActive: boolean
+  aiGenerationHasMessage: boolean
+  commentInputVisible: boolean
+  lockDragHandle: boolean
+  isDragging: boolean
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    uiState: {
+      aiGenerationSetIsSelection: (value: boolean) => ReturnType
+      aiGenerationSetIsLoading: (value: boolean) => ReturnType
+      aiGenerationShow: () => ReturnType
+      aiGenerationHide: () => ReturnType
+      aiGenerationHasMessage: (value: boolean) => ReturnType
+
+      commentInputShow: () => ReturnType
+      commentInputHide: () => ReturnType
+
+      setLockDragHandle: (value: boolean) => ReturnType
+
+      resetUiState: () => ReturnType
+      setIsDragging: (value: boolean) => ReturnType
+    }
+  }
+
+  interface Storage {
+    uiState: UiState
+  }
+}
+
+export const defaultUiState: UiState = {
+  aiGenerationIsSelection: false,
+  aiGenerationIsLoading: false,
+  aiGenerationActive: false,
+  aiGenerationHasMessage: false,
+  commentInputVisible: false,
+  lockDragHandle: false,
+  isDragging: false,
+} as const
+
+export const UiState = Extension.create<UiState>({
+  name: "uiState",
+
+  addStorage() {
+    return {
+      uiState: { ...defaultUiState },
+    }
+  },
+
+  addCommands() {
+    const createBooleanSetter =
+      (key: keyof UiState) => (value: boolean) => () => {
+        this.storage[key] = value
+        return true
+      }
+
+    const createToggle = (key: keyof UiState, value: boolean) => () => () => {
+      this.storage[key] = value
+      return true
+    }
+
+    return {
+      // AI Generation commands
+      aiGenerationSetIsSelection: createBooleanSetter(
+        "aiGenerationIsSelection"
+      ),
+      aiGenerationSetIsLoading: createBooleanSetter("aiGenerationIsLoading"),
+      aiGenerationHasMessage: createBooleanSetter("aiGenerationHasMessage"),
+      aiGenerationShow: createToggle("aiGenerationActive", true),
+      aiGenerationHide: createToggle("aiGenerationActive", false),
+
+      // Comment input commands
+      commentInputShow: createToggle("commentInputVisible", true),
+      commentInputHide: createToggle("commentInputVisible", false),
+
+      // Drag handle commands
+      setLockDragHandle: createBooleanSetter("lockDragHandle"),
+      setIsDragging: createBooleanSetter("isDragging"),
+
+      // Reset command
+      resetUiState: () => () => {
+        Object.assign(this.storage, { ...defaultUiState })
+        return true
+      },
+    }
+  },
+
+  onCreate() {
+    this.storage = { ...defaultUiState }
+  },
+})

package/src/components/tiptap-icons/add-col-left-icon.tsx

@@ -0,0 +1,30 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const AddColLeftIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19 2C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H15C13.3431 22 12 20.6569 12 19V5C12 3.34315 13.3431 2 15 2H19ZM14 19C14 19.5523 14.4477 20 15 20H19C19.5523 20 20 19.5523 20 19V13H14V19ZM15 4C14.4477 4 14 4.44772 14 5V11H20V5C20 4.44772 19.5523 4 19 4H15Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6 8C6.55228 8 7 8.44772 7 9V11H9C9.55228 11 10 11.4477 10 12C10 12.5523 9.55228 13 9 13H7V15C7 15.5523 6.55228 16 6 16C5.44772 16 5 15.5523 5 15V13H3C2.44772 13 2 12.5523 2 12C2 11.4477 2.44772 11 3 11H5V9C5 8.44772 5.44772 8 6 8Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+AddColLeftIcon.displayName = "AddColLeftIcon"

package/src/components/tiptap-icons/add-col-right-icon.tsx

@@ -0,0 +1,30 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const AddColRightIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 2C10.6569 2 12 3.34315 12 5V19C12 20.6569 10.6569 22 9 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2H9ZM4 19C4 19.5523 4.44772 20 5 20H9C9.55228 20 10 19.5523 10 19V13H4V19ZM5 4C4.44772 4 4 4.44772 4 5V11H10V5C10 4.44772 9.55228 4 9 4H5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18 8C18.5523 8 19 8.44772 19 9V11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H19V15C19 15.5523 18.5523 16 18 16C17.4477 16 17 15.5523 17 15V13H15C14.4477 13 14 12.5523 14 12C14 11.4477 14.4477 11 15 11H17V9C17 8.44772 17.4477 8 18 8Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+AddColRightIcon.displayName = "AddColRightIcon"

package/src/components/tiptap-icons/add-row-bottom-icon.tsx

@@ -0,0 +1,30 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const AddRowBottomIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M12 14C12.5523 14 13 14.4477 13 15V17H15C15.5523 17 16 17.4477 16 18C16 18.5523 15.5523 19 15 19H13V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V19H9C8.44772 19 8 18.5523 8 18C8 17.4477 8.44772 17 9 17H11V15C11 14.4477 11.4477 14 12 14Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19 2C20.6569 2 22 3.34315 22 5V9C22 10.6569 20.6569 12 19 12H5C3.34315 12 2 10.6569 2 9V5C2 3.34315 3.34315 2 5 2H19ZM5 4C4.44772 4 4 4.44772 4 5V9C4 9.55228 4.44772 10 5 10H11V4H5ZM13 10H19C19.5523 10 20 9.55228 20 9V5C20 4.44772 19.5523 4 19 4H13V10Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+AddRowBottomIcon.displayName = "AddRowBottomIcon"

package/src/components/tiptap-icons/add-row-top-icon.tsx

@@ -0,0 +1,30 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const AddRowTopIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19 12C20.6569 12 22 13.3431 22 15V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V15C2 13.3431 3.34315 12 5 12H19ZM5 14C4.44772 14 4 14.4477 4 15V19C4 19.5523 4.44772 20 5 20H11V14H5ZM13 20H19C19.5523 20 20 19.5523 20 19V15C20 14.4477 19.5523 14 19 14H13V20Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12 2C12.5523 2 13 2.44772 13 3V5H15C15.5523 5 16 5.44772 16 6C16 6.55228 15.5523 7 15 7H13V9C13 9.55228 12.5523 10 12 10C11.4477 10 11 9.55228 11 9V7H9C8.44772 7 8 6.55228 8 6C8 5.44772 8.44772 5 9 5H11V3C11 2.44772 11.4477 2 12 2Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+AddRowTopIcon.displayName = "AddRowTopIcon"

package/src/components/tiptap-icons/ai-sparkles-icon.tsx

@@ -0,0 +1,32 @@
+import { memo } from "react"
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">
+
+export const AiSparklesIcon = memo(({ className, ...props }: SvgProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.94924 1.68544C6.81364 1.27624 6.43108 1 6 1C5.56892 1 5.18636 1.27624 5.05076 1.68544L4.3711 3.73642C4.2717 4.03638 4.03638 4.2717 3.73642 4.3711L1.68544 5.05076C1.27624 5.18636 1 5.56892 1 6C1 6.43108 1.27624 6.81364 1.68544 6.94924L3.73642 7.6289C4.03638 7.7283 4.2717 7.96362 4.3711 8.26358L5.05076 10.3146C5.18636 10.7238 5.56892 11 6 11C6.43108 11 6.81364 10.7238 6.94924 10.3146L7.6289 8.26358C7.7283 7.96362 7.96362 7.7283 8.26358 7.6289L10.3146 6.94924C10.7238 6.81364 11 6.43108 11 6C11 5.56892 10.7238 5.18636 10.3146 5.05076L8.26358 4.3711C7.96362 4.2717 7.7283 4.03638 7.6289 3.73642L6.94924 1.68544ZM4.95595 6C5.38537 5.74447 5.74447 5.38537 6 4.95595C6.25554 5.38537 6.61463 5.74447 7.04405 6C6.61463 6.25554 6.25554 6.61463 6 7.04405C5.74447 6.61463 5.38537 6.25554 4.95595 6Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.9492 5.68544C14.8136 5.27624 14.4311 5 14 5C13.5689 5 13.1864 5.27624 13.0508 5.68544L11.3755 10.7408C11.2761 11.0408 11.0408 11.2761 10.7408 11.3755L5.68544 13.0508C5.27624 13.1864 5 13.5689 5 14C5 14.4311 5.27624 14.8136 5.68544 14.9492L10.7408 16.6245C11.0408 16.7239 11.2761 16.9592 11.3755 17.2592L13.0508 22.3146C13.1864 22.7238 13.5689 23 14 23C14.4311 23 14.8136 22.7238 14.9492 22.3146L16.6245 17.2592C16.7239 16.9592 16.9592 16.7239 17.2592 16.6245L22.3146 14.9492C22.7238 14.8136 23 14.4311 23 14C23 13.5689 22.7238 13.1864 22.3146 13.0508L17.2592 11.3755C16.9592 11.2761 16.7239 11.0408 16.6245 10.7408L14.9492 5.68544ZM13.274 11.3699L14 9.17903L14.726 11.3699C15.0242 12.2698 15.7302 12.9758 16.6301 13.274L18.821 14L16.6301 14.726C15.7302 15.0242 15.0242 15.7302 14.726 16.6301L14 18.821L13.274 16.6301C12.9758 15.7302 12.2698 15.0242 11.3699 14.726L9.17903 14L11.3699 13.274C12.2698 12.9758 12.9758 12.2698 13.274 11.3699Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+})
+
+AiSparklesIcon.displayName = "AiSparklesIcon"