add ai-chat

src/components/a/button.tsx

@@ -4,7 +4,7 @@ export const IconButton: typeof UiButton = (props) => {
   return <UiButton variant='ghost' size='icon' {...props} className={cn('h-8 w-8 cursor-pointer', props?.className)} />;
 };
 
-export const Button: typeof UiButton = (props) => {
+export const Button = (props: Parameters<typeof UiButton>[0]) => {
   return <UiButton variant='ghost' {...props} className={cn('cursor-pointer', props?.className)} />;
 };
 

src/components/a/confirm.tsx

@@ -14,7 +14,7 @@ import { useEffect, useMemo, useState } from 'react';
 type useConfirmOptions = {
   confrimProps: ConfirmProps;
 };
-type Fn = () => void;
+type Fn = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 export const useConfirm = (opts?: useConfirmOptions) => {
   const [open, setOpen] = useState(false);
   type ConfirmOptions = {
@@ -78,19 +78,21 @@ export const Confirm = (props: ConfirmProps) => {
           {!props?.footer && (
             <>
               <AlertDialogCancel
+                className='cursor-pointer'
                 onClick={(e) => {
-                  props?.onCancle?.();
+                  props?.onCancle?.(e);
                   e.stopPropagation();
                 }}>
                 {props?.onCancelText ?? '取消'}
               </AlertDialogCancel>
               <AlertDialogAction
+                className='cursor-pointer'
                 onClick={(e) => {
-                  props?.onOk?.();
+                  props?.onOk?.(e);
                   e.stopPropagation();
                 }}>
                 {props?.onOkText ?? '确定'}
-              </AlertDialogAction>{' '}
+              </AlertDialogAction>
             </>
           )}
         </AlertDialogFooter>

src/components/a/divider.tsx

@@ -0,0 +1,21 @@
+export const Divider = (props: { orientation?: 'horizontal' | 'vertical' }) => {
+  const { orientation = 'horizontal' } = props;
+
+  const dividerStyle: React.CSSProperties = {
+    display: 'block',
+    backgroundColor: '#e5e7eb', // 淡灰色分割线
+    ...(orientation === 'horizontal'
+      ? {
+          width: '100%',
+          height: '1px',
+        }
+      : {
+          alignSelf: 'stretch',
+          width: '1px',
+          display: 'inline-block',
+          margin: '2px 4px',
+        }),
+  };
+
+  return <div style={dividerStyle} role='separator' aria-orientation={orientation} />;
+};

src/components/a/drag-modal/index.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useRef, useState } from 'react';
+import Draggable from 'react-draggable';
+import { cn as clsxMerge } from '@/lib/utils';
+import { Resizable } from 're-resizable';
+import { X } from 'lucide-react';
+
+type DragModalProps = {
+  title?: React.ReactNode;
+  content?: React.ReactNode;
+  onClose?: () => void;
+  containerClassName?: string;
+  handleClassName?: string;
+  contentClassName?: string;
+  focus?: boolean;
+  /**
+   * 默认大小, 单位为px
+   * width: defaultSize.width || 320
+   * height: defaultSize.height || 400
+   */
+  defaultSize?: {
+    width: number;
+    height: number;
+  };
+  style?: React.CSSProperties;
+};
+export const DragModal = (props: DragModalProps) => {
+  const dragRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <Draggable
+      nodeRef={dragRef as any}
+      onStop={(e, data) => {
+        // console.log(e, data);
+      }}
+      handle='.handle'
+      grid={[1, 1]}
+      scale={1}
+      bounds='parent'
+      defaultPosition={{
+        x: 0,
+        y: 0,
+      }}>
+      <div
+        className={clsxMerge('absolute top-0 left-0 bg-white rounded-md border border-gray-200 shadow-sm', props.focus ? 'z-30' : '', props.containerClassName)}
+        ref={dragRef}
+        style={props.style}>
+        <div className={clsxMerge('handle cursor-move border-b border-gray-200 py-2 px-4', props.handleClassName)}>{props.title || 'Move'}</div>
+        <Resizable
+          className={clsxMerge('', props.contentClassName)}
+          defaultSize={{
+            width: props.defaultSize?.width || 600,
+            height: props.defaultSize?.height || 400,
+          }}
+          onResizeStop={(e, direction, ref, d) => {
+            // console.log(e, direction, ref, d);
+          }}
+          enable={{
+            bottom: true,
+            right: true,
+            bottomRight: true,
+          }}>
+          {props.content}
+        </Resizable>
+      </div>
+    </Draggable>
+  );
+};
+
+type DragModalTitleProps = {
+  title?: React.ReactNode;
+  className?: string;
+  onClose?: () => void;
+  children?: React.ReactNode;
+  onClick?: () => void;
+};
+export const DragModalTitle = (props: DragModalTitleProps) => {
+  return (
+    <div
+      className={clsxMerge('flex flex-row items-center justify-between', props.className)}
+      onClick={(e) => {
+        e.stopPropagation();
+        props.onClick?.();
+      }}>
+      <div className='text-sm font-medium text-gray-700'>
+        {props.title}
+        {props.children}
+      </div>
+      <div
+        className='text-gray-500 cursor-pointer p-2 hover:bg-gray-100 rounded-md'
+        onClick={(e) => {
+          e.stopPropagation();
+          props.onClose?.();
+        }}>
+        <X className='w-4 h-4 ' />
+      </div>
+    </div>
+  );
+};
+
+export const getComputedHeight = () => {
+  const height = window.innerHeight;
+  const width = window.innerWidth;
+  return { height, width };
+};
+
+export const useComputedHeight = () => {
+  const [computedHeight, setComputedHeight] = useState({
+    height: 0,
+    width: 0,
+  });
+  useEffect(() => {
+    const height = window.innerHeight;
+    const width = window.innerWidth;
+    setComputedHeight({ height, width });
+  }, []);
+  return computedHeight;
+};

src/components/a/input.tsx

@@ -0,0 +1,6 @@
+import { Input as UIInput } from '@/components/ui/input';
+
+export type InputProps = { label?: string } & React.ComponentProps<'input'>;
+export const Input = (props: InputProps) => {
+  return <UIInput {...props} />;
+};

src/components/a/select.tsx

@@ -5,10 +5,12 @@ type Option = {
   label?: string;
 };
 type SelectProps = {
+  className?: string;
   options?: Option[];
   value?: string;
   placeholder?: string;
-  onChange?: (value: string) => any;
+  onChange?: (value: any) => any;
+  size?: 'small' | 'medium' | 'large';
 };
 export const Select = (props: SelectProps) => {
   const options = props.options || [];

src/components/a/tooltip.tsx

@@ -1,6 +1,7 @@
 import { Tooltip as UITooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import React from 'react';
 
-export const Tooltip = (props: { children?: React.ReactNode; title?: string }) => {
+export const Tooltip = (props: { children?: React.ReactNode; title?: React.ReactNode }) => {
   return (
     <TooltipProvider>
       <UITooltip>

src/components/ai/RenderMarkdown.tsx

@@ -0,0 +1,115 @@
+import { throttle } from 'lodash-es';
+import { Marked } from 'marked';
+import 'highlight.js/styles/github.css'; // 你可以选择其他样式
+import { useRef, useEffect } from 'react';
+
+import { markedHighlight } from 'marked-highlight';
+import hljs from 'highlight.js';
+import clsx from 'clsx';
+
+const marked = new Marked(
+  markedHighlight({
+    emptyLangClass: 'hljs',
+    langPrefix: 'hljs language-',
+    highlight(code, lang, info) {
+      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+      return hljs.highlight(code, { language }).value;
+    },
+  }),
+);
+
+type ResponseTextProps = {
+  response: Response;
+  onFinish?: (text: string) => void;
+  onChange?: (text: string) => void;
+  className?: string;
+  id?: string;
+};
+export const ResponseText = (props: ResponseTextProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const render = async () => {
+    const response = props.response;
+    if (!response) return;
+    const msg = ref.current!;
+    if (!msg) {
+      console.log('msg is null');
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    const reader = response.body?.getReader();
+    const decoder = new TextDecoder('utf-8');
+    let done = false;
+
+    while (!done) {
+      const { value, done: streamDone } = await reader!.read();
+      done = streamDone;
+
+      if (value) {
+        const chunk = decoder.decode(value, { stream: true });
+        // 更新状态，实时刷新 UI
+        msg.innerHTML += chunk;
+      }
+    }
+    if (done) {
+      props.onFinish && props.onFinish(msg.innerHTML);
+    }
+  };
+  useEffect(() => {
+    render();
+  }, []);
+  return <div id={props.id} className={clsx('response markdown-body', props.className)} ref={ref}></div>;
+};
+
+export const ResponseMarkdown = (props: ResponseTextProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  let content = '';
+  const render = async () => {
+    const response = props.response;
+    if (!response) return;
+    const msg = ref.current!;
+    if (!msg) {
+      console.log('msg is null');
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    const reader = response.body?.getReader();
+    const decoder = new TextDecoder('utf-8');
+    let done = false;
+
+    while (!done) {
+      const { value, done: streamDone } = await reader!.read();
+      done = streamDone;
+
+      if (value) {
+        const chunk = decoder.decode(value, { stream: true });
+        content = content + chunk;
+        renderThrottle(content);
+      }
+    }
+    if (done) {
+      props.onFinish && props.onFinish(msg.innerHTML);
+    }
+  };
+  const renderThrottle = throttle(async (markdown: string) => {
+    const msg = ref.current!;
+    msg.innerHTML = await marked.parse(markdown);
+    props.onChange?.(msg.innerHTML);
+  }, 100);
+  useEffect(() => {
+    render();
+  }, [props.response]);
+  return <div id={props.id} className={clsx('response markdown-body', props.className)} ref={ref}></div>;
+};
+
+export const Markdown = (props: { className?: string; markdown: string; id?: string }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const parse = async () => {
+    const md = await marked.parse(props.markdown);
+    const msg = ref.current!;
+    msg.innerHTML = md;
+  };
+  useEffect(() => {
+    parse();
+  }, []);
+  return <div id={props.id} ref={ref} className={clsx('markdown-body', props.className)}></div>;
+};

src/components/html/blank.astro

@@ -6,6 +6,16 @@
   <head>
     <meta charset='UTF-8' />
     <title>AI Pages</title>
+    <style>
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+    </style>
   </head>
   <body>
     <slot />