diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/[lng]/evcp/(evcp)/vendors/[id]/info/basic/text-utils.tsx | 131 | ||||
| -rw-r--r-- | app/[lng]/partners/(partners)/sales-force-test/AF_poc.html | 118 | ||||
| -rw-r--r-- | app/[lng]/test/agentforce-poc-faq/page.tsx | 62 | ||||
| -rw-r--r-- | app/[lng]/test/agentforce-poc-summary/page.tsx | 291 |
4 files changed, 353 insertions, 249 deletions
diff --git a/app/[lng]/evcp/(evcp)/vendors/[id]/info/basic/text-utils.tsx b/app/[lng]/evcp/(evcp)/vendors/[id]/info/basic/text-utils.tsx deleted file mode 100644 index a3507dd0..00000000 --- a/app/[lng]/evcp/(evcp)/vendors/[id]/info/basic/text-utils.tsx +++ /dev/null @@ -1,131 +0,0 @@ -"use client" - -import { useState } from "react" -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" -import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" -import { ChevronDown, ChevronUp } from "lucide-react" - -export function TruncatedText({ - text, - maxLength = 50, - showTooltip = true -}: { - text: string | null - maxLength?: number - showTooltip?: boolean -}) { - if (!text) return <span className="text-muted-foreground">-</span> - - if (text.length <= maxLength) { - return <span>{text}</span> - } - - const truncated = text.slice(0, maxLength) + "..." - - if (!showTooltip) { - return <span>{truncated}</span> - } - - return ( - <TooltipProvider> - <Tooltip> - <TooltipTrigger asChild> - <span className="cursor-help border-b border-dotted border-gray-400"> - {truncated} - </span> - </TooltipTrigger> - <TooltipContent className="max-w-xs"> - <p className="whitespace-pre-wrap">{text}</p> - </TooltipContent> - </Tooltip> - </TooltipProvider> - ) -} - -export function ExpandableText({ - text, - maxLength = 100, - className = "" -}: { - text: string | null - maxLength?: number - className?: string -}) { - const [isExpanded, setIsExpanded] = useState(false) - - if (!text) return <span className="text-muted-foreground">-</span> - - if (text.length <= maxLength) { - return <span className={className}>{text}</span> - } - - return ( - <Collapsible open={isExpanded} onOpenChange={setIsExpanded}> - <div className={className}> - <CollapsibleTrigger asChild> - <button className="text-left w-full group"> - <span className="whitespace-pre-wrap"> - {isExpanded ? text : text.slice(0, maxLength) + "..."} - </span> - <span className="inline-flex items-center ml-2 text-blue-600 hover:text-blue-800"> - {isExpanded ? ( - <> - <ChevronUp className="w-3 h-3" /> - <span className="text-xs ml-1">접기</span> - </> - ) : ( - <> - <ChevronDown className="w-3 h-3" /> - <span className="text-xs ml-1">더보기</span> - </> - )} - </span> - </button> - </CollapsibleTrigger> - </div> - </Collapsible> - ) -} - -export function AddressDisplay({ - address, - addressEng, - postalCode, - addressDetail -}: { - address: string | null - addressEng: string | null - postalCode: string | null - addressDetail: string | null -}) { - const hasAnyAddress = address || addressEng || postalCode || addressDetail - - if (!hasAnyAddress) { - return <span className="text-muted-foreground">-</span> - } - - return ( - <div className="space-y-1"> - {postalCode && ( - <div className="text-xs text-muted-foreground"> - 우편번호: {postalCode} - </div> - )} - {address && ( - <div className="font-medium break-words"> - {address} - </div> - )} - {addressDetail && ( - <div className="text-sm text-muted-foreground break-words"> - {addressDetail} - </div> - )} - {addressEng && ( - <div className="text-sm text-muted-foreground break-words italic"> - {addressEng} - </div> - )} - </div> - ) -}
\ No newline at end of file diff --git a/app/[lng]/partners/(partners)/sales-force-test/AF_poc.html b/app/[lng]/partners/(partners)/sales-force-test/AF_poc.html deleted file mode 100644 index 60e047ed..00000000 --- a/app/[lng]/partners/(partners)/sales-force-test/AF_poc.html +++ /dev/null @@ -1,118 +0,0 @@ -<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Salesforce LWC Loader</title>
-</head>
-<body>
- <script src="https://connect-flow-8014--ps.sandbox.lightning.force.com/lightning/lightning.out.js"></script>
- <script>
- const myApiUrl = 'https://pyheroku-d21d18e4f257.herokuapp.com/api/getToken';
-
- const salesforceUrl = 'https://connect-flow-8014--ps.sandbox.lightning.force.com/';
- const appName = 'c:zzChatBot_Aura';
- const componentName = 'c:sj_Chatbot';
-
- const lwcAttributes = {
- isDarkMode: false,
- chatbot_width: '350px',
- chatbot_height: '600px'
- };
-
- // 에러 메시지를 화면에 표시하는 함수
- function displayError(message) {
- const errorDiv = document.getElementById('errorMessage');
- errorDiv.textContent = message;
- errorDiv.style.display = 'block';
- }
-
- const salesforceApiUrl = 'https://connect-flow-8014--ps.sandbox.my.salesforce.com/services/apexrest/summarizeChat/';
-
- const chatData = {
- chatlog: `[
- {
- "sender": "SHI",
- "message": "최근 입고된 발전기 제어반 견적서에서 납기 조건 누락을 확인했습니다.
- 계약 전 꼭 납기 포함한 수정본 제출 부탁드립니다.",
- },
- {
- "sender": "Partner",
- "message": "네, 누락 사항 확인 후 납기 조건 명시하여 오늘 중으로 재제출 하겠습니다.",
- },
- {
- "sender": "SHI",
- "message": "감사합니다. 납기 조건은 계약 핵심 조항입니다. 반드시 반영해 주세요.",
- }
- ]
- `
- };
-
- // API를 호출하여 토큰을 가져오고 LWC를 로드하는 로직
- async function getToken(){
- let accessToken = '';
- await fetch(myApiUrl, { method: 'POST' }) // 프록시 서버에 POST 요청을 보냅니다.
- .then(response => {
- if (!response.ok) {
- return response.json().then(errorData => {
- throw new Error(`백엔드 API 에러 (Status: ${response.status}): ${JSON.stringify(errorData)}`);
- });
- }
- return response.json();
- })
- .then(data => {
- accessToken = data.access_token;
- if (!accessToken) {
- throw new Error("응답 데이터에 access_token이 없습니다.");
- }
-
- console.log("Heroku 프록시를 통해 안전하게 토큰을 받았습니다:", accessToken);
- })
- .catch(error => {
- console.error('전체 프로세스 호출 실패:', error);
- displayError(`오류가 발생했습니다: ${error.message}`);
- });
-
- return accessToken;
- }
-
- async function getChatSummary(accessToken){
- console.log("토큰")
- console.log(accessToken)
- fetch(salesforceApiUrl, {
- method: 'POST',
- headers: {
- // Bearer 뒤에 공백이 중요합니다.
- 'Authorization': `Bearer ${accessToken}`,
- 'Content-Type': 'application/json'
- },
- // JavaScript 객체를 JSON 문자열로 변환합니다.
- body: JSON.stringify(chatData)
- })
- .then(response => {
- if (!response.ok) {
- // API 호출이 실패하면 에러를 발생시킵니다.
- throw new Error(`Salesforce API 에러: ${response.status}`);
- }
- return response.json(); // 응답을 JSON 형태로 파싱합니다.
- })
- .then(result => {
- // 성공적인 응답을 콘솔에 출력합니다.
- console.log('Salesforce API 응답:', result);
- })
- .catch(error => {
- // API 호출 중 발생한 에러를 처리합니다.
- console.error('Salesforce API 호출 실패:', error);
- displayError(`Salesforce API 호출 중 오류가 발생했습니다: ${error.message}`);
- })
- }
-
- async function getMain(){
- accessToken = await getToken();
- await getChatSummary(accessToken);
- }
-
- getMain();
- </script>
-</body>
-</html>
\ No newline at end of file diff --git a/app/[lng]/test/agentforce-poc-faq/page.tsx b/app/[lng]/test/agentforce-poc-faq/page.tsx new file mode 100644 index 00000000..493828d6 --- /dev/null +++ b/app/[lng]/test/agentforce-poc-faq/page.tsx @@ -0,0 +1,62 @@ +'use client' + +import { useState, useRef } from 'react' + +export default function AgentforcePocPage() { + const [isLoading, setIsLoading] = useState(true) + const iframeRef = useRef<HTMLIFrameElement>(null) + + const handleIframeLoad = () => { + setIsLoading(false) + } + + const refreshIframe = () => { + if (iframeRef.current) { + setIsLoading(true) + iframeRef.current.src = iframeRef.current.src + } + } + + return ( + <div className="min-h-screen bg-gray-50 p-4"> + <div className="max-w-7xl mx-auto"> + <div className="mb-6 flex items-center justify-between"> + <h1 className="text-3xl font-bold text-gray-900"> + Agentforce POC + </h1> + <button + onClick={refreshIframe} + className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors" + > + 새로고침 + </button> + </div> + + <div className="bg-white rounded-lg shadow-lg overflow-hidden"> + {isLoading && ( + <div className="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-10"> + <div className="text-center"> + <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div> + <p className="text-gray-600">로딩 중...</p> + </div> + </div> + )} + + <div className="relative" style={{ height: '800px' }}> + <iframe + ref={iframeRef} + src="/agentforce-poc.html" + title="Agentforce POC" + className="w-full h-full border-0" + onLoad={handleIframeLoad} + /> + </div> + </div> + + <div className="mt-4 text-sm text-gray-500 text-center"> + 이 페이지는 Salesforce Agentforce POC를 iframe으로 표시합니다. + </div> + </div> + </div> + ) +}
\ No newline at end of file diff --git a/app/[lng]/test/agentforce-poc-summary/page.tsx b/app/[lng]/test/agentforce-poc-summary/page.tsx new file mode 100644 index 00000000..fc504cd3 --- /dev/null +++ b/app/[lng]/test/agentforce-poc-summary/page.tsx @@ -0,0 +1,291 @@ +"use client"; + +import * as React from "react"; +import { useState } from "react"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Plus, Trash2, Send, Loader2 } from "lucide-react"; +import { toast } from "sonner"; + +interface ChatMessage { + id: string; + sender: "SHI" | "Partner"; + message: string; +} + +interface SummaryResponse { + issue: string; + request: string; + summary: string; +} + +export default function AgentForcePOCSummaryPage() { + const [messages, setMessages] = useState<ChatMessage[]>([ + { + id: "1", + sender: "SHI", + message: "최근 입고된 발전기 제어반 견적서에서 납기 조건 누락을 확인했습니다. 계약 전 꼭 납기 포함한 수정본 제출 부탁드립니다." + }, + { + id: "2", + sender: "Partner", + message: "네, 누락 사항 확인 후 납기 조건 명시하여 오늘 중으로 재제출 하겠습니다." + }, + { + id: "3", + sender: "SHI", + message: "감사합니다. 납기 조건은 계약 핵심 조항입니다. 반드시 반영해 주세요." + } + ]); + + const [summaryResult, setSummaryResult] = useState<SummaryResponse | null>(null); + const [isLoading, setIsLoading] = useState(false); + + // 새 메시지 추가 + const addMessage = () => { + const newMessage: ChatMessage = { + id: Date.now().toString(), + sender: "SHI", + message: "" + }; + setMessages([...messages, newMessage]); + }; + + // 메시지 삭제 + const removeMessage = (id: string) => { + if (messages.length > 1) { + setMessages(messages.filter(msg => msg.id !== id)); + } else { + toast.error("최소 1개의 메시지는 유지해야 합니다."); + } + }; + + // 메시지 업데이트 + const updateMessage = (id: string, field: keyof ChatMessage, value: string) => { + setMessages(messages.map(msg => + msg.id === id ? { ...msg, [field]: value } : msg + )); + }; + + // 요약 API 호출 + const handleSummarize = async () => { + // 유효성 검사 + const emptyMessages = messages.filter(msg => !msg.message.trim()); + if (emptyMessages.length > 0) { + toast.error("모든 메시지를 입력해주세요."); + return; + } + + setIsLoading(true); + try { + // 토큰 가져오기 + const tokenResponse = await fetch('https://pyheroku-d21d18e4f257.herokuapp.com/api/getToken', { + method: 'POST' + }); + + if (!tokenResponse.ok) { + throw new Error('토큰을 가져오는데 실패했습니다.'); + } + + const tokenData = await tokenResponse.json(); + const accessToken = tokenData.access_token; + + if (!accessToken) { + throw new Error('토큰이 없습니다.'); + } + + // 요약 API 호출 + const summaryResponse = await fetch(`https://connect-flow-8014--ps.sandbox.my.salesforce.com/services/apexrest/summarizeChat/`, { + method: 'POST', + headers: { + 'Authorization': `Bearer ${accessToken}`, + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + chatlog: JSON.stringify(messages.map(msg => ({ + sender: msg.sender, + message: msg.message + }))) + }) + }); + + if (!summaryResponse.ok) { + throw new Error(`API 호출 실패: ${summaryResponse.status}`); + } + + const result = await summaryResponse.json(); + setSummaryResult(result); + toast.success("요약이 완료되었습니다."); + } catch (error) { + console.error('요약 API 호출 실패:', error); + toast.error(`요약 중 오류가 발생했습니다: ${error instanceof Error ? error.message : '알 수 없는 오류'}`); + } finally { + setIsLoading(false); + } + }; + + return ( + <div className="container mx-auto py-8 space-y-6"> + <div className="text-center space-y-2"> + <h1 className="text-3xl font-bold">AgentForce POC 요약 테스트</h1> + <p className="text-muted-foreground"> + 대화 기록을 입력하고 AI 요약 기능을 테스트해보세요 + </p> + </div> + + <div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> + {/* 입력 섹션 */} + <Card> + <CardHeader> + <CardTitle className="flex items-center justify-between"> + 대화 기록 입력 + <Button onClick={addMessage} size="sm" variant="outline"> + <Plus className="h-4 w-4 mr-2" /> + 메시지 추가 + </Button> + </CardTitle> + </CardHeader> + <CardContent className="space-y-4"> + {messages.map((message, index) => ( + <div key={message.id} className="space-y-2 p-4 border rounded-lg"> + <div className="flex items-center justify-between"> + <div className="flex items-center gap-2"> + <Badge variant={message.sender === "SHI" ? "default" : "secondary"}> + {message.sender} + </Badge> + <span className="text-sm text-muted-foreground">메시지 {index + 1}</span> + </div> + <Button + onClick={() => removeMessage(message.id)} + size="sm" + variant="ghost" + className="text-red-500 hover:text-red-700" + > + <Trash2 className="h-4 w-4" /> + </Button> + </div> + + <div className="space-y-2"> + <div className="flex gap-2"> + <Button + size="sm" + variant={message.sender === "SHI" ? "default" : "outline"} + onClick={() => updateMessage(message.id, "sender", "SHI")} + > + SHI + </Button> + <Button + size="sm" + variant={message.sender === "Partner" ? "default" : "outline"} + onClick={() => updateMessage(message.id, "sender", "Partner")} + > + Partner + </Button> + </div> + + <Textarea + value={message.message} + onChange={(e) => updateMessage(message.id, "message", e.target.value)} + placeholder="메시지를 입력하세요..." + className="min-h-20" + /> + </div> + </div> + ))} + + <Button + onClick={handleSummarize} + disabled={isLoading} + className="w-full" + > + {isLoading ? ( + <> + <Loader2 className="h-4 w-4 mr-2 animate-spin" /> + 요약 중... + </> + ) : ( + <> + <Send className="h-4 w-4 mr-2" /> + 요약하기 + </> + )} + </Button> + </CardContent> + </Card> + + {/* 결과 섹션 */} + <Card> + <CardHeader> + <CardTitle>요약 결과</CardTitle> + </CardHeader> + <CardContent className="space-y-4"> + {summaryResult ? ( + <div className="space-y-4"> + <div className="space-y-2"> + <h4 className="font-semibold text-sm text-muted-foreground">이슈</h4> + <div className="p-3 bg-muted rounded-md"> + {summaryResult.issue} + </div> + </div> + + <div className="space-y-2"> + <h4 className="font-semibold text-sm text-muted-foreground">요청</h4> + <div className="p-3 bg-muted rounded-md"> + {summaryResult.request} + </div> + </div> + + <div className="space-y-2"> + <h4 className="font-semibold text-sm text-muted-foreground">요약 메시지</h4> + <div className="p-3 bg-muted rounded-md"> + {summaryResult.summary} + </div> + </div> + </div> + ) : ( + <div className="text-center py-8 text-muted-foreground"> + <Send className="h-12 w-12 mx-auto mb-4 opacity-50" /> + <p>요약하기 버튼을 클릭하여 결과를 확인하세요</p> + </div> + )} + </CardContent> + </Card> + </div> + + {/* 미리보기 섹션 */} + <Card> + <CardHeader> + <CardTitle>API 요청 미리보기</CardTitle> + </CardHeader> + <CardContent> + <div className="space-y-4"> + <div> + <h4 className="font-semibold text-sm text-muted-foreground mb-2">Request Body</h4> + <pre className="bg-muted p-4 rounded-md text-sm overflow-x-auto"> + {JSON.stringify({ + conversation: JSON.stringify(messages.map(msg => ({ + sender: msg.sender, + message: msg.message + }))) + }, null, 2)} + </pre> + </div> + + {/* <div> + <h4 className="font-semibold text-sm text-muted-foreground mb-2">Headers</h4> + <pre className="bg-muted p-4 rounded-md text-sm overflow-x-auto"> + {JSON.stringify({ + 'Authorization': 'Bearer {access_token}', + 'Content-Type': 'application/json' + }, null, 2)} + </pre> + </div> */} + </div> + </CardContent> + </Card> + </div> + ); +} |