postiz/apps/frontend/src/components/launches/editor.tsx

67 lines
2.0 KiB
TypeScript

import { forwardRef, useCallback, useRef } from 'react';
import type { MDEditorProps } from '@uiw/react-md-editor/src/Types';
import { RefMDEditor } from '@uiw/react-md-editor/src/Editor';
import MDEditor from '@uiw/react-md-editor';
import { useCopilotAction, useCopilotReadable } from '@copilotkit/react-core';
import dayjs from 'dayjs';
import { CopilotTextarea } from '@copilotkit/react-textarea';
import clsx from 'clsx';
import { useUser } from '@gitroom/frontend/components/layout/user.context';
export const Editor = forwardRef<
RefMDEditor,
MDEditorProps & { order: number; currentWatching: string; isGlobal: boolean }
>(
(
props: MDEditorProps & {
order: number;
currentWatching: string;
isGlobal: boolean;
},
ref: React.ForwardedRef<RefMDEditor>
) => {
const user = useUser();
useCopilotReadable({
description: 'Content of the post number ' + (props.order + 1),
value: props.content,
});
useCopilotAction({
name: 'editPost_' + props.order,
description: `Edit the content of post number ${props.order + 1}`,
parameters: [
{
name: 'content',
type: 'string',
},
],
handler: async ({ content }) => {
console.log('editPost_' + props.order, content, dayjs().unix());
props?.onChange?.(content);
},
});
return (
<div className="relative bg-customColor2">
{user?.tier?.ai ? (
<CopilotTextarea
disableBranding={true}
className={clsx(
'!min-h-40 !max-h-80 p-2 overflow-hidden bg-customColor2 outline-none'
)}
value={props.value}
onChange={(e) => props?.onChange?.(e.target.value)}
placeholder="Write your reply..."
autosuggestionsConfig={{
textareaPurpose: `Assist me in writing social media posts.`,
chatApiConfigs: {},
}}
/>
) : (
<MDEditor {...props} ref={ref} />
)}
</div>
);
}
);