feat(frontend): add initial frontend structure with components, services, and assets
This commit is contained in:
Davidson Gomes
366
frontend/app/documentation/components/StreamLabForm.tsx
Normal file
366
frontend/app/documentation/components/StreamLabForm.tsx
Normal file
@@ -0,0 +1,366 @@
|
||||
/*
|
||||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||||
│ @author: Davidson Gomes │
|
||||
│ @file: /app/documentation/components/StreamLabForm.tsx │
|
||||
│ Developed by: Davidson Gomes │
|
||||
│ Creation date: May 13, 2025 │
|
||||
│ Contact: contato@evolution-api.com │
|
||||
├──────────────────────────────────────────────────────────────────────────────┤
|
||||
│ @copyright © Evolution API 2025. All rights reserved. │
|
||||
│ Licensed under the Apache License, Version 2.0 │
|
||||
│ │
|
||||
│ You may not use this file except in compliance with the License. │
|
||||
│ You may obtain a copy of the License at │
|
||||
│ │
|
||||
│ http://www.apache.org/licenses/LICENSE-2.0 │
|
||||
│ │
|
||||
│ Unless required by applicable law or agreed to in writing, software │
|
||||
│ distributed under the License is distributed on an "AS IS" BASIS, │
|
||||
│ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. │
|
||||
│ See the License for the specific language governing permissions and │
|
||||
│ limitations under the License. │
|
||||
├──────────────────────────────────────────────────────────────────────────────┤
|
||||
│ @important │
|
||||
│ For any future changes to the code in this file, it is recommended to │
|
||||
│ include, together with the modification, the information of the developer │
|
||||
│ who changed it and the date of modification. │
|
||||
└──────────────────────────────────────────────────────────────────────────────┘
|
||||
*/
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Send, Paperclip, X, FileText, Image, File } from "lucide-react";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
|
||||
interface AttachedFile {
|
||||
name: string;
|
||||
type: string;
|
||||
size: number;
|
||||
base64: string;
|
||||
}
|
||||
|
||||
interface StreamLabFormProps {
|
||||
agentUrl: string;
|
||||
setAgentUrl: (url: string) => void;
|
||||
apiKey: string;
|
||||
setApiKey: (key: string) => void;
|
||||
message: string;
|
||||
setMessage: (message: string) => void;
|
||||
sessionId: string;
|
||||
setSessionId: (id: string) => void;
|
||||
taskId: string;
|
||||
setTaskId: (id: string) => void;
|
||||
callId: string;
|
||||
setCallId: (id: string) => void;
|
||||
sendStreamRequest: () => Promise<void>;
|
||||
isStreaming: boolean;
|
||||
streamResponse: string;
|
||||
streamStatus: string;
|
||||
streamHistory: string[];
|
||||
renderStatusIndicator: () => JSX.Element | null;
|
||||
renderTypingIndicator: () => JSX.Element | null;
|
||||
setFiles?: (files: AttachedFile[]) => void;
|
||||
authMethod: string;
|
||||
currentTaskId?: string | null;
|
||||
}
|
||||
|
||||
export function StreamLabForm({
|
||||
agentUrl,
|
||||
setAgentUrl,
|
||||
apiKey,
|
||||
setApiKey,
|
||||
message,
|
||||
setMessage,
|
||||
sessionId,
|
||||
setSessionId,
|
||||
taskId,
|
||||
setTaskId,
|
||||
callId,
|
||||
setCallId,
|
||||
sendStreamRequest,
|
||||
isStreaming,
|
||||
streamResponse,
|
||||
streamStatus,
|
||||
streamHistory,
|
||||
renderStatusIndicator,
|
||||
renderTypingIndicator,
|
||||
setFiles = () => {},
|
||||
authMethod,
|
||||
currentTaskId
|
||||
}: StreamLabFormProps) {
|
||||
const [attachedFiles, setAttachedFiles] = useState<AttachedFile[]>([]);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const clearAttachedFiles = () => {
|
||||
setAttachedFiles([]);
|
||||
};
|
||||
|
||||
const handleSendStreamRequest = async () => {
|
||||
await sendStreamRequest();
|
||||
clearAttachedFiles();
|
||||
};
|
||||
|
||||
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (!e.target.files || e.target.files.length === 0) return;
|
||||
|
||||
const maxFileSize = 5 * 1024 * 1024; // 5MB limit
|
||||
const newFiles = Array.from(e.target.files);
|
||||
|
||||
if (attachedFiles.length + newFiles.length > 5) {
|
||||
toast({
|
||||
title: "File limit exceeded",
|
||||
description: "You can only attach up to 5 files.",
|
||||
variant: "destructive"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const filesToAdd: AttachedFile[] = [];
|
||||
|
||||
for (const file of newFiles) {
|
||||
if (file.size > maxFileSize) {
|
||||
toast({
|
||||
title: "File too large",
|
||||
description: `The file ${file.name} exceeds the 5MB size limit.`,
|
||||
variant: "destructive"
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
try {
|
||||
const base64 = await readFileAsBase64(file);
|
||||
filesToAdd.push({
|
||||
name: file.name,
|
||||
type: file.type,
|
||||
size: file.size,
|
||||
base64: base64
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to read file:", error);
|
||||
toast({
|
||||
title: "Failed to read file",
|
||||
description: `Could not process ${file.name}.`,
|
||||
variant: "destructive"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (filesToAdd.length > 0) {
|
||||
const updatedFiles = [...attachedFiles, ...filesToAdd];
|
||||
setAttachedFiles(updatedFiles);
|
||||
setFiles(updatedFiles);
|
||||
}
|
||||
|
||||
// Reset file input
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
const readFileAsBase64 = (file: File): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const result = reader.result as string;
|
||||
const base64 = result.split(',')[1]; // Remove data URL prefix
|
||||
resolve(base64);
|
||||
};
|
||||
reader.onerror = reject;
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
};
|
||||
|
||||
const removeFile = (index: number) => {
|
||||
const updatedFiles = attachedFiles.filter((_, i) => i !== index);
|
||||
setAttachedFiles(updatedFiles);
|
||||
setFiles(updatedFiles);
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes: number): string => {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
};
|
||||
|
||||
const isImageFile = (type: string): boolean => {
|
||||
return type.startsWith('image/');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* A2A Streaming Information */}
|
||||
<div className="p-4 bg-[#1a1a1a] border border-[#333] rounded-md">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-emerald-400">A2A Streaming Mode</span>
|
||||
<span className="text-xs text-neutral-400">Method: message/stream</span>
|
||||
</div>
|
||||
<div className="text-xs text-neutral-400">
|
||||
Authentication: {authMethod === "bearer" ? "Bearer Token" : "API Key"} header
|
||||
</div>
|
||||
{currentTaskId && (
|
||||
<div className="mt-2 pt-2 border-t border-[#333]">
|
||||
<span className="text-xs text-neutral-400">Current Task ID: </span>
|
||||
<span className="text-xs text-emerald-400 font-mono">{currentTaskId}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm text-neutral-400 mb-1 block">Agent URL</label>
|
||||
<Input
|
||||
value={agentUrl}
|
||||
onChange={(e) => setAgentUrl(e.target.value)}
|
||||
placeholder="http://localhost:8000/api/v1/a2a/your-agent-id"
|
||||
className="bg-[#222] border-[#444] text-white"
|
||||
disabled={isStreaming}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-neutral-400 mb-1 block">
|
||||
{authMethod === "bearer" ? "Bearer Token" : "API Key"} (optional)
|
||||
</label>
|
||||
<Input
|
||||
value={apiKey}
|
||||
onChange={(e) => setApiKey(e.target.value)}
|
||||
placeholder={authMethod === "bearer" ? "Your Bearer token" : "Your API key"}
|
||||
className="bg-[#222] border-[#444] text-white"
|
||||
disabled={isStreaming}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm text-neutral-400 mb-1 block">Message</label>
|
||||
<Textarea
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
placeholder="What is the A2A protocol?"
|
||||
className="bg-[#222] border-[#444] text-white min-h-[100px]"
|
||||
disabled={isStreaming}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="text-sm text-neutral-400">
|
||||
Attach Files (up to 5, max 5MB each)
|
||||
</label>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="bg-[#222] border-[#444] text-neutral-300 hover:bg-[#333] hover:text-white"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={attachedFiles.length >= 5 || isStreaming}
|
||||
>
|
||||
<Paperclip className="h-4 w-4 mr-2" />
|
||||
Browse Files
|
||||
</Button>
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
className="hidden"
|
||||
multiple
|
||||
onChange={handleFileSelect}
|
||||
disabled={isStreaming}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{attachedFiles.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{attachedFiles.map((file, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-1.5 bg-[#333] text-white rounded-md p-1.5 text-xs"
|
||||
>
|
||||
{isImageFile(file.type) ? (
|
||||
<Image className="h-4 w-4 text-emerald-400" />
|
||||
) : file.type === 'application/pdf' ? (
|
||||
<FileText className="h-4 w-4 text-emerald-400" />
|
||||
) : (
|
||||
<File className="h-4 w-4 text-emerald-400" />
|
||||
)}
|
||||
<span className="max-w-[150px] truncate">{file.name}</span>
|
||||
<span className="text-neutral-400">({formatFileSize(file.size)})</span>
|
||||
<button
|
||||
onClick={() => removeFile(index)}
|
||||
className="ml-1 text-neutral-400 hover:text-white transition-colors"
|
||||
disabled={isStreaming}
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator className="my-4 bg-[#333]" />
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="text-sm text-neutral-400 mb-1 block">Session ID</label>
|
||||
<Input
|
||||
value={sessionId}
|
||||
onChange={(e) => setSessionId(e.target.value)}
|
||||
className="bg-[#222] border-[#444] text-white"
|
||||
disabled={isStreaming}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-neutral-400 mb-1 block">Task ID</label>
|
||||
<Input
|
||||
value={taskId}
|
||||
onChange={(e) => setTaskId(e.target.value)}
|
||||
className="bg-[#222] border-[#444] text-white"
|
||||
disabled={isStreaming}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-neutral-400 mb-1 block">Call ID</label>
|
||||
<Input
|
||||
value={callId}
|
||||
onChange={(e) => setCallId(e.target.value)}
|
||||
className="bg-[#222] border-[#444] text-white"
|
||||
disabled={isStreaming}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={handleSendStreamRequest}
|
||||
disabled={isStreaming}
|
||||
className="bg-emerald-400 text-black hover:bg-[#00cc7d] w-full mt-4"
|
||||
>
|
||||
{isStreaming ? (
|
||||
<div className="flex items-center">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-black mr-2"></div>
|
||||
Streaming...
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center">
|
||||
<Send className="mr-2 h-4 w-4" />
|
||||
Start Streaming
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{streamResponse && (
|
||||
<div className="mt-6 rounded-md bg-[#222] border border-[#333] p-4">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h3 className="text-lg font-medium text-white">Response</h3>
|
||||
{renderStatusIndicator && renderStatusIndicator()}
|
||||
</div>
|
||||
<div className="whitespace-pre-wrap text-sm font-mono text-neutral-300">
|
||||
{streamResponse}
|
||||
</div>
|
||||
{renderTypingIndicator && renderTypingIndicator()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user