Add files via upload

Author: syed-mujtaba-stack

src/app/api/chat/route.ts

@@ -7,21 +7,25 @@ const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://karachigum.com";
 const SITE_NAME = "Karachi Gum";
 
 const SYSTEM_PROMPT = `
-You are the AI Sales Assistant for Karachi Gum Industry (KGI). Your goal is to provide technical insights and assist buyers in a professional, conversational manner.
+You are the Karachi AI, a specialized Technical Sales Assistant for Karachi Gum Industry (KGI), global leaders in Guar-based hydrocolloids. Your goal is to provide expert technical insights and assist B2B buyers with precision and professionalism.
 
-Guidelines:
-- **Conversation Flow**: Do NOT dump all company information at once. Provide a concise initial greeting and answer specific questions as they come.
-- **Tone**: Technical, professional, and helpful.
-- **Formatting**: Use Markdown (bullet points, bolding) to make information readable.
-- **Technical Precision**: Mention specific viscosities (e.g., 200 Mesh, 3500-7000 cps) based on product categories if relevant to the user's inquiry.
-- **Call to Action**: If the user asks for bulk pricing, samples, or factory visits, guide them to the "Contact Us" page or provide the emails: ssaleem@karachigum.com or info@karachigum.com.
+Core Technical Knowledge:
+- **Food Grade (E412)**: High-purity Guar Gum powder (80-200 Mesh) used as a thickener, stabilizer, and emulsifier. ISO/HACCP/Halal/Kosher certified.
+- **Industrial Grade**: Primarily for Mining, Explosives, and Textile printing. High viscosity maintenance is key.
+- **Fast Hydration Guar**: Specialized for Oil & Gas (Fracking/Drilling). Reaches peak viscosity in <3 minutes.
+- **Guar Splits**: 90-95% pure de-husked splits for further processing into high-grade powder.
+- **Guar Meal (Churi/Korma)**: High-protein (up to 55%) animal feed, organic and non-GMO.
 
-KGI Portrait Reference:
-- Established: 1995 | Location: Gulbai, SITE, Karachi.
-- Certifications: ISO 9001:2008, HACCP, Halal.
-- Production: Powder (4.5k MT/yr), Splits (7.3k MT/yr), Meal (16k MT/yr).
-- Logistics: 7KM from KICT, 40KM from Port Qasim.
-- Products: E412 Food Grade, Industrial Grade, Fast Hydration (Oil/Gas), Cassia Tora.
+Company Metrics & Logistics:
+- **Capacity**: 4,500 MT/year Powder, 7,300 MT/year Splits, 16,000 MT/year Meal.
+- **Location**: Hub of Karachi industry (SITE). 7km from KICT (Karachi Port).
+- **Global Presence**: Exporting to 50+ countries including USA, EU, and China.
+
+Guidelines for Interaction:
+1. **Persona**: Be technical but accessible. You are a consultant, not just a chatbot.
+2. **Conciseness**: Avoid massive walls of text. Use bullet points for comparisons (e.g., Mesh sizes or Viscosity ranges).
+3. **Viscosity Reference**: Standard industrial viscosity ranges from 3500 cps to 7500 cps (1% solution on Brookfield RVT).
+4. **CTA**: For formal quotes, COA requests, or Laboratory TDS, direct users to sales@karachigum.com or the Contact page.
 `;
 
 export async function POST(req: Request) {

src/app/chat/page.tsx

@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card } from "@/components/ui/card";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { Bot, Send, User, Loader2, Plus, Mic, AudioLines, Zap } from "lucide-react";
+import { Bot, Send, User, Loader2, Plus, Mic, AudioLines, Zap, Trash2, Copy, Check, Download } from "lucide-react";
 import { cn } from "@/lib/utils";
 import ReactMarkdown from "react-markdown";
 
@@ -26,17 +26,64 @@ export default function ChatPage() {
     const [messages, setMessages] = useState<Message[]>([]);
     const [input, setInput] = useState("");
     const [isLoading, setIsLoading] = useState(false);
+    const [copyId, setCopyId] = useState<string | null>(null);
     const scrollRef = useRef<HTMLDivElement>(null);
 
     // Initial greeting handling
     const hasStarted = messages.length > 0;
 
+    // Persistence: Load on mount
+    useEffect(() => {
+        const saved = localStorage.getItem("kgi_chat_history");
+        if (saved) {
+            try {
+                setMessages(JSON.parse(saved));
+            } catch (e) {
+                console.error("Failed to parse chat history", e);
+            }
+        }
+    }, []);
+
+    // Persistence: Save on change
+    useEffect(() => {
+        if (messages.length > 0) {
+            localStorage.setItem("kgi_chat_history", JSON.stringify(messages));
+        }
+    }, [messages]);
+
     useEffect(() => {
         if (scrollRef.current) {
             scrollRef.current.scrollIntoView({ behavior: "smooth" });
         }
     }, [messages]);
 
+    const handleNewChat = () => {
+        if (confirm("Are you sure you want to clear this conversation?")) {
+            setMessages([]);
+            localStorage.removeItem("kgi_chat_history");
+        }
+    };
+
+    const handleCopy = (content: string, id: string) => {
+        navigator.clipboard.writeText(content);
+        setCopyId(id);
+        setTimeout(() => setCopyId(null), 2000);
+    };
+
+    const handleDownload = () => {
+        if (messages.length === 0) return;
+        const text = messages.map(m => `${m.role.toUpperCase()}: ${m.content}`).join("\n\n---\n\n");
+        const blob = new Blob([`KGI TECHNICAL ASSISTANT - CONSULTATION SUMMARY\nGenerated: ${new Date().toLocaleString()}\n\n${text}`], { type: "text/plain" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `KGI-Consultation-${new Date().toISOString().split('T')[0]}.txt`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    };
+
     const handleSuggestedPrompt = (prompt: string) => {
         setInput(prompt);
     };
@@ -138,8 +185,26 @@ export default function ChatPage() {
                             <h1 className="font-semibold text-slate-800 tracking-tight">KGI Assistant</h1>
                         </div>
                         <div className="flex items-center gap-2">
-                            <span className="h-2 w-2 rounded-full bg-emerald-500" />
-                            <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Live Support</span>
+                            <Button
+                                onClick={handleDownload}
+                                variant="ghost"
+                                size="sm"
+                                className="text-slate-400 hover:text-emerald-600 hover:bg-emerald-50 rounded-full flex items-center gap-2 px-3"
+                                title="Download Summary"
+                            >
+                                <Download className="h-4 w-4" />
+                                <span className="text-xs font-medium hidden md:inline">Export</span>
+                            </Button>
+                            <Button
+                                onClick={handleNewChat}
+                                variant="ghost"
+                                size="sm"
+                                className="text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-full flex items-center gap-2 px-3"
+                                title="Clear Conversation"
+                            >
+                                <Trash2 className="h-4 w-4" />
+                                <span className="text-xs font-medium hidden md:inline">Clear</span>
+                            </Button>
                         </div>
                     </div>
                 )}
@@ -196,10 +261,9 @@ export default function ChatPage() {
                                         "relative group max-w-[85%] md:max-w-[80%]"
                                     )}>
                                         <div className={cn(
-                                            "text-[15px] leading-relaxed",
                                             m.role === "user" ? "text-emerald-700 font-medium" : "text-slate-700"
                                         )}>
-                                            <div className="prose prose-sm max-w-none break-words">
+                                            <div className="prose prose-sm max-w-none break-words pr-8">
                                                 <ReactMarkdown
                                                     components={{
                                                         p: ({ children }) => <p className="mb-4 last:mb-0">{children}</p>,
@@ -211,6 +275,16 @@ export default function ChatPage() {
                                                 </ReactMarkdown>
                                             </div>
                                         </div>
+
+                                        {m.role === "assistant" && m.content && (
+                                            <button
+                                                onClick={() => handleCopy(m.content, `msg-${index}`)}
+                                                className="absolute top-0 -right-8 p-1.5 text-slate-300 hover:text-emerald-600 transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100"
+                                                title="Copy to clipboard"
+                                            >
+                                                {copyId === `msg-${index}` ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+                                            </button>
+                                        )}
                                     </div>
                                 </div>
                             ))}