connected telegram and added all features of webapp to telegram. user can now link and use it through telegram

Author: MPK2004

src/components/QuickActions.tsx

@@ -1,15 +1,16 @@
 import { useState, useRef, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { Plus, Mic, Image, MessageSquare } from "lucide-react";
+import { Plus, Mic, Image, MessageSquare, Send } from "lucide-react";
 
 interface QuickActionsProps {
   onAddEvent: () => void;
   onVoiceClick: () => void;
   onImageClick: () => void;
   onTextClick: () => void;
+  onTelegramClick: () => void;
 }
 
-const QuickActions = ({ onAddEvent, onVoiceClick, onImageClick, onTextClick }: QuickActionsProps) => {
+const QuickActions = ({ onAddEvent, onVoiceClick, onImageClick, onTextClick, onTelegramClick }: QuickActionsProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
 
@@ -41,6 +42,14 @@ const QuickActions = ({ onAddEvent, onVoiceClick, onImageClick, onTextClick }: Q
           >
             <MessageSquare className="h-6 w-6 text-primary" />
           </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="rounded-full shadow-md w-14 h-14 bg-background"
+            onClick={() => { setIsOpen(false); onTelegramClick(); }}
+          >
+            <Send className="h-6 w-6 text-primary" />
+          </Button>
           <Button
             variant="outline"
             size="icon"

src/components/TelegramLinkingDialog.tsx

@@ -0,0 +1,162 @@
+import { useState, useEffect } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { supabase } from "@/integrations/supabase/client";
+import { Send, CheckCircle, RefreshCw, Copy, Plus } from "lucide-react";
+import { toast } from "sonner";
+
+interface TelegramLinkingDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const TelegramLinkingDialog = ({ isOpen, onClose }: TelegramLinkingDialogProps) => {
+  const [loading, setLoading] = useState(false);
+  const [profile, setProfile] = useState<any>(null);
+  const [generating, setGenerating] = useState(false);
+
+  const fetchProfile = async () => {
+    setLoading(true);
+    const { data: { user } } = await supabase.auth.getUser();
+    if (user) {
+      const { data, error } = await supabase
+        .from('profiles')
+        .select('*')
+        .eq('id', user.id)
+        .single();
+      
+      if (data) {
+        setProfile(data);
+      } else if (error && error.code === 'PGRST116') { // No rows found
+        // Create a default profile if it doesn't exist
+        const defaultUsername = user.email?.split('@')[0] || "user_" + user.id.slice(0, 5);
+        const { data: newProfile, error: insertError } = await supabase
+          .from('profiles')
+          .insert({ id: user.id, username: defaultUsername })
+          .select()
+          .single();
+        
+        if (newProfile) {
+          setProfile(newProfile);
+        } else if (insertError) {
+          console.error("Error creating profile:", insertError);
+        }
+      }
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchProfile();
+    }
+  }, [isOpen]);
+
+  const generateCode = async () => {
+    setGenerating(true);
+    const code = Math.random().toString(36).substring(2, 8).toUpperCase();
+    const { data: { user } } = await supabase.auth.getUser();
+    
+    if (user) {
+      const { error } = await supabase
+        .from('profiles')
+        .update({ link_code: code })
+        .eq('id', user.id);
+      
+      if (error) {
+        toast.error("Failed to generate code: " + error.message);
+      } else {
+        setProfile({ ...profile, link_code: code });
+        toast.success("New linking code generated!");
+      }
+    }
+    setGenerating(false);
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    toast.success("Code copied to clipboard!");
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-width-[425px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Send className="h-5 w-5 text-sky-500" />
+            Link Telegram Bot
+          </DialogTitle>
+          <DialogDescription>
+            Connect your account to the Maantis Telegram bot to schedule events via chat, voice, or photos.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-6 flex flex-col items-center gap-6">
+          {loading ? (
+            <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
+          ) : !profile ? (
+            <div className="flex flex-col items-center gap-2 text-center">
+              <Plus className="h-12 w-12 text-muted-foreground" />
+              <h3 className="font-semibold text-lg">Login Required</h3>
+              <p className="text-sm text-muted-foreground">
+                Please sign in to your account to link Telegram.
+              </p>
+            </div>
+          ) : profile?.telegram_chat_id ? (
+            <div className="flex flex-col items-center gap-2 text-center">
+              <CheckCircle className="h-12 w-12 text-green-500" />
+              <h3 className="font-semibold text-lg">Connected!</h3>
+              <p className="text-sm text-muted-foreground">
+                Your account is successfully linked to Telegram.
+              </p>
+            </div>
+          ) : (
+            <div className="w-full space-y-4">
+              <div className="bg-red-50 border border-red-100 p-3 rounded text-xs text-red-600 font-medium">
+                ⚠️ IMPORTANT: Do NOT send your email to the bot. Use the generated code below.
+              </div>
+              
+              <div className="bg-muted p-4 rounded-lg flex flex-col items-center gap-3">
+                <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Your Linking Code</span>
+                {profile?.link_code ? (
+                  <div className="flex items-center gap-3 bg-background border rounded-md px-4 py-2 w-full justify-between">
+                    <span className="font-mono text-2xl font-bold tracking-widest">{profile.link_code}</span>
+                    <Button variant="ghost" size="icon" onClick={() => copyToClipboard(`/link ${profile.link_code}`)}>
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                  </div>
+                ) : (
+                  <span className="text-sm italic text-muted-foreground">No code generated yet</span>
+                )}
+                <Button 
+                  variant="outline" 
+                  size="sm" 
+                  onClick={generateCode} 
+                  disabled={generating}
+                  className="w-full"
+                >
+                  {generating ? "Generating..." : profile?.link_code ? "Regenerate Code" : "Generate Code"}
+                </Button>
+              </div>
+
+              <div className="space-y-3">
+                <h4 className="text-sm font-semibold">How to link:</h4>
+                <ol className="text-sm space-y-2 list-decimal list-inside text-muted-foreground">
+                  <li>Open the <a href="https://t.me/maantis_bot" target="_blank" className="text-primary hover:underline">Maantis Bot</a> on Telegram.</li>
+                  <li>Click **Start** or type **/start**.</li>
+                  <li>Send your linking code: <code className="bg-muted px-1 rounded">/link {profile?.link_code || "XXXXXX"}</code></li>
+                </ol>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button onClick={onClose} variant="secondary">Close</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TelegramLinkingDialog;

src/integrations/supabase/types.ts

@@ -50,16 +50,25 @@ export type Database = {
           created_at: string
           id: string
           username: string
+          telegram_chat_id: number | null
+          link_code: string | null
+          last_event_id: string | null
         }
         Insert: {
           created_at?: string
           id: string
           username: string
+          telegram_chat_id?: number | null
+          link_code?: string | null
+          last_event_id?: string | null
         }
         Update: {
           created_at?: string
           id?: string
           username?: string
+          telegram_chat_id?: number | null
+          link_code?: string | null
+          last_event_id?: string | null
         }
         Relationships: []
       }

src/pages/Index.tsx

@@ -9,6 +9,7 @@ import TextInputDialog from "@/components/TextInputDialog";
 import VoiceInputDialog from "@/components/VoiceInputDialog";
 import ImageUploadDialog from "@/components/ImageUploadDialog";
 import DeleteRecurringDialog from "@/components/DeleteRecurringDialog";
+import TelegramLinkingDialog from "@/components/TelegramLinkingDialog";
 import { Event } from "@/types/event";
 import { ParsedEvent } from "@/lib/ai";
 import { isEventOnDate } from "@/lib/dateUtils";
@@ -26,6 +27,7 @@ const Index = () => {
   const [isTextInputOpen, setIsTextInputOpen] = useState(false);
   const [isVoiceInputOpen, setIsVoiceInputOpen] = useState(false);
   const [isImageUploadOpen, setIsImageUploadOpen] = useState(false);
+  const [isTelegramLinkingOpen, setIsTelegramLinkingOpen] = useState(false);
   const [aiInitialData, setAiInitialData] = useState<Partial<Event> | undefined>(undefined);
   const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
   const [eventToDelete, setEventToDelete] = useState<{ event: Event; targetDateStr: string } | null>(null);
@@ -237,6 +239,12 @@ const Index = () => {
           onVoiceClick={() => setIsVoiceInputOpen(true)}
           onImageClick={() => setIsImageUploadOpen(true)}
           onTextClick={() => setIsTextInputOpen(true)}
+          onTelegramClick={() => setIsTelegramLinkingOpen(true)}
+        />
+
+        <TelegramLinkingDialog
+          isOpen={isTelegramLinkingOpen}
+          onClose={() => setIsTelegramLinkingOpen(false)}
         />
 
         <AddEventDialog

supabase/functions/analyze-event/index.ts

@@ -49,27 +49,41 @@ serve(async (req) => {
       throw new Error("No text provided or extracted");
     }
 
-    // Help the LLM calculate Days by actively identifying the current weekday
     const todayDateObj = new Date(todayStr + "T12:00:00Z");
     const todayDayOfWeek = todayDateObj.toLocaleDateString('en-US', { weekday: 'long' });
     const fullTodayContext = `${todayStr} (${todayDayOfWeek})`;
 
     const systemPrompt = `
-You are an expert scheduling assistant. Your ONLY job is to extract event details and output an EXACT, valid JSON object.
-Context Information: Today's local date is ${fullTodayContext}. 
-
-Use EXACTLY these keys and formats:
-- "thought_process": (string) Step 1: Identify the base reference date. Step 2: Apply any math for relative words (e.g., "previous day", "2 months prior"). Step 3: State the exact resulting calendar day (e.g. "13th May", "March 24th").
-- "title": (string) A short, clean event title.
-- "date_reference": (string) The final absolute calendar date resolved from your thought process. Drop all relational words. (e.g., replace "previous day of 14th May" with strictly "13th May". Replace "next 4 thursdays" with strictly "next thursday"). If no date, return null.
-- "description": (string) Clean summary. Remove any junk OCR characters, menus, random symbols. Return "" if none.
-- "category": (string) Best match: "work", "personal", "family", "health", "social", or "".
-- "recurrence": (string) Base options: "none", "daily", "weekly", "monthly", "yearly". If the user explicitly gives an ending date/duration (like "for 2 months"), try to calculate the end date and append it using ";until=YYYY-MM-DD". Example: "weekly;until=2026-05-18". Default to "none".
-
-Return ONLY JSON. Do not add any text before or after the JSON.
+You are an expert scheduling assistant. Today is ${fullTodayContext}.
+
+CRITICAL: Many users want REMINDERS BEFORE an event or deadline. You MUST separate the anchor date from any offset.
+
+Examples:
+- "appointment on 21st, remind 3 days before" → event_date_reference: "21st", offset_days: -3
+- "project due May 15, remind a week early" → event_date_reference: "May 15", offset_days: -7 
+- "birthday on April 29, arrange money a month before" → event_date_reference: "April 29", offset_days: -30
+- "meeting next Friday" → event_date_reference: "next Friday", offset_days: 0
+- "gym tomorrow at 6pm" → event_date_reference: "tomorrow", offset_days: 0
+
+Return ONLY this JSON:
+{
+  "thought_process": "Step-by-step reasoning about the anchor date and any offset",
+  "title": "Short clean event title",
+  "event_date_reference": "The anchor/base date as text (e.g., '21st', 'next Friday', 'May 15')",
+  "offset_days": 0,
+  "time": "HH:MM or null",
+  "description": "Clean description or empty string",
+  "category": "work|personal|family|health|social or empty",
+  "recurrence": "none|daily|weekly|monthly|yearly or with until like weekly;until=YYYY-MM-DD"
+}
+
+Rules:
+- offset_days is NEGATIVE for "before/prior/early/earlier" and POSITIVE for "after/later". Default 0.
+- event_date_reference is the ANCHOR date — the event/deadline/birthday itself.
+- The title should describe the REMINDER/ACTION, not just the anchor (e.g., "Arrange money for birthday" not "Birthday").
 `;
 
-    const userPrompt = "Extract event details from this text:\\n" + textToParse;
+    const userPrompt = "Extract event details from this text:\n" + textToParse;
 
     const completion = await groq.chat.completions.create({
       messages: [
@@ -84,8 +98,18 @@ Return ONLY JSON. Do not add any text before or after the JSON.
     const jsonString = completion.choices[0]?.message?.content || "{}";
     const parsed = JSON.parse(jsonString);
 
-    // Deep deterministic NLP Date extraction based on the LLM's mathematically translated phrase
-    if (parsed.date_reference) {
+    // Deterministic date arithmetic
+    if (parsed.event_date_reference) {
+      const anchorDate = chrono.parseDate(parsed.event_date_reference, todayDateObj, { forwardDate: true });
+      if (anchorDate) {
+        const offset = parseInt(parsed.offset_days) || 0;
+        const finalDate = new Date(anchorDate);
+        finalDate.setDate(finalDate.getDate() + offset);
+        parsed.date = finalDate.toISOString().split('T')[0];
+      }
+    }
+    // Fallback: legacy date_reference field
+    if (!parsed.date && parsed.date_reference) {
       const resultDate = chrono.parseDate(parsed.date_reference, todayDateObj, { forwardDate: true });
       if (resultDate) {
         parsed.date = resultDate.toISOString().split('T')[0];