@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.3

package/src/internal/plate-editor/plate-ui/block-suggestion.tsx

@@ -1,469 +0,0 @@
-'use client';
-
-import { Fragment, useMemo, useState } from 'react';
-
-import {
-  type TResolvedSuggestion,
-  acceptSuggestion,
-  getSuggestionKey,
-  keyId2SuggestionId,
-  rejectSuggestion
-} from '@platejs/suggestion';
-
-import { SuggestionPlugin } from '@platejs/suggestion/react';
-import { CheckIcon, XIcon } from 'lucide-react';
-import {
-  type NodeEntry,
-  type Path,
-  type TElement,
-  type TSuggestionText,
-  ElementApi,
-  KEYS,
-  PathApi,
-  TextApi
-} from 'platejs';
-import { useEditorPlugin, usePluginOption } from 'platejs/react';
-
-import { Avatar, AvatarFallback, AvatarImage } from '@docyrus/ui-pro-shared/avatar';
-
-import { Button } from './button';
-
-import {
-  Comment,
-  CommentCreateForm,
-  formatCommentDate,
-  type TComment
-} from './comment';
-
-import {
-  discussionPlugin,
-  type TDiscussion
-} from '../editor/plugins/discussion-kit';
-import { suggestionPlugin } from '../editor/plugins/suggestion-kit';
-
-export interface ResolvedSuggestion extends TResolvedSuggestion {
-  comments: TComment[];
-}
-
-export const BLOCK_SUGGESTION = '__block__';
-
-export const TYPE_TEXT_MAP: Record<string, (node?: TElement) => string> = {
-  [KEYS.audio]: () => 'Audio',
-  [KEYS.blockquote]: () => 'Blockquote',
-  [KEYS.callout]: () => 'Callout',
-  [KEYS.codeBlock]: () => 'Code Block',
-  [KEYS.column]: () => 'Column',
-  [KEYS.equation]: () => 'Equation',
-  [KEYS.file]: () => 'File',
-  [KEYS.h1]: () => 'Heading 1',
-  [KEYS.h2]: () => 'Heading 2',
-  [KEYS.h3]: () => 'Heading 3',
-  [KEYS.h4]: () => 'Heading 4',
-  [KEYS.h5]: () => 'Heading 5',
-  [KEYS.h6]: () => 'Heading 6',
-  [KEYS.hr]: () => 'Horizontal Rule',
-  [KEYS.img]: () => 'Image',
-  [KEYS.mediaEmbed]: () => 'Media',
-  [KEYS.p]: (node) => {
-    if (node?.[KEYS.listType] === KEYS.listTodo) return 'Todo List';
-    if (node?.[KEYS.listType] === KEYS.ol) return 'Ordered List';
-    if (node?.[KEYS.listType] === KEYS.ul) return 'List';
-
-    return 'Paragraph';
-  },
-  [KEYS.table]: () => 'Table',
-  [KEYS.toc]: () => 'Table of Contents',
-  [KEYS.toggle]: () => 'Toggle',
-  [KEYS.video]: () => 'Video'
-};
-
-export function BlockSuggestionCard({
-  idx,
-  isLast,
-  suggestion
-}: {
-  idx: number;
-  isLast: boolean;
-  suggestion: ResolvedSuggestion;
-}) {
-  const { api, editor } = useEditorPlugin(SuggestionPlugin);
-
-  const userInfo = usePluginOption(discussionPlugin, 'user', suggestion.userId);
-
-  const accept = (suggestion: ResolvedSuggestion) => {
-    api.suggestion.withoutSuggestions(() => {
-      acceptSuggestion(editor, suggestion);
-    });
-  };
-
-  const reject = (suggestion: ResolvedSuggestion) => {
-    api.suggestion.withoutSuggestions(() => {
-      rejectSuggestion(editor, suggestion);
-    });
-  };
-
-  const [hovering, setHovering] = useState(false);
-
-  const suggestionText2Array = (text: string) => {
-    if (text === BLOCK_SUGGESTION) return ['line breaks'];
-
-    return text.split(BLOCK_SUGGESTION).filter(Boolean);
-  };
-
-  const [editingId, setEditingId] = useState<string | null>(null);
-
-  return (
-    <div
-      key={`${suggestion.suggestionId}-${idx}`}
-      className="relative"
-      onMouseEnter={() => setHovering(true)}
-      onMouseLeave={() => setHovering(false)}>
-      <div className="flex flex-col p-4">
-        <div className="relative flex items-center">
-          {/* Replace to your own backend or refer to potion */}
-          <Avatar className="size-5">
-            <AvatarImage alt={userInfo?.name} src={userInfo?.avatarUrl} />
-            <AvatarFallback>{userInfo?.name?.[0]}</AvatarFallback>
-          </Avatar>
-          <h4 className="mx-2 font-semibold text-sm leading-none">
-            {userInfo?.name}
-          </h4>
-          <div className="text-muted-foreground/80 text-xs leading-none">
-            <span className="mr-1">
-              {formatCommentDate(new Date(suggestion.createdAt))}
-            </span>
-          </div>
-        </div>
-
-        <div className="relative mt-1 mb-4 pl-[32px]">
-          <div className="flex flex-col gap-2">
-            {suggestion.type === 'remove'
-              && suggestionText2Array(suggestion.text!).map((text, index) => (
-                <div key={index} className="flex items-center gap-2">
-                  <span className="text-muted-foreground text-sm">Delete:</span>
-
-                  <span key={index} className="text-sm">
-                    {text}
-                  </span>
-                </div>
-              ))}
-
-            {suggestion.type === 'insert'
-              && suggestionText2Array(suggestion.newText!).map((text, index) => (
-                <div key={index} className="flex items-center gap-2">
-                  <span className="text-muted-foreground text-sm">Add:</span>
-
-                  <span key={index} className="text-sm">
-                    {text || 'line breaks'}
-                  </span>
-                </div>
-              ))}
-
-            {suggestion.type === 'replace' && (
-              <div className="flex flex-col gap-2">
-                {suggestionText2Array(suggestion.newText!).map(
-                  (text, index) => (
-                    <Fragment key={index}>
-                      <div
-                        key={index}
-                        className="flex items-start gap-2 text-brand/80">
-                        <span className="text-sm">with:</span>
-                        <span className="text-sm">{text || 'line breaks'}</span>
-                      </div>
-                    </Fragment>
-                  )
-                )}
-
-                {suggestionText2Array(suggestion.text!).map((text, index) => (
-                  <Fragment key={index}>
-                    <div key={index} className="flex items-start gap-2">
-                      <span className="text-muted-foreground text-sm">
-                        {index === 0 ? 'Replace:' : 'Delete:'}
-                      </span>
-                      <span className="text-sm">{text || 'line breaks'}</span>
-                    </div>
-                  </Fragment>
-                ))}
-              </div>
-            )}
-
-            {suggestion.type === 'update' && (
-              <div className="flex items-center gap-2">
-                <span className="text-muted-foreground text-sm">
-                  {Object.keys(suggestion.properties).map(key => (
-                    <span key={key}>Un{key}</span>
-                  ))}
-
-                  {Object.keys(suggestion.newProperties).map(key => (
-                    <span key={key}>
-                      {key.charAt(0).toUpperCase() + key.slice(1)}
-                    </span>
-                  ))}
-                </span>
-                <span className="text-sm">{suggestion.newText}</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {suggestion.comments.map((comment, index) => (
-          <Comment
-            key={comment.id ?? index}
-            comment={comment}
-            discussionLength={suggestion.comments.length}
-            documentContent="__suggestion__"
-            editingId={editingId}
-            index={index}
-            setEditingId={setEditingId} />
-        ))}
-
-        {hovering && (
-          <div className="absolute top-4 right-4 flex gap-2">
-            <Button
-              variant="ghost"
-              className="size-6 p-1 text-muted-foreground"
-              onClick={() => accept(suggestion)}>
-              <CheckIcon className="size-4" />
-            </Button>
-
-            <Button
-              variant="ghost"
-              className="size-6 p-1 text-muted-foreground"
-              onClick={() => reject(suggestion)}>
-              <XIcon className="size-4" />
-            </Button>
-          </div>
-        )}
-
-        <CommentCreateForm discussionId={suggestion.suggestionId} />
-      </div>
-
-      {!isLast && <div className="h-px w-full bg-muted" />}
-    </div>
-  );
-}
-
-export const useResolveSuggestion = (
-  suggestionNodes: NodeEntry<TElement | TSuggestionText>[],
-  blockPath: Path
-) => {
-  const discussions = usePluginOption(discussionPlugin, 'discussions');
-
-  const {
-    api, editor, getOption, setOption
-  }
-    = useEditorPlugin(suggestionPlugin);
-
-  suggestionNodes.forEach(([node]) => {
-    const id = api.suggestion.nodeId(node);
-    const map = getOption('uniquePathMap');
-
-    if (!id) return;
-
-    const previousPath = map.get(id);
-
-    // If there are no suggestion nodes in the corresponding path in the map, then update it.
-    if (PathApi.isPath(previousPath)) {
-      const nodes = api.suggestion.node({ id, at: previousPath, isText: true });
-      const parentNode = api.node(previousPath);
-      let lineBreakId: string | null = null;
-
-      if (parentNode && ElementApi.isElement(parentNode[0])) {
-        lineBreakId = api.suggestion.nodeId(parentNode[0]) ?? null;
-      }
-
-      if (!nodes && lineBreakId !== id) {
-        setOption('uniquePathMap', new Map(map).set(id, blockPath));
-      }
-    } else {
-      setOption('uniquePathMap', new Map(map).set(id, blockPath));
-    }
-  });
-
-  const resolvedSuggestion: ResolvedSuggestion[] = useMemo(() => {
-    const map = getOption('uniquePathMap');
-
-    if (suggestionNodes.length === 0) return [];
-
-    const suggestionIds = new Set(
-      suggestionNodes
-        .flatMap(([node]) => {
-          if (TextApi.isText(node)) {
-            const dataList = api.suggestion.dataList(node);
-            const includeUpdate = dataList.some(
-              data => data.type === 'update'
-            );
-
-            if (!includeUpdate) {
-              return api.suggestion.nodeId(node) ?? [];
-            }
-
-            return dataList
-              .filter(data => data.type === 'update')
-              .map(d => d.id);
-          }
-          if (ElementApi.isElement(node)) {
-            return api.suggestion.nodeId(node) ?? [];
-          }
-
-          return [];
-        })
-        .filter(Boolean)
-    );
-
-    const res: ResolvedSuggestion[] = [];
-
-    suggestionIds.forEach((id) => {
-      if (!id) return;
-
-      const path = map.get(id);
-
-      if (!path || !PathApi.isPath(path)) return;
-      if (!PathApi.equals(path, blockPath)) return;
-
-      const entries = [
-        ...editor.api.nodes({
-          at: [],
-          mode: 'all',
-          match: (n: TElement | TSuggestionText) => (n[KEYS.suggestion] && n[getSuggestionKey(id)])
-            || api.suggestion.nodeId(n as TElement) === id
-        })
-      ] as NodeEntry<TElement | TSuggestionText>[];
-
-      // move line break to the end
-      entries.sort(([, path1], [, path2]) => PathApi.isChild(path1, path2) ? -1 : 1);
-
-      let newText = '';
-      let text = '';
-      let properties: any = {};
-      let newProperties: any = {};
-
-      // overlapping suggestion
-      entries.forEach(([node]) => {
-        if (TextApi.isText(node)) {
-          const dataList = api.suggestion.dataList(node);
-
-          dataList.forEach((data: {
-            id: string; type: string; properties?: Record<string, unknown>; newProperties?: Record<string, unknown>;
-          }) => {
-            if (data.id === id) {
-              switch (data.type) {
-                case 'insert': {
-                  newText += node.text;
-
-                  break;
-                }
-
-                case 'remove': {
-                  text += node.text;
-
-                  break;
-                }
-
-                case 'update': {
-                  properties = {
-                    ...properties,
-                    ...data.properties
-                  };
-
-                  newProperties = {
-                    ...newProperties,
-                    ...data.newProperties
-                  };
-
-                  newText += node.text;
-
-                  break;
-                }
-                // No default
-              }
-            }
-          });
-        } else {
-          const lineBreakData = api.suggestion.isBlockSuggestion(node) ? node.suggestion : undefined;
-
-          if (lineBreakData?.id === keyId2SuggestionId(id)) {
-            if (lineBreakData.type === 'insert') {
-              newText += lineBreakData.isLineBreak ? BLOCK_SUGGESTION : BLOCK_SUGGESTION + TYPE_TEXT_MAP[node.type](node);
-            } else if (lineBreakData.type === 'remove') {
-              text += lineBreakData.isLineBreak ? BLOCK_SUGGESTION : BLOCK_SUGGESTION + TYPE_TEXT_MAP[node.type](node);
-            }
-          }
-        }
-      });
-
-      if (entries.length === 0) return;
-
-      const nodeData = api.suggestion.suggestionData(entries[0][0]);
-
-      if (!nodeData) return;
-
-      // const comments = data?.discussions.find((d) => d.id === id)?.comments;
-      const comments
-        = discussions.find((s: TDiscussion) => s.id === id)?.comments || [];
-      const createdAt = new Date(nodeData.createdAt);
-
-      const keyId = getSuggestionKey(id);
-
-      if (nodeData.type === 'update') {
-        res.push({
-          comments,
-          createdAt,
-          keyId,
-          newProperties,
-          newText,
-          properties,
-          suggestionId: keyId2SuggestionId(id),
-          type: 'update',
-          userId: nodeData.userId
-        });
-      } else if (newText.length > 0 && text.length > 0) {
-        res.push({
-          comments,
-          createdAt,
-          keyId,
-          newText,
-          suggestionId: keyId2SuggestionId(id),
-          text,
-          type: 'replace',
-          userId: nodeData.userId
-        });
-      } else if (newText.length > 0) {
-        res.push({
-          comments,
-          createdAt,
-          keyId,
-          newText,
-          suggestionId: keyId2SuggestionId(id),
-          type: 'insert',
-          userId: nodeData.userId
-        });
-      } else if (text.length > 0) {
-        res.push({
-          comments,
-          createdAt,
-          keyId,
-          suggestionId: keyId2SuggestionId(id),
-          text,
-          type: 'remove',
-          userId: nodeData.userId
-        });
-      }
-    });
-
-    return res;
-  }, [
-    api.suggestion,
-    blockPath,
-    discussions,
-    editor.api,
-    getOption,
-    suggestionNodes
-  ]);
-
-  return resolvedSuggestion;
-};
-
-export const isResolvedSuggestion = (
-  suggestion: ResolvedSuggestion | TDiscussion
-): suggestion is ResolvedSuggestion => 'suggestionId' in suggestion;

package/src/internal/plate-editor/plate-ui/blockquote-node-static.tsx

@@ -1,10 +0,0 @@
-
-import { SlateElement, type SlateElementProps } from 'platejs/static';
-
-export function BlockquoteElementStatic(props: SlateElementProps) {
-  return (
-    <SlateElement as="blockquote" className="my-1 px-0.5 py-[3px]" {...props}>
-      <div className="border-primary border-l-[3px] px-4">{props.children}</div>
-    </SlateElement>
-  );
-}

package/src/internal/plate-editor/plate-ui/blockquote-node.tsx

@@ -1,11 +0,0 @@
-'use client';
-
-import { PlateElement, type PlateElementProps } from 'platejs/react';
-
-export function BlockquoteElement(props: PlateElementProps) {
-  return (
-    <PlateElement as="blockquote" className="my-1 px-0.5 py-[3px]" {...props}>
-      <div className="border-primary border-l-[3px] px-4">{props.children}</div>
-    </PlateElement>
-  );
-}

package/src/internal/plate-editor/plate-ui/button.tsx

@@ -1,201 +0,0 @@
-'use client';
-
-import { type ComponentProps, type FC, type ReactNode } from 'react';
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Slot } from 'radix-ui';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import { Spinner } from './spinner';
-import { withTooltip } from './tooltip';
-
-const SlotRoot = Slot.Root;
-
-export const buttonVariants = cva(
-  'focus-ring inline-flex w-fit cursor-pointer select-none items-center justify-center gap-2 rounded-md text-sm ring-offset-background transition-bg-ease disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    defaultVariants: {
-      size: 'default',
-      truncate: true,
-      variant: 'default'
-    },
-    variants: {
-      active: {
-        false: '',
-        true: 'border-2 border-primary'
-      },
-      disabled: {
-        true: 'pointer-events-none opacity-50'
-      },
-      focused: {
-        true: 'ring-2 ring-ring ring-offset-2'
-      },
-      isMenu: {
-        true: 'h-auto w-full cursor-pointer justify-start'
-      },
-      size: {
-        blockAction: 'size-[26px] gap-1 px-1.5 text-xs',
-        default: 'h-[28px] gap-1.5 px-2',
-        icon: 'size-[28px] w-[33px] [&_svg]:size-5',
-        iconSm: 'size-[28px]',
-        lg: 'h-11 px-4 text-lg',
-        md: 'h-8 px-3',
-        menuAction: 'size-6',
-        navAction: 'size-5',
-        none: '',
-        xs: 'h-[26px] px-1.5 py-1 text-xs'
-      },
-      truncate: {
-        true: 'truncate whitespace-nowrap'
-      },
-      variant: {
-        blockAction:
-          'rounded-sm hover:bg-primary/6 [&_svg]:text-muted-foreground',
-        blockActionSecondary:
-          'rounded-sm bg-primary/6 [&_svg]:text-muted-foreground',
-        brand:
-          'bg-brand font-medium text-white hover:bg-brand/80 active:bg-brand-active',
-        default:
-          'bg-primary font-medium text-primary-foreground hover:bg-primary/90 [&_svg]:text-primary-foreground',
-        destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90 [&_svg]:text-destructive-foreground',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        ghost2: 'text-muted-foreground hover:bg-accent',
-        ghost3: 'text-muted-foreground/80 hover:bg-accent',
-        ghostActive: 'bg-accent hover:bg-accent hover:text-accent-foreground',
-        menuAction: 'text-muted-foreground/80 hover:bg-primary/6',
-        nav: 'rounded-sm text-muted-foreground transition hover:bg-primary/4',
-        navAction:
-          'rounded-sm text-muted-foreground/80 opacity-0 transition hover:bg-primary/6 group-hover:opacity-100',
-        none: '',
-        outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        primaryOutline:
-          'border border-primary-foreground text-primary-foreground hover:bg-accent/15 [&_svg]:text-primary-foreground',
-        radio: 'border-2 border-input hover:border-primary',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80'
-      }
-    }
-  }
-);
-
-export type ButtonExtendedProps = {
-  active?: boolean;
-  asChild?: boolean;
-  icon?: ReactNode;
-  iconPlacement?: 'left' | 'right';
-  isPending?: boolean;
-  loading?: boolean;
-  loadingClassName?: string;
-  onToggleClick?: () => void;
-} & {
-  children?: ReactNode;
-  label?: string;
-} & VariantProps<typeof buttonVariants>;
-
-export type ButtonProps = ButtonExtendedProps & ComponentProps<'button'> & {
-  shortcut?: ReactNode;
-  tooltip?: ReactNode;
-  tooltipContentProps?: Record<string, unknown>;
-  tooltipProps?: Record<string, unknown>;
-  tooltipTriggerProps?: Record<string, unknown>;
-};
-
-export const Button = withTooltip(({
-  active,
-  asChild = false,
-  children,
-  className,
-  focused,
-  icon,
-  iconPlacement = 'left',
-  isMenu,
-  isPending: _isPending,
-  label,
-  loading,
-  loadingClassName,
-  size,
-  truncate,
-  variant,
-  onToggleClick: _onToggleClick,
-  ...props
-}: ButtonExtendedProps & ComponentProps<'button'>) => {
-  const Comp = asChild ? SlotRoot : 'button';
-
-  return (
-    <Comp
-      aria-label={label && label.length > 0 ? label : undefined}
-      className={cn(
-        buttonVariants({
-          disabled: props.disabled,
-          focused,
-          isMenu,
-          size,
-          truncate,
-          variant
-        }),
-        active && 'border-2 border-primary',
-        className
-      )}
-      type={Comp === 'button' ? 'button' : undefined}
-      {...props}>
-      {icon && iconPlacement === 'left' && icon}
-      {loading && <Spinner className={loadingClassName} />}
-      {children}
-      {icon && iconPlacement === 'right' && icon}
-    </Comp>
-  );
-}) as unknown as FC<ButtonProps>;
-
-export type LinkButtonProps = ButtonExtendedProps & ComponentProps<'a'> & {
-  shortcut?: ReactNode;
-  tooltip?: ReactNode;
-  tooltipContentProps?: Record<string, unknown>;
-  tooltipProps?: Record<string, unknown>;
-  tooltipTriggerProps?: Record<string, unknown>;
-};
-
-export const LinkButton = withTooltip(({
-  active,
-  children,
-  className,
-  focused,
-  icon,
-  iconPlacement = 'left',
-  isMenu,
-  label,
-  loading,
-  loadingClassName,
-  size,
-  truncate,
-  variant = 'ghost',
-  ...props
-}: ButtonExtendedProps & ComponentProps<'a'>) => {
-  return (
-    <a
-      aria-label={label && label.length > 0 ? label : undefined}
-      className={cn(
-        buttonVariants({
-          disabled: props.disabled,
-          focused,
-          isMenu,
-          size,
-          truncate,
-          variant
-        }),
-        active && 'border-2 border-primary',
-        className
-      )}
-      role="button"
-      {...props}>
-      {icon && iconPlacement === 'left' && (
-        <div className="shrink-0">{icon}</div>
-      )}
-      {loading && <Spinner className={loadingClassName} />}
-      {children}
-      {icon && iconPlacement === 'right' && icon}
-    </a>
-  );
-}) as unknown as FC<LinkButtonProps>;

package/src/internal/plate-editor/plate-ui/calendar.tsx

@@ -1,3 +0,0 @@
-'use client';
-
-export { Calendar } from '@docyrus/ui-pro-shared/calendar';