-
-
-
- Get started by editing{" "}
-
- src/app/page.tsx -- . -
- - - Save and see your changes instantly. - -
-
-
-
-
- );
+ return (
+ <>
+
+
+ );
}
diff --git a/src/app/private/page.tsx b/src/app/private/page.tsx
new file mode 100644
index 0000000..efa2f53
--- /dev/null
+++ b/src/app/private/page.tsx
@@ -0,0 +1,14 @@
+import { redirect } from 'next/navigation';
+
+import { createClient } from '@/utils/supabase/server';
+
+export default async function PrivatePage() {
+ const supabase = await createClient();
+
+ const { data, error } = await supabase.auth.getUser();
+ if (error || !data?.user) {
+ redirect('/login');
+ }
+
+ return redirect('/');
+}
diff --git a/src/components/app-unavailable.tsx b/src/components/app-unavailable.tsx
new file mode 100644
index 0000000..c5fb6ef
--- /dev/null
+++ b/src/components/app-unavailable.tsx
@@ -0,0 +1,31 @@
+'use client';
+import type { FC } from 'react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+type IAppUnavailableProps = {
+ isUnknownReason: boolean;
+ errMessage?: string;
+};
+
+const AppUnavailable: FC
+
+ );
+};
+export default React.memo(AppUnavailable);
diff --git a/src/components/base/action-button/index.css b/src/components/base/action-button/index.css
new file mode 100644
index 0000000..6e7355b
--- /dev/null
+++ b/src/components/base/action-button/index.css
@@ -0,0 +1,44 @@
+@tailwind utilities;
+
+@layer components {
+ .action-btn {
+ @apply inline-flex justify-center items-center cursor-pointer text-text-tertiary hover:text-text-secondary hover:bg-state-base-hover;
+ }
+
+ .action-btn-hover {
+ @apply bg-state-base-hover;
+ }
+
+ .action-btn-disabled {
+ @apply cursor-not-allowed;
+ }
+
+ .action-btn-xl {
+ @apply p-2 w-9 h-9 rounded-lg;
+ }
+
+ .action-btn-l {
+ @apply p-1.5 w-8 h-8 rounded-lg;
+ }
+
+ /* m is for the regular button */
+ .action-btn-m {
+ @apply p-0.5 w-6 h-6 rounded-lg;
+ }
+
+ .action-btn-xs {
+ @apply p-0 w-4 h-4 rounded;
+ }
+
+ .action-btn.action-btn-active {
+ @apply text-text-accent bg-state-accent-active hover:bg-state-accent-active-alt;
+ }
+
+ .action-btn.action-btn-disabled {
+ @apply text-text-disabled;
+ }
+
+ .action-btn.action-btn-destructive {
+ @apply text-text-destructive bg-state-destructive-hover;
+ }
+}
diff --git a/src/components/base/action-button/index.tsx b/src/components/base/action-button/index.tsx
new file mode 100644
index 0000000..32d07b2
--- /dev/null
+++ b/src/components/base/action-button/index.tsx
@@ -0,0 +1,68 @@
+import type { CSSProperties } from 'react';
+import React from 'react';
+import { type VariantProps, cva } from 'class-variance-authority';
+import classNames from '@/utils/classnames';
+
+enum ActionButtonState {
+ Destructive = 'destructive',
+ Active = 'active',
+ Disabled = 'disabled',
+ Default = '',
+ Hover = 'hover'
+}
+
+const actionButtonVariants = cva('action-btn', {
+ variants: {
+ size: {
+ xs: 'action-btn-xs',
+ m: 'action-btn-m',
+ l: 'action-btn-l',
+ xl: 'action-btn-xl'
+ }
+ },
+ defaultVariants: {
+ size: 'm'
+ }
+});
+
+export type ActionButtonProps = {
+ size?: 'xs' | 's' | 'm' | 'l' | 'xl';
+ state?: ActionButtonState;
+ styleCss?: CSSProperties;
+} & React.ButtonHTMLAttributes+ {errMessage || isUnknownReason ? 500 : 404} +
+{message}
+
+
+ );
+ }
+);
+
+export default AutoHeightTextarea;
diff --git a/src/components/base/button/index.tsx b/src/components/base/button/index.tsx
new file mode 100644
index 0000000..d2403f7
--- /dev/null
+++ b/src/components/base/button/index.tsx
@@ -0,0 +1,49 @@
+import type { FC, MouseEventHandler } from 'react';
+import React from 'react';
+import Spinner from '@/components/base/spinner';
+
+export type IButtonProps = {
+ type?: string;
+ className?: string;
+ disabled?: boolean;
+ loading?: boolean;
+ children: React.ReactNode;
+ onClick?: MouseEventHandler
+ {!value ? placeholder : value.replace(/\n$/, '\n ')}
+
+
+
+ {children}
+ {/* Spinner is hidden when loading is false */}
+
+ );
+};
+
+export default React.memo(Button);
diff --git a/src/components/base/file-uploader-in-attachment/constants.ts b/src/components/base/file-uploader-in-attachment/constants.ts
new file mode 100644
index 0000000..281f019
--- /dev/null
+++ b/src/components/base/file-uploader-in-attachment/constants.ts
@@ -0,0 +1,34 @@
+import { SupportUploadFileTypes } from './types';
+// fallback for file size limit of dify_config
+export const IMG_SIZE_LIMIT = 10 * 1024 * 1024;
+export const FILE_SIZE_LIMIT = 15 * 1024 * 1024;
+export const AUDIO_SIZE_LIMIT = 50 * 1024 * 1024;
+export const VIDEO_SIZE_LIMIT = 100 * 1024 * 1024;
+export const MAX_FILE_UPLOAD_LIMIT = 10;
+
+export const FILE_URL_REGEX = /^(https?|ftp):\/\//;
+
+export const FILE_EXTS: Record
+ {showFromLink && (
+ <>
+
+
+ {
+ setShowError(false);
+ setUrl(e.target.value.trim());
+ }}
+ disabled={disabled}
+ />
+
+
+ {showError && (
+
+ {t('common.fileUploader.pasteFileLinkInvalid')}
+
+ )}
+
+ )}
+ {showFromLink && showFromLocal && (
+
+
+ OR
+
+
+ )}
+ {showFromLocal && (
+
+ )}
+
+ 
+
+ );
+};
+
+export default FileImageRender;
diff --git a/src/components/base/file-uploader-in-attachment/file-input.tsx b/src/components/base/file-uploader-in-attachment/file-input.tsx
new file mode 100644
index 0000000..e77dd72
--- /dev/null
+++ b/src/components/base/file-uploader-in-attachment/file-input.tsx
@@ -0,0 +1,47 @@
+import { useFile } from './hooks';
+import { useStore } from './store';
+import type { FileUpload } from './types';
+import { FILE_EXTS } from './constants';
+import { SupportUploadFileTypes } from './types';
+
+type FileInputProps = {
+ fileConfig: FileUpload;
+};
+const FileInput = ({ fileConfig }: FileInputProps) => {
+ const files = useStore((s) => s.files);
+ const { handleLocalFileUpload } = useFile(fileConfig);
+ const handleChange = (e: React.ChangeEvent
+
+ {imagePreviewUrl && canPreview && (
+
+ {isImageFile &&
+
+
+
+
+ {name}
+
+ {ext && {ext.toLowerCase()}}
+ {ext && •}
+ {!!file.size && {formatFileSize(file.size)}}
+
+
+ {progress >= 0 && !fileIsUploaded(file) && (
+ onReUpload?.(id)}>
+
+ )}
+ {showDeleteAction && (
+ onRemove?.(id)}>
+
+ )}
+ {canPreview && isImageFile && (
+ setImagePreviewUrl(url || '')}>
+
+ )}
+ {showDownloadAction && (
+ {
+ e.stopPropagation();
+ downloadFile(url || base64Url || '', name);
+ }}
+ >
+
+ )}
+
+
+
+ );
+};
+
+type FileUploaderInAttachmentWrapperProps = {
+ value?: FileEntity[];
+ onChange: (files: FileEntity[]) => void;
+ fileConfig: FileUpload;
+};
+const FileUploaderInAttachmentWrapper = ({ value, onChange, fileConfig }: FileUploaderInAttachmentWrapperProps) => {
+ return (
+ {options.map(renderOption)}
+
+ {files.map((file) => (
+ handleRemoveFile(file.id)}
+ onReUpload={() => handleReUploadFile(file.id)}
+ />
+ ))}
+
+
+ {/* TODO: support preview */}
+ {srcs.map((src, index) => (
+ 
setImagePreviewUrl(src)}
+ />
+ ))}
+ {imagePreviewUrl && setImagePreviewUrl('')} />}
+
+ );
+};
+
+export default React.memo(ImageGallery);
+
+export const ImageGalleryTest = () => {
+ const imgGallerySrcs = (() => {
+ const srcs = [];
+ for (let i = 0; i < 6; i++)
+ // srcs.push('https://placekitten.com/640/360')
+ // srcs.push('https://placekitten.com/360/640')
+ srcs.push('https://placekitten.com/360/360');
+
+ return srcs;
+ })();
+ return (
+
+ {imgGallerySrcs.map((_, index) => (
+
+ );
+};
diff --git a/src/components/base/image-gallery/style.module.css b/src/components/base/image-gallery/style.module.css
new file mode 100644
index 0000000..e66c666
--- /dev/null
+++ b/src/components/base/image-gallery/style.module.css
@@ -0,0 +1,22 @@
+.item {
+ height: 200px;
+ margin-right: 8px;
+ margin-bottom: 8px;
+ object-fit: cover;
+ object-position: center;
+ border-radius: 8px;
+ cursor: pointer;
+}
+
+.item:nth-child(3n) {
+ margin-right: 0;
+}
+
+.img-2 .item:nth-child(2n),
+.img-4 .item:nth-child(2n) {
+ margin-right: 0;
+}
+
+.img-4 .item:nth-child(3n) {
+ margin-right: 8px;
+}
diff --git a/src/components/base/image-uploader/chat-image-uploader.tsx b/src/components/base/image-uploader/chat-image-uploader.tsx
new file mode 100644
index 0000000..724e3d9
--- /dev/null
+++ b/src/components/base/image-uploader/chat-image-uploader.tsx
@@ -0,0 +1,183 @@
+import type { FC } from 'react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Uploader from './uploader';
+import ImageLinkInput from './image-link-input';
+import ImagePlus from '@/components/base/icons/line/image-plus';
+import { TransferMethod } from '@/types/app';
+import {
+ PortalToFollowElem,
+ PortalToFollowElemContent,
+ PortalToFollowElemTrigger
+} from '@/components/base/portal-to-follow-elem';
+import Upload03 from '@/components/base/icons/line/upload-03';
+import type { ImageFile, VisionSettings } from '@/types/app';
+
+type UploadOnlyFromLocalProps = {
+ onUpload: (imageFile: ImageFile) => void;
+ disabled?: boolean;
+ limit?: number;
+};
+const UploadOnlyFromLocal: FC
+
+ ))}
+
+
+ )}
+
+
+
+
+ {(hovering) => (
+
+
+ )}
+
+
+
+ OR
+
+
+
+
+ )}
+
+ setImageLink(e.target.value)}
+ placeholder={t('common.imageUploader.pasteImageLinkInputPlaceholder') || ''}
+ />
+
+
+ );
+};
+
+export default ImageLinkInput;
diff --git a/src/components/base/image-uploader/image-list.tsx b/src/components/base/image-uploader/image-list.tsx
new file mode 100644
index 0000000..d8e94ba
--- /dev/null
+++ b/src/components/base/image-uploader/image-list.tsx
@@ -0,0 +1,172 @@
+import type { FC } from 'react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Loading02 from '@/components/base/icons/line/loading-02';
+import XClose from '@/components/base/icons/line/x-close';
+import RefreshCcw01 from '@/components/base/icons/line/refresh-ccw-01';
+import AlertTriangle from '@/components/base/icons/solid/alert-triangle';
+import TooltipPlus from '@/components/base/tooltip-plus';
+import type { ImageFile } from '@/types/app';
+import { TransferMethod } from '@/types/app';
+import ImagePreview from '@/components/base/image-uploader/image-preview';
+
+type ImageListProps = {
+ list: ImageFile[];
+ readonly?: boolean;
+ onRemove?: (imageFileId: string) => void;
+ onReUpload?: (imageFileId: string) => void;
+ onImageLinkLoadSuccess?: (imageFileId: string) => void;
+ onImageLinkLoadError?: (imageFileId: string) => void;
+};
+
+const ImageList: FC
+ {list.map((item) => (
+ setImagePreviewUrl('')} />}
+
+ );
+};
+
+export default ImageList;
diff --git a/src/components/base/image-uploader/image-preview.tsx b/src/components/base/image-uploader/image-preview.tsx
new file mode 100644
index 0000000..c646894
--- /dev/null
+++ b/src/components/base/image-uploader/image-preview.tsx
@@ -0,0 +1,27 @@
+import type { FC } from 'react';
+import { createPortal } from 'react-dom';
+import XClose from '@/components/base/icons/line/x-close';
+
+type ImagePreviewProps = {
+ url: string;
+ onCancel: () => void;
+};
+const ImagePreview: FC
+ {item.type === TransferMethod.local_file && item.progress !== 100 && (
+ <>
+ ![]()
handleImageLinkLoadSuccess(item)}
+ onError={() => handleImageLinkLoadError(item)}
+ src={item.type === TransferMethod.remote_url ? item.url : item.base64Url}
+ onClick={() =>
+ item.progress === 100 &&
+ setImagePreviewUrl(
+ (item.type === TransferMethod.remote_url ? item.url : item.base64Url) as string
+ )
+ }
+ />
+ {!readonly && (
+
+ ))}
+ {imagePreviewUrl && -1 ? `${item.progress}%` : 0
+ }}
+ >
+ {item.progress === -1 && (
+ onReUpload && onReUpload(item._id)}
+ />
+ )}
+
+ {item.progress > -1 && (
+
+ {item.progress}%
+
+ )}
+
+ )}
+ {item.type === TransferMethod.remote_url && item.progress !== 100 && (
+
+ {item.progress > -1 && (
+
+
+ )}
+
+ )}
+ onRemove && onRemove(item._id)}
+ >
+
+ )}
+ e.stopPropagation()}
+ >
+ 
+
,
+ document.body
+ );
+};
+
+export default ImagePreview;
diff --git a/src/components/base/image-uploader/uploader.tsx b/src/components/base/image-uploader/uploader.tsx
new file mode 100644
index 0000000..cbacd0a
--- /dev/null
+++ b/src/components/base/image-uploader/uploader.tsx
@@ -0,0 +1,111 @@
+'use client';
+
+import type { ChangeEvent, FC } from 'react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { imageUpload } from './utils';
+import type { ImageFile } from '@/types/app';
+import { TransferMethod } from '@/types/app';
+import Toast from '@/components/base/toast';
+
+type UploaderProps = {
+ children: (hovering: boolean) => JSX.Element;
+ onUpload: (imageFile: ImageFile) => void;
+ limit?: number;
+ disabled?: boolean;
+};
+
+const Uploader: FC
+
+ setHovering(true)}
+ onMouseLeave={() => setHovering(false)}
+ >
+ {children(hovering)}
+ ((e.target as HTMLInputElement).value = '')}
+ type="file"
+ accept=".png, .jpg, .jpeg, .webp, .gif"
+ onChange={handleChange}
+ disabled={disabled}
+ />
+
+ );
+};
+
+export default Uploader;
diff --git a/src/components/base/image-uploader/utils.ts b/src/components/base/image-uploader/utils.ts
new file mode 100644
index 0000000..22e506a
--- /dev/null
+++ b/src/components/base/image-uploader/utils.ts
@@ -0,0 +1,33 @@
+'use client';
+
+import { upload } from '@/service/base';
+
+type ImageUploadParams = {
+ file: File;
+ onProgressCallback: (progress: number) => void;
+ onSuccessCallback: (res: { id: string }) => void;
+ onErrorCallback: () => void;
+};
+type ImageUpload = (v: ImageUploadParams) => void;
+export const imageUpload: ImageUpload = ({ file, onProgressCallback, onSuccessCallback, onErrorCallback }) => {
+ const formData = new FormData();
+ formData.append('file', file);
+ const onProgress = (e: ProgressEvent) => {
+ if (e.lengthComputable) {
+ const percent = Math.floor((e.loaded / e.total) * 100);
+ onProgressCallback(percent);
+ }
+ };
+
+ upload({
+ xhr: new XMLHttpRequest(),
+ data: formData,
+ onprogress: onProgress
+ })
+ .then((res: { id: string }) => {
+ onSuccessCallback(res);
+ })
+ .catch(() => {
+ onErrorCallback();
+ });
+};
diff --git a/src/components/base/loading/index.tsx b/src/components/base/loading/index.tsx
new file mode 100644
index 0000000..75d76e7
--- /dev/null
+++ b/src/components/base/loading/index.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import './style.css';
+
+type ILoadingProps = {
+ type?: 'area' | 'app';
+};
+const Loading = ({ type = 'area' }: ILoadingProps = { type: 'area' }) => {
+ return (
+
+
+
+ );
+};
+
+export default Loading;
diff --git a/src/components/base/loading/style.css b/src/components/base/loading/style.css
new file mode 100644
index 0000000..b5a5ef9
--- /dev/null
+++ b/src/components/base/loading/style.css
@@ -0,0 +1,41 @@
+.spin-animation path {
+ animation: custom 2s linear infinite;
+}
+
+@keyframes custom {
+ 0% {
+ opacity: 0;
+ }
+
+ 25% {
+ opacity: 0.1;
+ }
+
+ 50% {
+ opacity: 0.2;
+ }
+
+ 75% {
+ opacity: 0.5;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+.spin-animation path:nth-child(1) {
+ animation-delay: 0s;
+}
+
+.spin-animation path:nth-child(2) {
+ animation-delay: 0.5s;
+}
+
+.spin-animation path:nth-child(3) {
+ animation-delay: 1s;
+}
+
+.spin-animation path:nth-child(4) {
+ animation-delay: 1.5s;
+}
diff --git a/src/components/base/markdown.tsx b/src/components/base/markdown.tsx
new file mode 100644
index 0000000..c2c0bd0
--- /dev/null
+++ b/src/components/base/markdown.tsx
@@ -0,0 +1,41 @@
+import ReactMarkdown from 'react-markdown';
+import 'katex/dist/katex.min.css';
+import RemarkMath from 'remark-math';
+import RemarkBreaks from 'remark-breaks';
+import RehypeKatex from 'rehype-katex';
+import RemarkGfm from 'remark-gfm';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { atelierHeathLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+
+export function Markdown(props: { content: string }) {
+ return (
+
+
+ );
+}
diff --git a/src/components/base/portal-to-follow-elem/index.tsx b/src/components/base/portal-to-follow-elem/index.tsx
new file mode 100644
index 0000000..167b2dc
--- /dev/null
+++ b/src/components/base/portal-to-follow-elem/index.tsx
@@ -0,0 +1,160 @@
+'use client';
+import React from 'react';
+import {
+ FloatingPortal,
+ autoUpdate,
+ flip,
+ offset,
+ shift,
+ useDismiss,
+ useFloating,
+ useFocus,
+ useHover,
+ useInteractions,
+ useMergeRefs,
+ useRole
+} from '@floating-ui/react';
+
+import type { OffsetOptions, Placement } from '@floating-ui/react';
+
+type PortalToFollowElemOptions = {
+ /*
+ * top, bottom, left, right
+ * start, end. Default is middle
+ * combine: top-start, top-end
+ */
+ placement?: Placement;
+ open?: boolean;
+ offset?: number | OffsetOptions;
+ onOpenChange?: (open: boolean) => void;
+};
+
+export function usePortalToFollowElem({
+ placement = 'bottom',
+ open,
+ offset: offsetValue = 0,
+ onOpenChange: setControlledOpen
+}: PortalToFollowElemOptions = {}) {
+ const setOpen = setControlledOpen;
+
+ const data = useFloating({
+ placement,
+ open,
+ onOpenChange: setOpen,
+ whileElementsMounted: autoUpdate,
+ middleware: [
+ offset(offsetValue),
+ flip({
+ crossAxis: placement.includes('-'),
+ fallbackAxisSideDirection: 'start',
+ padding: 5
+ }),
+ shift({ padding: 5 })
+ ]
+ });
+
+ const context = data.context;
+
+ const hover = useHover(context, {
+ move: false,
+ enabled: open == null
+ });
+ const focus = useFocus(context, {
+ enabled: open == null
+ });
+ const dismiss = useDismiss(context);
+ const role = useRole(context, { role: 'tooltip' });
+
+ const interactions = useInteractions([hover, focus, dismiss, role]);
+
+ return React.useMemo(
+ () => ({
+ open,
+ setOpen,
+ ...interactions,
+ ...data
+ }),
+ [open, setOpen, interactions, data]
+ );
+}
+
+type ContextType = ReturnType
+ {children}
+
+ );
+ }
+ }}
+ linkTarget={'_blank'}
+ >
+ {props.content}
+
+
+ {children}
+
+ );
+});
+PortalToFollowElemTrigger.displayName = 'PortalToFollowElemTrigger';
+
+export const PortalToFollowElemContent = React.forwardRef
+
+ );
+};
+
+export default ProgressBar;
diff --git a/src/components/base/progress-bar/progress-circle.tsx b/src/components/base/progress-bar/progress-circle.tsx
new file mode 100644
index 0000000..91bed7d
--- /dev/null
+++ b/src/components/base/progress-bar/progress-circle.tsx
@@ -0,0 +1,61 @@
+import { memo } from 'react';
+import cn from '@/utils/classnames';
+
+type ProgressCircleProps = {
+ className?: string;
+ percentage?: number;
+ size?: number;
+ circleStrokeWidth?: number;
+ circleStrokeColor?: string;
+ circleFillColor?: string;
+ sectorFillColor?: string;
+};
+
+const ProgressCircle: React.FC
+
+
+ {percent}%
+
+
+ {filteredItems.map((item: Item) => (
+
+ classNames(
+ 'relative cursor-default select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700',
+ active ? 'bg-gray-100' : ''
+ )
+ }
+ >
+ {({ /* active, */ selected }) => (
+ <>
+
+ {item.name}
+
+ {selected && (
+
+
+
+ )}
+
+ )}
+
+ ))}
+
+ )}
+
+
+ {allowSearch ? (
+ {
+ if (!disabled) setQuery(event.target.value);
+ }}
+ displayValue={(item: Item) => item?.name}
+ />
+ ) : (
+ {
+ if (!disabled) setOpen(!open);
+ }}
+ className={`flex items-center h-9 w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200`}
+ >
+ {selectedItem?.name}
+
+ )}
+ {
+ if (!disabled) setOpen(!open);
+ }}
+ >
+ {open ?
+
+
+ {filteredItems.length > 0 && (
+
+
+ {selectedItem?.name}
+
+
+
+
+
+
+ {items.map((item: Item) => (
+
+ `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${
+ active ? 'bg-gray-100' : ''
+ }`
+ }
+ value={item}
+ disabled={disabled}
+ >
+ {({ /* active, */ selected }) => (
+ <>
+
+ {item.name}
+
+ {selected && (
+
+
+
+ )}
+
+ )}
+
+ ))}
+
+
+
+
+
+ Loading...
+
+ {children}
+
+ );
+};
+
+export default Spinner;
diff --git a/src/components/base/toast/index.tsx b/src/components/base/toast/index.tsx
new file mode 100644
index 0000000..4c6bc82
--- /dev/null
+++ b/src/components/base/toast/index.tsx
@@ -0,0 +1,131 @@
+'use client';
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+import React, { useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import {
+ CheckCircleIcon,
+ ExclamationTriangleIcon,
+ InformationCircleIcon,
+ XCircleIcon
+} from '@heroicons/react/20/solid';
+import { createContext, useContext } from 'use-context-selector';
+
+export type IToastProps = {
+ type?: 'success' | 'error' | 'warning' | 'info';
+ duration?: number;
+ message: string;
+ children?: ReactNode;
+ onClose?: () => void;
+};
+type IToastContext = {
+ notify: (props: IToastProps) => void;
+};
+const defaultDuring = 3000;
+
+export const ToastContext = createContext
+
+ );
+};
+
+export const ToastProvider = ({ children }: { children: ReactNode }) => {
+ const placeholder: IToastProps = {
+ type: 'info',
+ message: 'Toast message',
+ duration: 3000
+ };
+ const [params, setParams] = React.useState
+
+
+ {type === 'success' && }
+ {type === 'error' && }
+ {type === 'warning' && (
+
+ )}
+ {type === 'info' && }
+
+
+
+ + {message} +
+ {children && ( +
+ {children}
+
+ )}
+
+ {popupContent}
+ {arrow}
+
+
+ {React.cloneElement(children as React.ReactElement, {
+ 'data-tooltip-id': selector
+ })}
+
+ {htmlContent && htmlContent}
+
+
+ );
+};
+
+export default Tooltip;
diff --git a/src/components/base/tooltip/style.module.scss b/src/components/base/tooltip/style.module.scss
new file mode 100644
index 0000000..59360f6
--- /dev/null
+++ b/src/components/base/tooltip/style.module.scss
@@ -0,0 +1,8 @@
+.tooltip {
+ background-color: white !important;
+ font-size: 0.75rem !important; // text-xs
+ font-weight: normal !important; // font-normal
+ color: #374151 !important; // text-gray-700
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; // shadow-lg
+ opacity: 1 !important; // opacity-100
+}
diff --git a/src/components/config-scence/index.tsx b/src/components/config-scence/index.tsx
new file mode 100644
index 0000000..50ddbb4
--- /dev/null
+++ b/src/components/config-scence/index.tsx
@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+import React from 'react';
+import type { IWelcomeProps } from '../welcome';
+import Welcome from '../welcome';
+
+const ConfigSence: FC
+
+ );
+};
+export default React.memo(ConfigSence);
diff --git a/src/components/layouts/chat/answer/index.tsx b/src/components/layouts/chat/answer/index.tsx
new file mode 100644
index 0000000..25eff57
--- /dev/null
+++ b/src/components/layouts/chat/answer/index.tsx
@@ -0,0 +1,286 @@
+'use client';
+import type { FC } from 'react';
+import React, { useRef } from 'react';
+import { HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline';
+import { useTranslation } from 'react-i18next';
+import LoadingAnim from '../loading-anim';
+import type { FeedbackFunc } from '../type';
+import s from './style.module.scss';
+import ImageGallery from '@/components/base/image-gallery';
+import Thought from '../thought';
+import { randomString } from '@/utils/string';
+import type { ChatItem, MessageRating, VisionFile } from '@/types/app';
+import Tooltip from '@/components/base/tooltip';
+import WorkflowProcess from '@/components/workflow/workflow-process';
+import { Markdown } from '@/components/base/markdown';
+import Button from '@/components/base/button';
+import type { Emoji } from '@/types/tools';
+
+const OperationBtn = ({
+ innerContent,
+ onClick,
+ className
+}: {
+ innerContent: React.ReactNode;
+ onClick?: () => void;
+ className?: string;
+}) => (
+
+ {innerContent}
+
+);
+
+const OpeningStatementIcon: FC<{ className?: string }> = ({ className }) => (
+
+);
+
+const RatingIcon: FC<{ isLike: boolean }> = ({ isLike }) => {
+ return isLike ? (
+ {children}
;
+};
+
+type IAnswerProps = {
+ item: ChatItem;
+ feedbackDisabled: boolean;
+ onFeedback?: FeedbackFunc;
+ isResponding?: boolean;
+ allToolIcons?: Record {
+ await onFeedback?.(id, { rating: null });
+ }}
+ >
+
+
+
+
+
+ {OperationBtn({
+ innerContent: (
+
+
+ ),
+ onClick: () => onFeedback?.(id, { rating: 'like' })
+ })}
+
+
+ {OperationBtn({
+ innerContent: (
+
+
+ ),
+ onClick: () => onFeedback?.(id, { rating: 'dislike' })
+ })}
+
+
+ );
+ };
+
+ return (
+
+ {userOperation()}
+
+ );
+ };
+
+ const getImgs = (list?: VisionFile[]) => {
+ if (!list) return [];
+ return list.filter((file) => file.type === 'image' && file.belongs_to === 'assistant');
+ };
+
+ const agentModeAnswer = (
+
+ {agent_thoughts?.map((item, index) => (
+
+ );
+
+ return (
+
+ {item.thought && item.url)} />
+ )}
+
+ ))}
+
+
+ );
+};
+export default React.memo(Answer);
diff --git a/src/components/layouts/chat/answer/style.module.scss b/src/components/layouts/chat/answer/style.module.scss
new file mode 100644
index 0000000..4b4f052
--- /dev/null
+++ b/src/components/layouts/chat/answer/style.module.scss
@@ -0,0 +1,158 @@
+.answer-box {
+ display: flex;
+ align-items: flex-start;
+ .answerIcon {
+ position: relative;
+ background: url(../icons/robot.svg);
+ width: 40px;
+ height: 40px;
+ flex-shrink: 0;
+ }
+ .typeingIcon {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 16px;
+ height: 16px;
+ background: #ffffff;
+ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+ border-radius: 16px;
+ }
+ .answerWrap {
+ .itemOperation {
+ display: none;
+ }
+ &:hover {
+ .itemOperation {
+ display: flex;
+ }
+ .feedback {
+ display: flex;
+ }
+ }
+ }
+}
+
+.answer {
+ position: relative;
+ font-size: 14px;
+ line-height: 1.4;
+ color: black;
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ width: 8px;
+ height: 12px;
+ left: 0;
+ background: url(../icons/answer.svg) no-repeat;
+ }
+ &-child {
+ margin-left: 8px;
+ padding: 12px 16px;
+ background: #f3f4f6;
+ border-top-right-radius: 16px;
+ border-bottom-right-radius: 16px;
+ border-bottom-left-radius: 16px;
+ }
+ &-loading {
+ width: 24px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
+
+.feedback {
+ position: absolute;
+ top: -14px;
+ right: -14px;
+ display: none;
+ flex-direction: row;
+ justify-content: flex-end;
+ gap: 4px;
+ &.has-rating {
+ display: flex;
+ }
+}
+
+.operation-btn {
+ box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.05);
+ position: relative;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 1.75rem;
+ width: 1.75rem;
+ padding: 0.125rem;
+ border-radius: 0.5rem;
+ background: white;
+ cursor: pointer;
+ color: #6a7282;
+ &:hover {
+ color: #1e2939;
+ }
+}
+
+.hand-icon {
+ width: 1rem;
+ height: 1rem;
+}
+
+.icon-wrapper {
+ border-radius: 0.5rem;
+ width: 1.5rem;
+ height: 1.5rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ &:hover {
+ background-color: #f3f4f6;
+ }
+}
+
+.tooltip {
+ box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.05);
+ position: relative;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 1.75rem;
+ width: 1.75rem;
+ padding: 0.125rem;
+ border-radius: 0.5rem;
+ background: white;
+ cursor: pointer;
+ color: #6a7282;
+ &:hover {
+ color: #1e2939;
+ }
+ &-child {
+ border-radius: 0.5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 1.5rem;
+ width: 1.5rem;
+ }
+ .is-like {
+ color: #2563eb; // text-primary-600
+ background-color: #dbeafe; // bg-primary-100
+ &:hover {
+ background-color: #bfdbfe; // hover:bg-primary-200
+ }
+ }
+ .is-dislike {
+ color: #dc2626; // text-red-600
+ background-color: #fee2e2; // bg-red-100
+ &:hover {
+ background-color: #fecaca; // hover:bg-red-200
+ }
+ }
+}
diff --git a/src/components/layouts/chat/chat.module.scss b/src/components/layouts/chat/chat.module.scss
new file mode 100644
index 0000000..f09459e
--- /dev/null
+++ b/src/components/layouts/chat/chat.module.scss
@@ -0,0 +1,85 @@
+@use '@/styles/mixins.scss' as *;
+@use '@/styles/variables.scss' as *;
+@use '@/styles/responsive.scss' as *;
+
+.chat {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 42px;
+ padding: 162px 20px 80px;
+ h2 {
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 2;
+ text-align: center;
+ color: $text-primary;
+ margin: 0;
+ }
+ .chat-box {
+ width: 800px;
+ }
+}
+.chat-input-container {
+ background-color: $background-light;
+ border-radius: 20px;
+ padding: 20px;
+ width: 100%;
+ max-width: 800px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ textarea {
+ font-size: 14px;
+ color: #606060;
+ width: 100%;
+ border: none;
+ outline: none;
+ resize: none;
+ line-height: 1.5;
+ min-height: calc(14px * 1.5 * 1); /* 1 dòng */
+ max-height: calc(14px * 1.5 * 3); /* 3 dòng */
+ overflow-y: auto;
+ scrollbar-width: none;
+ &::-webkit-scrollbar {
+ display: none; /* Chrome, Safari, Edge */
+ }
+ }
+ .chat-controls {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .chat-actions {
+ display: flex;
+ align-items: center;
+ gap: 30px;
+ }
+ img:hover {
+ cursor: pointer;
+ }
+ .send {
+ @include button(14px, 400, 10px, 10px, $primary-color);
+ min-width: 44px;
+ height: 40px;
+ }
+ }
+}
+// responsive
+@include small {
+ .chat {
+ padding: 80px 20px 40px;
+ .chat-box {
+ width: 100%;
+ }
+ }
+ .chat-input-container {
+ .chat-controls {
+ flex-direction: column;
+ gap: 20px;
+ align-items: stretch;
+ .chat-actions:last-child {
+ justify-content: space-between;
+ }
+ }
+ }
+}
diff --git a/src/components/layouts/chat/chat.tsx b/src/components/layouts/chat/chat.tsx
new file mode 100644
index 0000000..dac94c0
--- /dev/null
+++ b/src/components/layouts/chat/chat.tsx
@@ -0,0 +1,265 @@
+/* eslint-disable @next/next/no-img-element */
+'use client';
+
+import ChatStyles from './chat.module.scss';
+import React, { FC, useEffect, useRef, useState } from 'react';
+import Image from 'next/image';
+import { useTranslation } from 'react-i18next';
+import Answer from './answer';
+import Question from './question';
+import type { FeedbackFunc } from './type';
+import type { ChatItem, VisionFile, VisionSettings } from '@/types/app';
+import { Resolution } from '@/types/app';
+import { TransferMethod } from '@/types/app';
+import Toast from '@/components/base/toast';
+import ChatImageUploader from '@/components/base/image-uploader/chat-image-uploader';
+import ImageList from '@/components/base/image-uploader/image-list';
+import { useImageFiles } from '@/components/base/image-uploader/hooks';
+import { v4 } from 'uuid';
+export type IChatProps = {
+ chatList: ChatItem[];
+ /**
+ * Whether to display the editing area and rating status
+ */
+ feedbackDisabled?: boolean;
+ /**
+ * Whether to display the input area
+ */
+ isHideSendInput?: boolean;
+ onFeedback?: FeedbackFunc;
+ checkCanSend?: () => boolean;
+ onSend?: (message: string, files: VisionFile[]) => void;
+ useCurrentUserAvatar?: boolean;
+ isResponding?: boolean;
+ controlClearQuery?: number;
+ visionConfig?: VisionSettings;
+};
+
+const Chat: FC
+
+
+ {isResponding && (
+
+
+
+ )}
+
+
+
+
+
+ {workflowProcess &&
+
+
+ ) : isAgentMode ? (
+ agentModeAnswer
+ ) : (
+
+
+ )}
+
+ {suggestedQuestions.map((suggestion, index) => (
+
+
+
+
+ ))}
+
+ {!feedbackDisabled && !item.feedbackDisabled && renderItemOperation()}
+ {/* User feedback must be displayed */}
+ {!feedbackDisabled && renderFeedbackRating(feedback?.rating)}
+
+ Hỏi trợ lý AI của chúng tôi
+
+ {chatList.length === 0 && (
+ 0
+ ? item.message_files.map((item) => item.url)
+ : []
+ }
+ />
+ );
+ })}
+
+
+
+
+ );
+};
+
+export default React.memo(Question);
diff --git a/src/components/layouts/chat/question/style.module.scss b/src/components/layouts/chat/question/style.module.scss
new file mode 100644
index 0000000..5919f54
--- /dev/null
+++ b/src/components/layouts/chat/question/style.module.scss
@@ -0,0 +1,37 @@
+.question-box {
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-start;
+ margin: 40px 0;
+ .question {
+ position: relative;
+ font-size: 14px;
+ line-height: 1.4;
+ color: black;
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ width: 8px;
+ height: 12px;
+ right: 0;
+ background: url(../icons/question.svg) no-repeat;
+ }
+ .question-child {
+ margin-right: 8px;
+ padding: 12px 16px;
+ background-color: #e1effe;
+ border-top-left-radius: 16px;
+ border-bottom-right-radius: 16px;
+ border-bottom-left-radius: 16px;
+ }
+ }
+ .questionIcon {
+ background: url(../icons/default-avatar.jpg);
+ background-size: contain;
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ flex-shrink: 0;
+ }
+}
diff --git a/src/components/layouts/chat/thought/index.tsx b/src/components/layouts/chat/thought/index.tsx
new file mode 100644
index 0000000..7cf74f5
--- /dev/null
+++ b/src/components/layouts/chat/thought/index.tsx
@@ -0,0 +1,48 @@
+'use client';
+import type { FC } from 'react';
+import React from 'react';
+import type { ThoughtItem, ToolInfoInThought } from '../type';
+import Tool from './tool';
+import type { Emoji } from '@/types/tools';
+
+export type IThoughtProps = {
+ thought: ThoughtItem;
+ allToolIcons: Record
+
+ {useCurrentUserAvatar ? (
+
+
+
+ {imgSrcs && imgSrcs.length > 0 &&
+
+ {userName?.[0].toLocaleUpperCase()}
+
+ ) : (
+
+ )}
+
+ {toolThoughtList.map((item: ToolInfoInThought, index) => (
+
+ );
+};
+export default React.memo(Thought);
diff --git a/src/components/layouts/chat/thought/panel.tsx b/src/components/layouts/chat/thought/panel.tsx
new file mode 100644
index 0000000..c04dfa9
--- /dev/null
+++ b/src/components/layouts/chat/thought/panel.tsx
@@ -0,0 +1,24 @@
+'use client';
+import type { FC } from 'react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+ isRequest: boolean;
+ toolName: string;
+ content: string;
+};
+
+const Panel: FC
+
+ );
+};
+export default React.memo(Panel);
diff --git a/src/components/layouts/chat/thought/style.module.css b/src/components/layouts/chat/thought/style.module.css
new file mode 100644
index 0000000..eb281de
--- /dev/null
+++ b/src/components/layouts/chat/thought/style.module.css
@@ -0,0 +1,9 @@
+.wrap {
+ background-color: rgba(255, 255, 255, 0.92);
+}
+
+.wrapHoverEffect:hover {
+ box-shadow:
+ 0px 1px 2px 0px rgba(16, 24, 40, 0.06),
+ 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
+}
diff --git a/src/components/layouts/chat/thought/tool.tsx b/src/components/layouts/chat/thought/tool.tsx
new file mode 100644
index 0000000..b3d28dd
--- /dev/null
+++ b/src/components/layouts/chat/thought/tool.tsx
@@ -0,0 +1,82 @@
+'use client';
+import type { FC } from 'react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import cn from 'classnames';
+import type { ToolInfoInThought } from '../type';
+import Panel from './panel';
+import Loading02 from '@/components/base/icons/line/loading-02';
+import ChevronDown from '@/components/base/icons/line/arrows/chevron-down';
+import CheckCircle from '@/components/base/icons/solid/general/check-circle';
+import DataSetIcon from '@/components/base/icons/public/data-set';
+import type { Emoji } from '@/types/tools';
+import AppIcon from '@/components/base/app-icon';
+
+type Props = {
+ payload: ToolInfoInThought;
+ allToolIcons?: Record
+ {t(`tools.thought.${isRequest ? 'requestTitle' : 'responseTitle'}`)} {toolName}
+
+ {content}
+
+
+ );
+};
+export default React.memo(Tool);
diff --git a/src/components/layouts/chat/type.ts b/src/components/layouts/chat/type.ts
new file mode 100644
index 0000000..515e7e4
--- /dev/null
+++ b/src/components/layouts/chat/type.ts
@@ -0,0 +1,134 @@
+import type { VisionFile } from '@/types/app';
+
+export type LogAnnotation = {
+ content: string;
+ account: {
+ id: string;
+ name: string;
+ email: string;
+ };
+ created_at: number;
+};
+
+export type Annotation = {
+ id: string;
+ authorName: string;
+ logAnnotation?: LogAnnotation;
+ created_at?: number;
+};
+
+export const MessageRatings = ['like', 'dislike', null] as const;
+export type MessageRating = (typeof MessageRatings)[number];
+
+export type MessageMore = {
+ time: string;
+ tokens: number;
+ latency: number | string;
+};
+
+export type Feedbacktype = {
+ rating: MessageRating;
+ content?: string | null;
+};
+
+export type FeedbackFunc = (messageId: string, feedback: Feedbacktype) => Promise
+
+ setIsShowDetail(!isShowDetail)}
+ >
+ {!isFinished &&
+ {isShowDetail && (
+
+
+ )}
+
+
+
+
+ SỞ KHOA HỌC VÀ CÔNG NGHỆ HÀ NỘI
++ Trang AI Hỏi đáp – Tra cứu chính sách KH&CN +
+
+
+ Lịch sử trò chuyện
++ Bạn có thể tìm lại các cuộc trò truyện cũ, luật, thông tư nhiều người quan tâm dưới đây nhé. +
+-
+ {tabs.map((tab, index) => (
+
- handleTabClick(index)} + style={{ cursor: 'pointer' }} + > + {tab} + + ))} +
+ {data?.data?.map((item, index) => {
+ const isExpanded = expandedItems.includes(index);
+ return (
+
+
+
+ {isExpanded && (
+
+ );
+ })}
+
+
+ )}
+ {item.answer}
+
+
+ );
+}
+
+export default Card;
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
new file mode 100644
index 0000000..ad3252b
--- /dev/null
+++ b/src/components/sidebar/index.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import type { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ChatBubbleOvalLeftEllipsisIcon, PencilSquareIcon } from '@heroicons/react/24/outline';
+import { ChatBubbleOvalLeftEllipsisIcon as ChatBubbleOvalLeftEllipsisSolidIcon } from '@heroicons/react/24/solid';
+import Button from '@/components/base/button';
+// import Card from './card'
+import type { ConversationItem } from '@/types/app';
+
+function classNames(...classes: any[]) {
+ return classes.filter(Boolean).join(' ');
+}
+
+const MAX_CONVERSATION_LENTH = 20;
+
+export type ISidebarProps = {
+ copyRight: string;
+ currentId: string;
+ onCurrentIdChange: (id: string) => void;
+ list: ConversationItem[];
+};
+
+const Sidebar: FC{text ?? t('app.chat.powerBy')}
+ {children}
+
+ {list.length < MAX_CONVERSATION_LENTH && (
+
+ );
+};
+
+export default React.memo(Sidebar);
diff --git a/src/components/value-panel/index.tsx b/src/components/value-panel/index.tsx
new file mode 100644
index 0000000..2a4a7e3
--- /dev/null
+++ b/src/components/value-panel/index.tsx
@@ -0,0 +1,56 @@
+'use client';
+import type { FC, ReactNode } from 'react';
+import React from 'react';
+import cn from 'classnames';
+import { useTranslation } from 'react-i18next';
+import s from './style.module.css';
+import { StarIcon } from '@/components//welcome/massive-component';
+import Button from '@/components/base/button';
+
+export type ITemplateVarPanelProps = {
+ className?: string;
+ header: ReactNode;
+ children?: ReactNode | null;
+ isFold: boolean;
+};
+
+const TemplateVarPanel: FC
+
+
+ )}
+
+
+ {/*
+
+
+
+ © {copyRight} {new Date().getFullYear()}
+
+
+ {/* header */}
+
+ );
+};
+
+export const PanelTitle: FC<{ title: string; className?: string }> = ({ title, className }) => {
+ return (
+ {header}
+ {/* body */}
+ {!isFold && children && {children}
}
+
+
+ );
+};
+
+export const VarOpBtnGroup: FC<{
+ className?: string;
+ onConfirm: () => void;
+ onCancel: () => void;
+}> = ({ className, onConfirm, onCancel }) => {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+
+ );
+};
+
+export default React.memo(TemplateVarPanel);
diff --git a/src/components/value-panel/style.module.css b/src/components/value-panel/style.module.css
new file mode 100644
index 0000000..f0b0ffc
--- /dev/null
+++ b/src/components/value-panel/style.module.css
@@ -0,0 +1,5 @@
+.boxShodow {
+ box-shadow:
+ 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+ 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+}
diff --git a/src/components/welcome/icons/logo.png b/src/components/welcome/icons/logo.png
new file mode 100644
index 0000000..800a070
Binary files /dev/null and b/src/components/welcome/icons/logo.png differ
diff --git a/src/components/welcome/index.tsx b/src/components/welcome/index.tsx
new file mode 100644
index 0000000..634f51e
--- /dev/null
+++ b/src/components/welcome/index.tsx
@@ -0,0 +1,370 @@
+'use client';
+import type { FC } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import TemplateVarPanel, { PanelTitle, VarOpBtnGroup } from '../value-panel';
+import FileUploaderInAttachmentWrapper from '../base/file-uploader-in-attachment';
+import s from './style.module.css';
+import { AppInfoComp, ChatBtn, EditBtn, FootLogo, PromptTemplate } from './massive-component';
+import type { AppInfo, PromptConfig } from '@/types/app';
+import Toast from '@/components/base/toast';
+import Select from '@/components/base/select';
+import { DEFAULT_VALUE_MAX_LEN } from '@/config';
+
+// regex to match the {{}} and replace it with a span
+const regex = /\{\{([^}]+)\}\}/g;
+
+export type IWelcomeProps = {
+ conversationName: string;
+ hasSetInputs: boolean;
+ isPublicVersion: boolean;
+ siteInfo: AppInfo;
+ promptConfig: PromptConfig;
+ onStartChat: (inputs: Record
+
+ );
+ };
+
+ const renderInputs = () => {
+ return (
+ {conversationName}
+
+ {promptConfig.prompt_variables.map((item) => (
+
+
+ {item.type === 'select' && (
+