Gestione dei testi preformattati (snippet di codice)

I testi preformattati sono una funzionalità avanzata di AIsuru che permette di integrare ed eseguire codice direttamente nelle conversazioni con il tuo Agente. Questa potente caratteristica ti consente di:

• Mostrare esempi di codice formattati correttamente;

• Eseguire script e modificare l'interfaccia utente in tempo reale;

• Creare esperienze interattive e dinamiche;

• Fornire dimostrazioni tecniche immediate.

Come aggiungere testi preformattati

1. Accedi ai Contenuti del tuo Agente e crea o modifica un contenuto;

2. Vai alla sezione "Avanzate: testi preformattati" e clicca su "+ Nuovo snippet";

3. Nella scheda che si apre:

   1. Aggiungi un titolo allo snippet di codice;

   2. Inserisci il codice;

   3. Decidi se eseguire il codice in pagina attivando la casella "Inserisci in pagina ed esegui questo snippet" (presente solo per alcuni linguaggi). Questa casella ti permette di:

      1. Eseguire sempre lo snippet quando l'utente fa esattamente la stessa domanda del tuo contenuto (o una abbastanza simile);

      2. Far eseguire lo snippet dall'IA generativa (a discrezione del modello scelto).

L'IA generativa utilizza il titolo dello snippet per decidere se e quando eseguirlo. Se vuoi che l'IA generativa esegua il tuo snippet, assicurati di scegliere dei nomi descrittivi e spiega quando utilizzare lo snippet all'interno del prompt.

Linguaggi supportati

Puoi scegliere tra i seguenti linguaggi per il tuo snippet:

Linguaggio	Mostrare snippet	Eseguire snippet
text	✅	❌
javascript/jsx	✅	✅
typescript/tsx	✅	✅
json	✅	✅
css	✅	✅
html/xml	✅	❌
bash	✅	❌
python	✅	❌
cpp/csharp	✅	❌
php	✅	❌
ruby	✅	❌

Esempi pratici

• Scopo: illuminare una parte della pagina web;

• Titolo: "Evidenzia la descrizione del prodotto";

• Linguaggio: JavaScript;

• Inserisci in pagina ed esegui questo snippet: checkbox attiva.

Codice:

window.evidenziaSezione = function(idSezione) {
    const sezione = document.getElementById(idSezione);
    sezione.style.boxShadow = '0 0 15px 5px #ffff00';
    setTimeout(() => {
        sezione.style.boxShadow = 'none';
    }, 3000);
}

Flusso di conversazione:

1. Utente: "Dove trovo la descrizione del prodotto?";

2. Agente:

   1. "La descrizione del prodotto si trova sotto al suo titolo, in alto a destra. Per facilitarti, ho reso la descrizione più evidente illuminandola per alcuni secondi".

   2. [Inserisce ed esegue lo snippet 'Evidenzia sezione prodotto']

Vantaggi dell'uso dei testi preformattati

• Crea interazioni più dinamiche e contestuali;

• Migliora l'esperienza utente con esempi visivi e interattivi;

• Fornisce supporto tecnico immediato e pratico;

• Permette di personalizzare l'interfaccia utente in tempo reale;

• Facilita la dimostrazione di funzionalità del sito o dell'applicazione.

Combinazione avanzata degli snippet

Gli snippet possono essere combinati strategicamente per creare interazioni più complesse:

Esempio: evidenziazione dinamica delle sezioni

Immagina di voler creare un'esperienza guidata dove l'Agente evidenzia diverse parti della pagina durante una conversazione. Puoi configurare:

1. Uno snippet CSS (tramite domanda iniziale)

.highlight-pulse {
  animation: pulse 2s infinite;
  border: 2px solid #6366f1;
  border-radius: 4px;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

1. Snippet di codice JavaScript (nella stessa domanda iniziale)

// Funzione per evidenziare la sezione prodotti
function highlightProductsSection() {
    const productsSection = document.querySelector('.products-section');
    
    if (!productsSection) return; // Guard clause
    
    // Aggiungi l'effetto
    productsSection.classList.add('highlight-pulse');
    
    // Rimuovi l'effetto dopo 5 secondi usando requestAnimationFrame
    const startTime = performance.now();
    
    function removeHighlight(currentTime) {
        if (currentTime - startTime >= 5000) {
            productsSection.classList.remove('highlight-pulse');
            return;
        }
        requestAnimationFrame(removeHighlight);
    }
    
    requestAnimationFrame(removeHighlight);
}

1. Snippet di codice JavaScript legato al contenuto con domanda "Dove trovo la sezione prodotti?"

// Uso della funzione
highlightProductsSection();

In questo modo, quando l'utente avvia la chat:

• Viene iniettato immediatamente lo stile CSS;

• Viene definita la funzione JavaScript per evidenziare la sezione.

Quando l'utente chiederà "Dove trovo la sezione prodotti?", l'Agente scatenerà il terzo snippet - e quindi la funzione che evidenzia la sezione.

Questo approccio è particolarmente utile per:

• Tutorial guidati interattivi;

• Onboarding di nuovi utenti;

• Assistenza nella navigazione di pagine complesse;

• Presentazioni di prodotti o servizi.

Considerazioni importanti

1. Sicurezza: quando usi l'opzione di esecuzione degli snippet, assicurati che il codice sia sicuro e non possa essere manipolato per eseguire azioni dannose;

2. Trasparenza: fornisci sempre una spiegazione chiara di ciò che lo snippet fa o mostra;

3. Accessibilità: considera che non tutti gli utenti potrebbero vedere gli effetti visivi degli snippet, quindi fornisci sempre descrizioni testuali alternative;

4. Prestazioni: evita di sovraccaricare la pagina con troppi snippet eseguibili, che potrebbero rallentare l'esperienza utente.

L'utilizzo intelligente dei testi preformattati può trasformare il tuo Agente in un potente strumento di supporto interattivo. Sperimenta con diversi tipi di snippet per creare un'esperienza utente coinvolgente, informativa e personalizzata, migliorando significativamente l'interazione tra l'utente e il tuo sito web o applicazione.