Blur Badges

app.py

@@ -110,42 +110,36 @@ async def set_starters():
     return [
         cl.Starter(
             label="Example en Français",
-            message="""Jean-Marc Durand, né le 14 avril 1987 à Lyon (69003), de nationalité française, est un ingénieur informatique marié à Sophie Martin depuis le 22 juin 2013. Il réside actuellement au 27 avenue des Lilas, appartement 42, 75019 Paris, France. Son numéro de téléphone personnel est le +33 6 48 72 19 05, son numéro de téléphone fixe est le 01 44 62 98 31, et son adresse e-mail principale est jeanmarc.durand1987@gmail.com
-. Il utilise également l’adresse professionnelle j.durand@techsoluce.fr
-.
+            message="""Jean-Marc Durand, né le 14 avril 1987 à Lyon (69003), de nationalité française, est un ingénieur informatique marié à Sophie Martin depuis le 22 juin 2013. Il réside actuellement au 27 avenue des Lilas, appartement 42, 75019 Paris, France. Son numéro de téléphone personnel est le +33 6 48 72 19 05, son numéro de téléphone fixe est le 01 44 62 98 31, et son adresse e-mail principale est jeanmarc.durand1987@gmail.com. Il utilise également l’adresse professionnelle j.durand@techsoluce.fr.
 Reformule ce texte""",
         ),
 
         cl.Starter(
             label="Example en Anglais",
             message="""Michael Andrew Thompson, born on September 18, 1985, in Boston, Massachusetts (02118), USA, is a U.S. citizen currently living at 742 Evergreen Terrace, Apartment 5B, Brooklyn, New York, NY 11221. His mobile phone number is +1 (917) 555-3849, his home phone is +1 (718) 555-9021, and his primary email address is michael.thompson1985@gmail.com
-, while his work email is m.thompson@fintechcore.com
-. His Social Security Number is 123-45-6789, and his passport number is XK4598721, issued on March 12, 2018, expiring on March 11, 2028.
+, while his work email is m.thompson@fintechcore.com. His Social Security Number is 123-45-6789, and his passport number is XK4598721, issued on March 12, 2018, expiring on March 11, 2028.
 
-etabli une mise en demeure pour la personne concerné dans ce texte 
+etabli une mise en demeure pour la personne concerné dans ce texte.
 """,
         ),
         cl.Starter(
             label="Example en Italien",
             message="""Marco Alessandro Bianchi, nato il 12 febbraio 1989 a Milano (MI), Italia, è un cittadino italiano residente in Via Giuseppe Verdi 18, interno 7, 00198 Roma. Il suo numero di telefono cellulare è +39 347 582 9146, il telefono fisso è 06 8392 4751, e il suo indirizzo email personale è marco.bianchi1989@gmail.com
-, mentre quello professionale è m.bianchi@italtechsolutions.it
-. Il suo codice fiscale è BNCMRC89B12F205X e il numero di passaporto è YA3487291, rilasciato il 5 maggio 2019 con scadenza il 4 maggio 2029.
+, mentre quello professionale è m.bianchi@italtechsolutions.it . Il suo codice fiscale è BNCMRC89B12F205X e il numero di passaporto è YA3487291, rilasciato il 5 maggio 2019 con scadenza il 4 maggio 2029.
 
 Extrait les information sous forme de tableau""",
         ),
         cl.Starter(
             label="Example en Espagnol",
             message="""Carlos Javier Hernández López, nacido el 7 de julio de 1986 en Madrid (28015), España, es ciudadano español y reside en Calle Alcalá 233, piso 4ºB, 28028 Madrid. Su número de teléfono móvil es +34 612 845 739, el teléfono fijo es 91 458 2391, y su correo electrónico personal es carlos.hernandez1986@gmail.com
-, mientras que el correo corporativo es c.hernandez@iberdata.es
-. Su DNI es 48739215-M, y su número de pasaporte es PA7349821, expedido el 15 de abril de 2019 y válido hasta el 14 de abril de 2029.
+, mientras que el correo corporativo es c.hernandez@iberdata.es . Su DNI es 48739215-M, y su número de pasaporte es PA7349821, expedido el 15 de abril de 2019 y válido hasta el 14 de abril de 2029.
 
 Quelle est la personne concerné dans ce texte""",
         ),
         cl.Starter(
             label="Example en Allemand",
             message="""Thomas Michael Schneider, geboren am 3. November 1984 in Hamburg (22085), Deutschland, ist deutscher Staatsbürger und wohnhaft in der Musterstraße 47, Wohnung 12, 80336 München. Seine Mobiltelefonnummer lautet +49 176 8345 2197, die Festnetznummer ist 089 4578 9321, und seine private E-Mail-Adresse ist thomas.schneider1984@gmail.com
-, während er beruflich unter t.schneider@datafusion.de
- erreichbar ist. Seine Steuer-Identifikationsnummer lautet 12 345 678 901, und seine Reisepassnummer ist C4X982731, ausgestellt am 22. August 2018, gültig bis 21. August 2028.
+, während er beruflich unter t.schneider@datafusion.de erreichbar ist. Seine Steuer-Identifikationsnummer lautet 12 345 678 901, und seine Reisepassnummer ist C4X982731, ausgestellt am 22. August 2018, gültig bis 21. August 2028.
  
  Resume moi le texte""",
         )
@@ -238,6 +232,17 @@ async def format_document(pathfile, anonymized_text):
 
 @cl.on_chat_start
 async def start_chat():
+#     pii_map = cl.user_session.get("pii_map", {})
+#     reverse_map = cl.user_session.get("reverse_pii_map", {})
+#     text = """Thomas Michael Schneider, geboren am 3. November 1984 in Hamburg (22085), Deutschland, ist deutscher Staatsbürger und wohnhaft in der Musterstraße 47, Wohnung 12, 80336 München. Seine Mobiltelefonnummer lautet +49 176 8345 2197, die Festnetznummer ist 089 4578 9321, und seine private E-Mail-Adresse ist thomas.schneider1984@gmail.com
+# , während er beruflich unter t.schneider@datafusion.de erreichbar ist. Seine Steuer-Identifikationsnummer lautet 12 345 678 901, und seine Reisepassnummer ist C4X982731, ausgestellt am 22. August 2018, gültig bis 21. August 2028.
+ 
+#  Resume moi le texte"""
+#     text_processed = await pii_gliner(text)
+#     text_sanitized, updated_map, reverse_map = pii_format(text_processed, pii_map, reverse_map)
+
+#     element = cl.CustomElement(name="UserMessage", props={"message": text_sanitized, "dic": reverse_map, "original": text, 'author':'user'})
+#     await cl.Message("", elements=[element]).send()
     return
 
 client = Groq()
@@ -422,6 +427,7 @@ async def start_message(message: cl.Message):
     await cl.Message("", elements=[element]).send()
     # await message.remove()
 
+     
     cl.user_session.set("pii_map", updated_map)
     cl.user_session.set("reverse_pii_map", reverse_map)
     

public/elements/UserMessage.jsx

@@ -62,10 +62,122 @@ function parseTable(lines, startIndex) {
 }
 
 export function Markdown({ children, dic, show }) {
+    const [localMessage, setLocalMessage] = useState(children);
+    const [open, setOpen] = useState(false);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [selectionData, setSelectionData] = useState(null);
     const lines = children.split("\n")
     const elements = []
     let i = 0
 
+    const handleMouseUp = () => {
+
+        const selection = window.getSelection();
+
+        // 1. Check basic validity
+        if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+            // If just a click (collapsed), we assume menu shouldn't open or should close
+            // But we don't want to close immediately if clicking inside the menu, handled by DropdownMenu logic
+            return;
+        }
+
+        // 2. Expand Selection to Word Boundaries
+        const anchorNode = selection.anchorNode;
+        const focusNode = selection.focusNode;
+
+        // Only support single text node selection for simplicity to map back to data-index
+        if (anchorNode !== focusNode || anchorNode.nodeType !== 3) {
+            setOpen(false);
+            return;
+        }
+
+        const textContent = anchorNode.textContent;
+        let start = Math.min(selection.anchorOffset, selection.focusOffset);
+        let end = Math.max(selection.anchorOffset, selection.focusOffset);
+
+        // Expand left
+        while (start > 0 && /\S/.test(textContent[start - 1])) {
+            start--;
+        }
+        // Expand right
+        while (end < textContent.length && /\S/.test(textContent[end])) {
+            end++;
+        }
+
+        // Update visual selection
+        const newRange = document.createRange();
+        newRange.setStart(anchorNode, start);
+        newRange.setEnd(anchorNode, end);
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+
+
+        const newText = textContent.slice(start, end);
+        if (!newText.trim()) return;
+
+        // 3. Validation Logic
+        // Check 1: Less than 4 words
+        const words = newText.split(/\s+/);
+        if (words.length >= 4) {
+            setOpen(false);
+            return;
+        }
+
+        // Check 2: Does not contain highlighted word (brackets)
+        if (newText.includes('[') || newText.includes(']')) {
+            setOpen(false);
+            return;
+        }
+
+        // Check 3: Check if selection is inside a Badge
+        const parentElement = anchorNode.parentElement;
+        if (parentElement.closest('.bg-pii')) {
+            setOpen(false);
+            return;
+        }
+
+        // Identify Part Index
+        const partIndex = parseInt(parentElement.getAttribute('data-index'), 10);
+        // if (isNaN(partIndex)) {
+        //     setOpen(false);
+        //     return;
+        // }
+
+        const rect = newRange.getBoundingClientRect();
+        setPosition({
+            x: rect.left,
+            y: rect.bottom
+        });
+        setSelectionData({
+            partIndex,
+            start,
+            end,
+            text: newText
+        });
+        setOpen(true);
+    };
+
+    const handleAnonymize = () => {
+        if (!selectionData) return;
+        const { partIndex, start, end, text } = selectionData;
+
+        // Split by brackets to reconstruct parts array as seen in render
+        const parts = localMessage.split(/(\[[^\]]+\])/g);
+
+        if (parts[partIndex] === undefined) return;
+
+        const originalPart = parts[partIndex];
+        const newPart = originalPart.substring(0, start) + `[ANONYME_${text}]` + originalPart.substring(end);
+
+        parts[partIndex] = newPart;
+        const newMessage = parts.join('');
+
+        setLocalMessage(newMessage);
+        setOpen(false);
+        // Clear selection
+        window.getSelection().removeAllRanges();
+    };
+
     while (i < lines.length) {
         const line = lines[i]
 
@@ -133,7 +245,36 @@ export function Markdown({ children, dic, show }) {
         i++
     }
 
-    return <div>{elements}</div>
+    return (
+        <div onMouseUp={handleMouseUp}>
+            <div className="relative bg-accent rounded-3xl px-5 py-2.5 user-message flex-grow-0">
+                <p className="leading-[1.75] whitespace-pre-wrap">{elements}</p>
+
+                <DropdownMenu open={open} onOpenChange={setOpen}>
+                    <DropdownMenuTrigger asChild>
+                        <div
+                            style={{
+                                position: 'fixed',
+                                top: position.y,
+                                left: position.x,
+                                width: '1px',
+                                height: '1px',
+                                visibility: 'hidden',
+                                pointerEvents: 'none'
+                            }}
+                        />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start">
+                        <DropdownMenuGroup>
+                            <DropdownMenuItem onSelect={handleAnonymize}>
+                                Anonymiser
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+        </div>
+    )
 }
 
 function parseInlineText(text) {
@@ -206,14 +347,21 @@ function renderInline(text, dic, show) {
             ) : (
                 <Tooltip key={index}>
                     <TooltipTrigger asChild>
-                        <span className="bg-pii px-1 rounded cursor-pointer">
-                            {part.toUpperCase()}
-                        </span>
+                        <Badge
+                            key={index}
+                            className="bg-pii text-blue-800 rounded-full px-2 py-1 mx-1 blur-sm"
+                        >
+                            {dic[match[2]].value}
+                        </Badge>
+                        {/* <span className="bg-pii px-1 rounded cursor-pointer blur-sm">
+                            {/* {part.toUpperCase()} */}
+                        {/* {dic[match[2]].value} */}
+                        {/* </span> */}
                     </TooltipTrigger>
                     <TooltipContent>
                         <p>{dic[match[2]].value}</p>
                     </TooltipContent>
-                </Tooltip>
+                </Tooltip >
             )
         }
 
@@ -375,31 +523,7 @@ function MessageWithHighlight({ message, dic, show }) {
     return (
         <div className='flex flex-row-reverse w-full'>
             <div onMouseUp={handleMouseUp} className="relative bg-accent rounded-3xl px-5 py-2.5 user-message flex-grow-0">
-                <p className="leading-[1.75] whitespace-pre-wrap">
-                    {parts.map((part, index) => {
-                        // Check if part is [something]
-                        const match = part.match(/^\[(\w+)_(.*?)\]$/);
-
-                        if (match && dic[match[2]]) {
-                            return (
-                                show ? <Badge key={index} className="bg-pii text-blue-800 rounded-full px-2 py-1 mx-1 cursor-pointer">
-                                    {dic[match[2]].value}
-                                </Badge> :
-                                    <Tooltip>
-                                        <TooltipTrigger asChild>
-                                            <button className=""><Badge key={index} className="bg-pii text-blue-800 rounded-sm px-1 py-1 mx-1 cursor-pointer">
-                                                {part.toUpperCase()}
-                                            </Badge></button>
-                                        </TooltipTrigger>
-                                        <TooltipContent>
-                                            <p>{dic[match[2]].value}</p>
-                                        </TooltipContent>
-                                    </Tooltip>
-                            );
-                        }
-                        return <span key={index} data-index={index}>{part}</span>;
-                    })}
-                </p>
+
 
                 <DropdownMenu open={open} onOpenChange={setOpen}>
                     <DropdownMenuTrigger asChild>
@@ -434,9 +558,9 @@ export default function UserMessage() {
         <div className="flex flex-col gap-2">
             {props.author == 'user' ? (
                 <div className='flex flex-row-reverse w-full'>
-                    <div className="relative bg-accent rounded-3xl px-5 py-2.5 user-message flex-grow-0">
-                        <Markdown dic={props.dic} show={show}>{props.message}</Markdown>
-                    </div>
+                    {/* <div className="relative bg-accent rounded-3xl px-5 py-2.5 user-message flex-grow-0"> */}
+                    <Markdown dic={props.dic} show={show}>{props.message}</Markdown>
+                    {/* </div> */}
                 </div>
             ) : (
                 <Markdown dic={props.dic} show={show}>{props.message}</Markdown>