mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-01-23 19:27:04 +00:00
72 lines
2.7 KiB
TypeScript
72 lines
2.7 KiB
TypeScript
import type { Message } from 'ai';
|
|
import { toast } from 'react-toastify';
|
|
import React from 'react';
|
|
import { ImportFolderButton } from '~/components/chat/ImportFolderButton';
|
|
|
|
export function ImportButtons(importChat: ((description: string, messages: Message[]) => Promise<void>) | undefined) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center w-auto">
|
|
<input
|
|
type="file"
|
|
id="chat-import"
|
|
className="hidden"
|
|
accept=".json"
|
|
onChange={async (e) => {
|
|
const file = e.target.files?.[0];
|
|
|
|
if (file && importChat) {
|
|
try {
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = async (e) => {
|
|
try {
|
|
const content = e.target?.result as string;
|
|
const data = JSON.parse(content);
|
|
|
|
if (!Array.isArray(data.messages)) {
|
|
toast.error('Invalid chat file format');
|
|
}
|
|
|
|
await importChat(data.description, data.messages);
|
|
toast.success('Chat imported successfully');
|
|
} catch (error: unknown) {
|
|
if (error instanceof Error) {
|
|
toast.error('Failed to parse chat file: ' + error.message);
|
|
} else {
|
|
toast.error('Failed to parse chat file');
|
|
}
|
|
}
|
|
};
|
|
reader.onerror = () => toast.error('Failed to read chat file');
|
|
reader.readAsText(file);
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : 'Failed to import chat');
|
|
}
|
|
e.target.value = ''; // Reset file input
|
|
} else {
|
|
toast.error('Something went wrong');
|
|
}
|
|
}}
|
|
/>
|
|
<div className="flex flex-col items-center gap-4 max-w-2xl text-center">
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => {
|
|
const input = document.getElementById('chat-import');
|
|
input?.click();
|
|
}}
|
|
className="px-4 py-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 transition-all flex items-center gap-2"
|
|
>
|
|
<div className="i-ph:upload-simple" />
|
|
Import Chat
|
|
</button>
|
|
<ImportFolderButton
|
|
importChat={importChat}
|
|
className="px-4 py-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 transition-all flex items-center gap-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|