Creare app per Google Chat con Gemini

1. Prima di iniziare

Che cosa sono le app Google Chat con Gemini?

Le app Google Chat con Gemini fanno quanto segue:

  • Integra i tuoi servizi e le tue risorse in Google Chat, che consente agli utenti di ottenere informazioni e intraprendere azioni senza abbandonare la conversazione.
  • Integrati con il modello di AI generativa Gemini, in modo da poter creare o cercare dati come testo o immagini in momenti specifici per semplificare i tuoi workflow.

Perché integrare le app Google Chat con Gemini?

I casi d'uso tipici dei modelli di AI generativa come Gemini rientrano nelle seguenti categorie:

  • Creazione e miglioramento dei contenuti. Genera testi di marketing, crea post sui social media, crea immagini realistiche, componi musica o aiuta a creare contenuti video.
  • Ricerca dei dati. Estrai insight chiave da una knowledge base non strutturata, riassumi testi lunghi, classifica contenuti o traduci lingue con maggiore precisione e velocità.
  • Conversazione. Partecipa a conversazioni naturali, informative e creative.

La possibilità di integrare queste funzionalità direttamente nell'interfaccia familiare di Google Chat è un'ottima opportunità per chiunque voglia migliorare l'esperienza e la produttività dei propri utenti.

Prerequisiti

Cosa crei

In questo codelab, creerai tre app Google Chat con Gemini per coprire i tre casi d'uso introdotti nella sezione precedente.

App di gestione dei problemi (creazione e miglioramento dei contenuti)

Questa app esegue le seguenti operazioni:

  • Gestisce i problemi dalla creazione alla chiusura con interazioni di base, home page dell'app e autenticazione dell'app.
  • Monitora i messaggi e fornisce assistenza per l'inclusione con widget per eventi e accessori.

Utilizzi Gemini per:

  • Genera report sui problemi in base alla cronologia dei messaggi e ai dettagli del problema.
  • Classifica le parole non inclusive nei messaggi con prompt controllati.

Le principali tecnologie utilizzate sono Vertex AI, Gemini, Apps Script e le API Google Workspace (Admin, Chat, Docs, Events).

22efdecff4601417.png

2d127c63518673b2.png

9aea694937f2f3ed.png

Questa app si basa su Gemini per comprendere e rispondere alle domande in linguaggio naturale e per restituire riferimenti alle fonti da dati non strutturati.

Le tecnologie principali utilizzate sono l'agente datastore Dialogflow CX, il webhook Dialogflow CX, Google Cloud Functions e Gemini.

9468866bfe848bb8.png

App Feedback (conversazione)

Questa app si basa su Gemini per raccogliere e archiviare le recensioni con conversazioni in linguaggio naturale.

Le tecnologie principali utilizzate sono l'agente Dialogflow CX, lo strumento Dialogflow CX, OpenAPI, Google Cloud Functions e Gemini.

99a7a0295f122f31.png

Cosa imparerai

  • Come integrare le app Google Chat con Gemini tramite Vertex AI.
  • Come integrare le app Google Chat con gli agenti Dialogflow CX.
  • Come utilizzare le funzionalità più recenti di Google Chat: home dell'app, Eventi Google Chat e widget degli accessori.

Cosa serve

2. Configurazione

Inizializzare le risorse

In questa sezione, accedi e configura le seguenti risorse dal tuo browser web preferito.

Progetto Apps Script

Nella console Apps Script, segui questi passaggi:

  1. Fai clic su Impostazioni e poi abilita l'API Google Apps Script.

ea06c593b347b9d1.png

  1. Seleziona il progetto.
  2. Fai clic su Impostazioni progetto.
  3. Seleziona la casella di controllo Mostra il file manifest "appsscript.json" nell'editor.
  4. Rinomina il progetto in Chat Apps Gemini.

12c1485bd248b766.png

Progetto Google Cloud

Nella console Google Cloud, segui questi passaggi:

  1. Seleziona il progetto.
  2. Fai clic su Menu ☰ > API e servizi > Schermata per il consenso OAuth > Modifica app, quindi imposta Nome app su Chat Apps Gemini.

  1. Vai alla configurazione dell'API Google Chat, quindi imposta Nome app e Descrizione su Chat Apps Gemini.

a71f040755da3b8b.png

Google Chat

In Google Chat, segui questi passaggi:

  1. Se necessario, avvia una chat con l'app Google Chat.
  2. Invia un messaggio, ad esempio Hello, per assicurarti che funzioni.

9625418251528ae9.png

Scarica localmente il codice sorgente e le risorse

  1. Scarica questo repository GitHub.

  1. Nell'ambiente di sviluppo che preferisci, apri la directory apps-script e poi vai alla stessa directory nel terminale.

da9478df97c99194.png

Installare e configurare clasp

Utilizziamo clasp per modificare e inviare facilmente le versioni del codice sorgente dall'ambiente locale al progetto Apps Script.

  1. Nel tuo ambiente locale, installa le ultime versioni di node, npm e clasp.
npm install -g @google/clasp
  1. Accedi con il tuo account:
clasp login

8bc2434e6dc6f22a.png

In caso di esito positivo, nel browser web viene visualizzata una schermata di conferma di base e il file .clasprc.json con le credenziali client viene aggiornato. Puoi trovare la sua posizione nel terminale.

e1d833eb4d5b3a8f.png

3. App 1: build

Concetti di revisione

Vertex AI

Vertex AI offre tutto ciò di cui hai bisogno per creare e utilizzare l'AI generativa, tra cui soluzioni di AI, Agent Builder, oltre 130 modelli di base e una piattaforma AI unificata.

c9e9c7a1945b22ac.png

Gemini

Gemini è un LLM multimodale di Google accessibile tramite Vertex AI. Aiuta le persone a liberare il proprio potenziale umano in modo da aumentare la loro immaginazione, espandere la loro curiosità e migliorare la loro produttività.

Servizio di chat avanzato

Il servizio Advanced Chat ti consente di utilizzare l'API Google Chat in Apps Script. In questo modo, gli script possono trovare, creare e modificare gli spazi di Chat, aggiungere o rimuovere membri dagli spazi e leggere o pubblicare messaggi con testo, schede, allegati e reazioni.

Esamina l'architettura

8c9c7b7328a69ea6.png

Questa app Google Chat è creata con Apps Script. Ecco come funziona:

  1. Un utente invia un messaggio all'app, in un messaggio diretto o in uno spazio.
  2. L'app, implementata in un progetto Apps Script e associata a un progetto Google Cloud, elabora il messaggio.
  3. L'app si integra con le API Google Docs e Google Chat.
  4. L'app utilizza il servizio delle proprietà per rendere persistenti i dati nelle proprietà dello script.
  5. L'app invia una risposta sincrona, in un messaggio diretto o nello spazio originale.

Flussi di revisione

Crea problema

7ca0e8ba3c8255bb.png

Risolvere il problema dallo spazio dedicato

51b47714c378a24b.png

Chiudere il problema dallo spazio dedicato

89e50228deeab0f9.png

Esaminare il codice sorgente

Il progetto Apps Script contiene i seguenti script:

  • Configuration: Costanti da modificare in base all'ambiente.
  • ChatApp: gestisce gli eventi di interazione di Google Chat, inclusi messaggi, clic sulle schede, comandi slash e finestre di dialogo.
  • Storage: Funzioni di utilità che si basano su Properties Services.
  • ChatAppAuth: funzioni di utilità che si basano sull'autenticazione dell'app Google Chat.
  • Docs: funzioni di utilità che si basano su Documenti Google.
  • VertexAi: Funzioni di utilità che si basano su Vertex AI.

Ecco le parti utilizzate attivamente durante la generazione di documenti di report con Gemini e le cronologie degli spazi di chat:

appsscript.json

// Enables the Admin SDK Directory and Chat services, which you need to retrieve
// messages and usernames.

"enabledAdvancedServices": [
  ...
  {
    "userSymbol": "AdminDirectory",
    "version": "directory_v1",
    "serviceId": "admin"
  },
  {
    "userSymbol": "Chat",
    "version": "v1",
    "serviceId": "chat"
  }
  ...
]
// Includes the OAuth scopes to request the Admin SDK Directory, Google Chat,
// Google Docs, and Vertex AI APIs.

"oauthScopes": [
  ...
  "https://www.googleapis.com/auth/admin.directory.user.readonly",
  "https://www.googleapis.com/auth/chat.messages.readonly",
  "https://www.googleapis.com/auth/documents",
  "https://www.googleapis.com/auth/cloud-platform",
  ...
]

Configuration.js

// Relies on two constants: the first one is the Google Cloud project ID and the
// second one is the Vertex AI location to be used.

...
const PROJECT_ID = 'replace-with-gcp-project-id';
const VERTEX_AI_LOCATION_ID = 'us-central1';
...

ChatApp.js

// The slash command process function retrieves history, generates content, and passes
// it to the report generator.

function processSlashCommand(event) {
  ...
  if (event.message.slashCommand.commandId == CLOSE_COMMAND_ID
    && event.message.space.type !== "DM") {
    ...
    const history = exportSpaceHistory(spaceId);
    const summary = summarizeSpace(history);
    const docUrl = createReport(
      issue.title, issue.description, resolution, history, summary
    );
    ...
  }
  ...
}
/**
 * Fetches and concatenates the 100 first space messages by using the Google Chat API.
 *
 * Messages with slash commands are filtered (app command invocations).
 *
 * @return {string} concatenate space messages in the format "Sender's name: Message"
 */
function exportSpaceHistory(spaceName) {
  const messages = Chat.Spaces.Messages.list(spaceName, { 'pageSize': 100 }).messages;
  // Returns results after fetching message sender display names.
  let users = new Map();
  return messages
    .filter(message => message.slashCommand === undefined)
    .map(message =>
      `${getUserDisplayName(users, message.sender.name)}: ${message.text}`
    ).join('\n');
}
/**
 * Fetches a user's display name by using the Admin Directory API.
 *
 * A cache is used to only call the API once per user.
 *
 * @param {Map} cache the map containing users previously fetched
 * @param {string} userId the user ID to fetch
 * @return {string} the user's display name
 */
function getUserDisplayName(cache, userId) {
  if (cache.has(userId)) {
    return cache.get(userId);
  }
  let displayName = 'Unknown User';
  try {
    const user = AdminDirectory.Users.get(
      userId.replace("users/", ""),
      { projection: 'BASIC', viewType: 'domain_public' });
    displayName = user.name.displayName ? user.name.displayName : user.name.fullName;
  } catch (e) {
    // Ignores errors, uses 'Unknown User' by default.
  }
  cache.set(userId, displayName);
  return displayName;
}

VertexAi.js

/**
 * Summarizes a Google Chat space history with the Gemini Pro model using
 * Vertex AI API.
 *
 * @param {string} history the history
 * @return {string} the summary
 */
function summarizeSpace(history) {
  const url = `https://${VERTEX_AI_LOCATION_ID}-aiplatform.googleapis.com/v1`
    + `/projects/${PROJECT_ID}/locations/${VERTEX_AI_LOCATION_ID}`
    + "/publishers/google/models/gemini-1.0-pro:generateContent";
  const options = {
    method: "POST",
    headers: { Authorization: "Bearer " + ScriptApp.getOAuthToken() },
    contentType: "application/json",
    payload: JSON.stringify({
      contents: {
        role: "user",
        parts: {
          text: "Summarize the following conversation between engineers resolving"
              + " an issue in a few sentences.\n\n" + history
        }
      },
      safetySettings: {
        category: "HARM_CATEGORY_SEXUALLY_EXPLICIT",
        threshold: "BLOCK_LOW_AND_ABOVE"
      },
      generationConfig: {
        temperature: 0.2,
        topP: 0.8,
        topK: 40
      }
    })
  };

  return JSON.parse(UrlFetchApp.fetch(url, options).getContentText())
    .candidates[0].content.parts[0].text;
}

Docs.js

// The report generator function adds two sections: the first one is for the summary and the second one is for history.
function createReport(..., history, summary) {
  ...
  body.appendParagraph("Summary").setHeading(DocumentApp.ParagraphHeading.HEADING1);
  body.appendParagraph(summary);
  body.appendParagraph("History").setHeading(DocumentApp.ParagraphHeading.HEADING1);
  body.appendParagraph(history);
  ...
}

Aggiorna il progetto Google Cloud

Abilita le API

  1. Nella console Google Cloud, abilita le API Google Docs, Google Admin SDK e Vertex AI:

  1. Fai clic su Menu ☰ > API e servizi > API e servizi abilitati e poi verifica che le API siano abilitate.

Avviare il service account

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ☰ > IAM e amministrazione > Service account > + Crea service account.

74cf57426419f39.png

  1. Imposta Nome service account su chat-app.
  2. Imposta Descrizione service account su Chat app auth.
  3. Fai clic su Crea e continua.
  4. Fai clic su Fine. Viene visualizzata la pagina Service account e puoi vedere il service account che hai creato.

ca0468f1f93990f9.png

  1. Seleziona l'account di servizio appena creato.
  2. Seleziona la scheda Chiavi.
  3. Fai clic su Aggiungi chiave.
  4. Fai clic su Crea nuova chiave.
  5. Seleziona JSON.
  6. Fai clic su Crea.

9f7e6ea020978ab0.png

La finestra di dialogo si chiude e la coppia di chiavi pubblica/privata appena creata viene scaricata automaticamente nell'ambiente locale come file JSON. Utilizzerai i suoi contenuti in un secondo momento quando modificherai il codice sorgente del progetto Apps Script.

Aggiorna la configurazione dell'API Google Chat

Nella console Google Cloud, segui questi passaggi:

  1. Aggiungi un comando slash.
  2. Imposta Nome su /create.
  3. Imposta ID comando su 1.
  4. Imposta Descrizione su Create a new issue.
  5. Seleziona la casella di controllo Apre una finestra di dialogo.
  6. Aggiungi un altro comando slash.
  7. Imposta Nome su /close.
  8. Imposta ID comando su 2.
  9. Imposta Descrizione su Close an issue.
  10. Fai clic su Salva.

bee2e7b63659ab33.png

Aggiornare il progetto Apps Script

  • Cambia la directory corrente nel terminale locale in issue-management/1-baseline. Contiene il codice sorgente. Prima di eseguire il push del codice sorgente nel progetto Apps Script, devi configurare alcune cose.

Configurare il codice sorgente

  1. Imposta la costante JSON denominata CHAT_CREDENTIALS nel file Configuration.js sui contenuti del file della chiave privata che hai scaricato in precedenza.

d721f6bff73c5304.png

  1. Nella console Google Cloud, fai clic su Menu ☰ > IAM e amministrazione > Impostazioni.

  1. Copia l'ID progetto.

82592fa0bd113469.png

  1. Imposta la costante stringa denominata PROJECT_ID nel file Configuration.js sull'ID progetto.

383cee561130ceba.png

Configura le impostazioni di clasp

Per inizializzare le impostazioni di clasp in modo da eseguire il push del codice sorgente nel progetto Apps Script corretto, segui questi passaggi:

  1. Nella console Apps Script, seleziona il progetto.
  2. Seleziona Impostazioni progetto.
  3. In ID, fai clic su Copia.

20ea033b6de882c6.png

  1. Nella directory attuale, crea un file .clasp.json.
  2. Sostituisci <your-script-id> con l'ID copiato.
  3. Copia il risultato nel file .clasp.json.
  4. Salva il file .clasp.json.
{
  "scriptId": "<your-script-id>"
}

Push source code

  • Esegui questo comando:
$clasp push
? Manifest file has been updated. Do you want to push and overwrite? Yes
└─ appsscript.json
└─ ChatApp.js
└─ ChatAppAuth.js
└─ Configuration.js
└─ Docs.js
└─ Storage.js
└─ VertexAi.js
Pushed 7 files.

Prova it

  1. In Google Chat, invia Hello! in un messaggio diretto all'app. L'app non risponde, ma viene visualizzato un messaggio che richiede la configurazione.

4c1fc68121dcffed.png

  1. Fai clic su Configura.
  2. Seleziona il tuo Account Google.
  3. Autenticati.
  4. Esamina e consenti l'accesso all'app.

4a2fd7ac5918bf1a.png

In caso di esito positivo, nella pagina web viene visualizzata una schermata di conferma di base e una risposta effettiva dell'app al messaggio originale.

acb9065568fe47d2.png

2d6ef9c62f47e082.png

  1. Invia un altro messaggio diretto all'app, ma con il comando slash /create.

be3f3c6eb0f929c1.png

  1. Nella finestra di dialogo, imposta Titolo su Issue Title 1.
  2. Imposta Descrizione su Problema Description 1.
  3. Fai clic su Crea.

22efdecff4601417.png

L'app esegue le seguenti operazioni:

  1. Chiude la finestra di dialogo.
  2. Crea uno spazio dedicato al problema appena creato con lo stesso titolo.
  3. Entra nello spazio appena creato.
  4. Invia un messaggio contenente la descrizione del problema nello spazio appena creato.
  5. Ti invia un messaggio diretto con un link allo spazio appena creato.

3253cec2392e281f.png

  1. Nello spazio appena creato, invia un messaggio con il comando slash /close e la risoluzione, ad esempio Not reproducible.

132cc4acfc10b98c.png

L'app esegue le seguenti operazioni:

  1. Crea un documento di report in Documenti Google.
  2. Invia un messaggio allo spazio dedicato al problema con un link al documento del report appena creato.

2d127c63518673b2.png

  1. Apri il documento del report. Contiene informazioni di base, la cronologia e un riepilogo.

9aea694937f2f3ed.png

4. (Facoltativo) App 1: aggiungi la schermata Home dell'app

Concetti di revisione

La home page dell'app è un messaggio della scheda personalizzabile che un'app di chat invia a un utente quando quest'ultimo accede alla scheda Home da un messaggio diretto con l'app di chat. Viene in genere utilizzata per visualizzare la documentazione o una panoramica dell'app. Tecnicamente, esiste un evento dedicato da gestire e si basa sugli stessi principi fondamentali dei messaggi delle schede.

65f56f70f67a32e4.png

Flussi di revisione

Gestire i problemi

10663f5fc107fb3f.png

Esaminare il codice sorgente

Il progetto Apps Script deve essere modificato.

ChatApp.js

/**
 * Handles app home requests in Google Chat.
 * 
 * Displays the latest status of all issues.
 */
function onAppHome() {
  // Generates one card section per issue.
  var sections = [];
  for (var issueKey in appProperties.getProperties()) {
    const issue = JSON.parse(appProperties.getProperty(issueKey));
    if (issue.spaceId) {
      sections.push({
        header: `${issue.status} - ${issue.title}`,
        widgets: [{ textParagraph: {
            text: `Description: ${issue.description}`
          }}, { textParagraph: {
            text: `Resolution: ${issue.resolution}`
          }}, { buttonList: { buttons: [{
              text: "Open space",
              onClick: { openLink: {
                url: `https://mail.google.com/mail/u/0/#chat/space/${issue.spaceId}`
              }}
            }, {
              text: "Open report",
              onClick: { openLink: {
                url: issue.reportUrl !== "" ? issue.reportUrl : "docs.new"
              }},
              disabled: issue.reportUrl === ""
          }]}
        }]
      });
    }
  }

  return { action: { navigations: [{ push_card: {
    sections: sections
  }}]}};
}

Aggiorna il progetto Google Cloud

Nella console Google Cloud, segui questi passaggi:

  1. Nella sezione Funzionalità interattive, seleziona la casella di controllo Supporta la home page dell'app.

97159c1c69ca8303.png

Nel tuo ambiente locale, segui questi passaggi:

  1. Cambia la directory corrente nel terminale in issue-management/2-app-home. Contiene il codice sorgente che devi utilizzare.
  2. Copia il file issue-management/1-baseline/.clasp.json nella directory corrente.
  3. Copia il file issue-management/1-baseline/Configuration.js nella directory corrente in modo che sostituisca quello esistente.
  4. Esegui questo comando:
clasp push

Prova

In Google Chat, segui questi passaggi:

  1. Invia un messaggio diretto con il comando slash /create all'app. L'app apre una finestra di dialogo.
  2. Imposta Titolo su Issue Title 2.
  3. Imposta Descrizione su Problema Description 2.
  4. Fai clic su Crea.

3b2a8690e758f965.png

  1. Seleziona la scheda Home del tuo spazio con l'app Google Chat. Puoi visualizzare i dettagli dei problemi che hai creato.

ed8e32da0e6f2ac6.png

5. (Facoltativo) App 1: aggiungi il monitoraggio dello spazio

Rivedi i concetti

Pub/Sub

Pub/Sub è un servizio di messaggistica asincrono e scalabile che disaccoppia i servizi che producono messaggi dai servizi che li elaborano. Pub/Sub ti consente di creare sistemi di produttori e consumer di eventi, denominati publisher e sottoscrittori. I publisher comunicano con i sottoscrittori in modo asincrono trasmettendo eventi, anziché tramite chiamate di procedura remota (RPC) sincrone.

I publisher inviano eventi al servizio Pub/Sub senza tenere conto di come o quando questi debbano essere elaborati. Pub/Sub poi invia gli eventi a tutti i servizi che reagiscono a questi eventi. Nei sistemi che comunicano tramite RPC, i publisher devono attendere che gli iscritti ricevano i dati. Tuttavia, l'integrazione asincrona in Pub/Sub aumenta la flessibilità e la robustezza del sistema complessivo.

Argomento: una risorsa denominata che rappresenta un feed di messaggi. Devi creare un argomento prima di poterlo pubblicare o sottoscrivere.

Sottoscrizione: per ricevere i messaggi pubblicati in un argomento, devi creare una sottoscrizione all'argomento. Il client sottoscrittore riceve ed elabora i messaggi pubblicati nell'argomento. Un argomento può avere più sottoscrizioni, ma una determinata sottoscrizione appartiene a un singolo argomento.

Eventi di Google Workspace

Gli eventi Google Workspace rappresentano le modifiche alle risorse Google Workspace, ad esempio quando le risorse vengono create, aggiornate o eliminate. Le app possono abbonarsi alle risorse di Google Workspace per ricevere ed elaborare in modo asincrono gli eventi pertinenti.

7816e477b112bfb6.png

Ecco come l'API Google Workspace Events invia gli eventi a un'app tramite un abbonamento:

  1. L'app si abbona a una risorsa in un'app Google Workspace, ad esempio uno spazio.
  2. La risorsa a cui è stato eseguito l'abbonamento dell'app cambia.
  3. L'app Google Workspace invia un evento a un argomento in Pub/Sub, che funge da endpoint di notifica per l'abbonamento Google Workspace dell'app. L'evento contiene dati sulle modifiche apportate alla risorsa.
  4. L'app elabora il messaggio Pub/Sub che contiene l'evento e, se necessario, intraprende un'azione.

Flussi di revisione

Crea problema (aggiornamento)

6d7a9d7a68666a80.png

Risolvere il problema dallo spazio dedicato (aggiornamento)

17e60f052f222456.png

Chiudere il problema dallo spazio dedicato (aggiornamento)

742d490ea0b6fe3a.png

Elaborare gli abbonamenti

de3017100dec6401.png

Esaminare il codice sorgente

Il progetto Apps Script deve essere modificato.

appsscript.json

// Enables the Workspace Events service.

"enabledAdvancedServices": [
  ...
  {
    "userSymbol": "WorkspaceEvents",
    "version": "v1",
    "serviceId": "workspaceevents"
  }
  ...
]

Configuration.js

// Adds two constants: the first one is the Pub/Sub topic ID and the second one
// is the Pub/Sub subscription ID to be used to retrieve Google Workspace events.

...
const GWS_PUBSUB_TOPIC_ID = `projects/${PROJECT_ID}/topics/workspace-events`;
const GWS_PUBSUB_SUBSCRIPTION_ID =
  `projects/${PROJECT_ID}/subscriptions/workspace-events-sub`;
...

ChatApp.js

// Edits the function to delete the subscription at issue closure.

function processSlashCommand(event) {
  ...
  if (event.message.slashCommand.commandId == CLOSE_COMMAND_ID
    && event.message.space.type !== "DM") {
    ...
    deleteSubscription(issue.subscriptionId);
    ...
  }
  ...
}
// Edits the function to create the subscription.

function createIssue(event) {
  ...
  const subscriptionId = createSpaceSubscription(spaceUrl);
  const createdIssue = saveCreatedIssue(..., subscriptionId);
  ...
}
// Edits the function to delete the subscription.

function onRemoveFromSpace(event) {
  ...
  deleteSubscription(issue.subscriptionId);
  ...
}

Storage.js

// Edits the function to keep track of the subscription ID.

function saveCreatedIssue(..., spaceId, subscriptionId) {
  ...
  appProperties.setProperty(spaceId, JSON.stringify({
    ...
    subscriptionId: subscriptionId,
    ...
  }));
  ...
}

WorkspaceEvent.js

/**
 * Creates a new subscription to Google Workspace Events associated to a
 * Google Chat space.
 * 
 * The subscription scope includes message creation events and resources.
 * 
 * @param {string} spaceId the space ID to create a subscription for
 * @return the ID of the newly created subscription
 */
function createSpaceSubscription(spaceId) {
  const operation = WorkspaceEvents.Subscriptions.create({
    targetResource: `//chat.googleapis.com/${spaceId}`,
    eventTypes: ["google.workspace.chat.message.v1.created"],
    notificationEndpoint: { pubsubTopic: GWS_PUBSUB_TOPIC_ID },
    payloadOptions: { includeResource: true },
  });

  return operation.response.name;
}
/**
 * Processes events from subscription by using the Google Cloud PubSub API.
 * 
 * It pulls and acknowledges each event.
 */
function processSubscription() {
  const response = UrlFetchApp.fetch(
    `https://pubsub.googleapis.com/v1/${GWS_PUBSUB_SUBSCRIPTION_ID}:pull`,
    {
      method: "POST",
      contentType: "application/json",
      headers: { "Authorization": "Bearer " + ScriptApp.getOAuthToken() },
      payload: JSON.stringify({ maxMessages: 10 })
    }
  );

  const messages = JSON.parse(response.getContentText()).receivedMessages;
  for (var messageIndex in messages) {
    const message = messages[messageIndex];
    const ceType = message.message.attributes["ce-type"];
    const dataStr = Utilities.newBlob(Utilities.base64Decode(message.message.data))
      .getDataAsString();
    if (ceType === "google.workspace.events.subscription.v1.expirationReminder") {
      // Renews subscription.
      renewSubscription(JSON.parse(dataStr).subscription.name);
    } else if (ceType === "google.workspace.chat.message.v1.created") {
      // Processes the message text when it's sent in a space.
      const chatMessage = JSON.parse(dataStr).message;
      if (chatMessage.sender.type !== "BOT") {
        console.log("Message was processed.");
      }
    }
    // Acknowledges successful processing to avoid getting it again next time.
    ackSubscription(message.ackId);
  }
}
/**
 * Acknowledges a subscription event by using the Google Cloud PubSub API.
 * 
 * @param {string} ackId the ID of the event acknowledgment to send
 */
function ackSubscription(ackId) {
  UrlFetchApp.fetch(
    `https://pubsub.googleapis.com/v1/${GWS_PUBSUB_SUBSCRIPTION_ID}:acknowledge`,
    {
      method: "POST",
      contentType: "application/json",
      headers: { "Authorization": "Bearer " + ScriptApp.getOAuthToken() },
      payload: JSON.stringify({
        ackIds: [ackId]
      })
    }
  );
}
/**
 * Renews a subscription to Google Workspace Events.
 * 
 * The default time to live option is used.
 * 
 * @param {string} subscriptionId the ID of the subscription to renew
 */
function renewSubscription(subscriptionId) {
  WorkspaceEvents.Subscriptions.patch({ttl: '0s'}, subscriptionId);
}
/**
 * Deletes a subscription to Google Workspace Events.
 * 
 * @param {string} subscriptionId the ID of the subscription to delete
 */
function deleteSubscription(subscriptionId) {
  WorkspaceEvents.Subscriptions.remove(subscriptionId);
}

Aggiorna il progetto Google Cloud

Abilita le API

  1. Nella console Google Cloud, abilita Google Workspace Events e Pub/Sub.

  1. Fai clic su Menu ☰ > API e servizi > API e servizi abilitati e poi verifica che entrambi siano abilitati.

Avviare l'abbonamento

Devi creare un argomento Pub/Sub e iscriverti per ricevere tutti gli eventi dello spazio di lavoro.

Nella console Google Cloud, segui questi passaggi:

  1. Vai a Menu ☰ > Pub/Sub > Argomenti.

  1. Fai clic su Crea argomento.
  2. Imposta ID argomento su workspace-events.
  3. Seleziona la casella di controllo Aggiungi una sottoscrizione predefinita.
  4. Fai clic su Crea.

b39f9a0aec7c9939.png

Per concedere l'accesso alla pubblicazione di messaggi Pub/Sub nel tuo argomento appena creato da Google Chat, segui questi passaggi:

  1. Seleziona l'argomento dall'elenco.
  2. Seleziona la scheda Autorizzazioni.
  3. Aggiungi chat-api-push@system.gserviceaccount.com a Nuove entità.
  4. Seleziona Pub/Sub Publisher per Ruolo.
  5. Fai clic su Salva.

8d4016c37532503.png

Aggiornare il progetto Apps Script

Nella console Google Cloud, segui questi passaggi:

  1. Vai a Menu ☰ > IAM e amministrazione > Impostazioni.

  1. Copia l'ID progetto.

82592fa0bd113469.png

Nel tuo ambiente locale, segui questi passaggi:

  1. Cambia la directory corrente nel terminale in issue-management/3-message-monitoring. Contiene il codice sorgente di cui hai bisogno.
  2. Imposta la costante stringa denominata PROJECT_ID nel file Configuration.js sull'ID progetto copiato.
  3. Imposta la costante JSON denominata CHAT_CREDENTIALS nel file Configuration.js sui contenuti del file della chiave privata che hai scaricato in precedenza.
  4. Copia il file issue-management/2-app-home/.clasp.json nella directory corrente.
  5. Esegui questo comando:
clasp push

Prova

In Google Chat, segui questi passaggi:

  1. Invia un messaggio diretto con il comando slash /create all'app. L'app apre una finestra di dialogo.
  2. Imposta Titolo su Issue Title 3.
  3. Imposta Descrizione su Problema Description 3.
  4. Fai clic su Crea.
  5. Nel nuovo spazio creato, invia alcuni messaggi che descrivono il problema.
  6. Invia un messaggio con il comando slash /close e la risoluzione, ad esempio Fixed.

Nella console Google Cloud, segui questi passaggi:

  1. Vai a Menu ☰ > Pub/Sub > Abbonamenti.

  1. Seleziona l'abbonamento workspace-events-sub.
  2. Seleziona la scheda Messaggi.
  3. Fai clic su Pull. La tabella mostra i messaggi relativi a ciò che hai inviato allo spazio appena creato.

82631c9792d83889.png

Nella console Apps Script, segui questi passaggi:

  1. Seleziona il progetto.
  2. Seleziona Editor.
  3. Seleziona il file WorkspaceEvent.gs.
  4. Seleziona processSubscription nella sezione Esegui.
  5. Fai clic su Run.Dal log di esecuzione puoi vedere che i messaggi sono stati elaborati.

c612e8fa2bd0a163.png

Nella console Google Cloud, segui questi passaggi:

  1. Vai a Menu ☰ > Pub/Sub > Abbonamenti.

  1. Seleziona l'abbonamento workspace-events-sub.
  2. Seleziona la scheda Messaggi.
  3. Fai clic su Pull. La tabella non mostra più i messaggi relativi a ciò che hai inviato allo spazio appena creato.

e185454cac862a7b.png

  • In Google Chat, nello spazio dedicato al terzo problema che hai creato con il comando slash /create, invia altri messaggi che trattano l'argomento.

Nella console Google Cloud, segui questi passaggi:

  1. Vai a Menu ☰ > Pub/Sub > Abbonamenti.

  1. Seleziona l'abbonamento workspace-events-sub.
  2. Seleziona la scheda Messaggi.
  3. Fai clic su Pull. La tabella non mostra i messaggi relativi a ciò che hai inviato allo spazio appena creato.

6. (Facoltativo) App 1: aggiungi assistenza per l'inclusività

Rivedi i concetti

Il prompting dell'AI generativa è l'arte di creare istruzioni o domande per guidare un modello di AI generativa verso il tipo specifico di output desiderato. Una pratica comune è quella di limitare le risposte aggiungendo regole e condizioni nei prompt. In questo modo, l'output sarà sicuro, pertinente, coerente e in linea con le aspettative.

Flussi di revisione

Elabora abbonamenti (aggiornamento)

780d0802f77dd180.png

Esaminare il codice sorgente

Il progetto Apps Script deve essere modificato.

WorkspaceEvent.js

// Edits the function to replace logging by an actual card message.

function processSubscription() {
  ...
  for (var messageIndex in messages) {
    ...
    } else if (ceType === "google.workspace.chat.message.v1.created") {
      ...
      const inclusivityCheck = getInclusivityFeedback(chatMessage.text);
      if (inclusivityCheck !== "It's inclusive!") {
        createAppMessageUsingChatService({
          cardsV2: [{ cardId: "1", card: { header: {
              title: "Inclusivity",
              subtitle: `The following words are not inclusive: ${inclusivityCheck}`
          }}}]
        },
        chatMessage.space.name);
      }
      ...
    }
    ...
  }
  ...
}

VertexAi.js

/**
 * Gets feedback on inclusivity for a text with the Gemini Pro model using
 * Vertex AI API.
 * 
 * Returns "It's inclusive!" when it is otherwise a list of word(s) that might not
 * be optimal.
 *
 * @param {string} text the text
 * @return {string} the feedback
 */
function getInclusivityFeedback(text) {
  const url = `https://${VERTEX_AI_LOCATION_ID}-aiplatform.googleapis.com/v1`
    + `/projects/${PROJECT_ID}/locations/${VERTEX_AI_LOCATION_ID}`
    + "/publishers/google/models/gemini-1.0-pro:generateContent";
  const options =  {
    method: "POST",
    headers: { Authorization: "Bearer " + ScriptApp.getOAuthToken() },
    contentType: "application/json",
    payload: JSON.stringify({
      contents: {
        role: "user",
        parts: {
          text: "Are there any words that obviously go against inclusivity "
            + "in this text:"
            + `\n\n----------\n${text}\n----------\n\n`
            + "If there are not, answer \"It's inclusive!\" "
            + "otherwise answer by listing them separated by commas. "
            + "Do not answer with any explanation."
        }
      },
      safetySettings: {
        category: "HARM_CATEGORY_SEXUALLY_EXPLICIT",
        threshold: "BLOCK_LOW_AND_ABOVE"
      },
      generationConfig: {
        temperature: 0.2,
        topP: 0.8,
        topK: 40
      }
    })
  };

  return JSON.parse(UrlFetchApp.fetch(url, options).getContentText())
    .candidates[0].content.parts[0].text;
}

Aggiornare il progetto Apps Script

Nel tuo ambiente locale, segui questi passaggi:

  1. Cambia la directory corrente nel terminale in issue-management/4-inclusivity-help. Contiene il codice sorgente di cui hai bisogno.
  2. Copia il file issue-management/3-message-monitoring/.clasp.json nella directory corrente.
  3. Copia il file issue-management/3-message-monitoring/Configuration.js nella directory corrente in modo che sostituisca quello esistente.
  4. Esegui questo comando:
clasp push

Prova

In Google Chat, segui questi passaggi:

  1. Invia un messaggio diretto con il comando slash /create all'app. L'app apre una finestra di dialogo.
  2. Imposta Titolo su Issue Title 4.
  3. Imposta Descrizione su Problema Description 4.
  4. Fai clic su Crea.
  5. Nello spazio appena creato, invia It happened to me last week as well.

Nella console Apps Script, segui questi passaggi:

  1. Seleziona il progetto.
  2. Seleziona Editor.
  3. Seleziona il file WorkspaceEvent.gs.
  4. Seleziona processSubscription nella sezione Esegui.
  5. Fai clic su Esegui. Dal log di esecuzione puoi vedere che i messaggi sono stati elaborati.

In Google Chat, segui questi passaggi:

  1. Nota che l'app non ha inviato alcun aiuto per l'inclusione nel nuovo spazio creato.
  2. Nel nuovo spazio creato, invia il messaggio I had to add myself from the master to fix it.

Nella console Apps Script, segui questi passaggi:

  1. Seleziona il progetto.
  2. Seleziona Editor.
  3. Seleziona il file WorkspaceEvent.gs.
  4. Seleziona processSubscription nella sezione Esegui.
  5. Fai clic su Esegui. Dal log di esecuzione puoi vedere che i messaggi sono stati elaborati. In Google Chat, l'app ha inviato un messaggio di aiuto per l'inclusione nello spazio appena creato.

7936342847acbe2d.png

7. (Facoltativo) App 1: aggiungi preferenze

.

Rivedi i concetti

Un widget accessorio è un widget senza bordi allegato alla parte inferiore di un messaggio inviato da un'app. Viene in genere utilizzato per consentire reazioni rapide da parte dell'utente nel contesto specifico dei messaggi. Tecnicamente, si basa sugli stessi principi fondamentali dei pulsanti delle schede.

eebe88238f6b13f.png

Flussi di revisione

Disattivare l'aiuto per l'inclusività

1bb7a8592ee6221e.png

Esaminare il codice sorgente

Il progetto Apps Script deve essere modificato.

ChatApp.js

// Edits the function to handle the inclusivity help disablement action for a
// given space.

function onCardClick(event) {
  ...
  if (event.action.actionMethodName === "disableInclusivityHelp") {
    disableInclusivityHelp(event.common.parameters.spaceId);
  }
}

Storage.js

// Edits the function to keep track of the inclusivity help setting.

function saveCreatedIssue(title, description, spaceId, subscriptionId) {
  appProperties.setProperty(spaceId, JSON.stringify({
    ...
    inclusivityHelp: true,
    ...
  }));
  ...
}
/**
 * Disables inclusivity help in a space.
 * 
 * @param {string} spaceId the ID of dedicated space of the issue
 */
function disableInclusivityHelp(spaceId) {
  var issue = JSON.parse(appProperties.getProperty(spaceId));
  issue.inclusivityHelp = false;
  appProperties.setProperty(spaceId, JSON.stringify(issue));
}
/**
 * Checks whether the app should help with inclusivity in a given space.
 * 
 * @param {string} spaceId the ID of dedicated space of the issue
 * @return whether the app should help with inclusivity
 */
function shouldHelpWithInclusivity(spaceId) {
  return JSON.parse(appProperties.getProperty(spaceId)).inclusivityHelp;
}

WorkspaceEvent.js

// Edits the function to display the accessory widget to the existing card message.

function processSubscription() {
  ...
  for (var messageIndex in messages) {
    ...
    } else if (ceType === "google.workspace.chat.message.v1.created") {
      ...
      if (... && shouldHelpWithInclusivity(chatMessage.space.name)) {
        createAppMessageUsingChatService({
          ...
          accessoryWidgets: [{ buttonList: { buttons: [{
            altText: "Disable inclusivity help",
            icon: {
              iconUrl: "https://upload.wikimedia.org/.../Stop_hand_rugen.png"
            },
            onClick: { action: {
              function: "disableInclusivityHelp",
              parameters: [{
                key: "spaceId",
                value: chatMessage.space.name
              }]
            }}
          }]}}]
        }, ...);
        ...
      }
      ...
    }
    ...
  }
  ...
}

Aggiornare il progetto Apps Script

Nel tuo ambiente locale, segui questi passaggi:

  1. Cambia la directory corrente nel terminale in issue-management/5-disable-help. Contiene il codice sorgente di cui hai bisogno.
  2. Copia il file issue-management/4-inclusivity-help/.clasp.json nella directory corrente.
  3. Copia il file issue-management/4-inclusivity-help/Configuration.js nella directory corrente in modo che sostituisca quello esistente.
  4. Esegui questo comando:
clasp push

Prova

Disattivare l'aiuto

  • In Google Chat, nello spazio dedicato al quarto problema che hai creato con il comando slash /create, invia il messaggio I had to add myself from the master to fix.

Nella console Apps Script, segui questi passaggi:

  1. Seleziona il progetto.
  2. Seleziona Editor.
  3. Seleziona il file WorkspaceEvent.gs.
  4. Seleziona processSubscription nella sezione Esegui.
  5. Fai clic su Esegui. Dal log di esecuzione puoi vedere che i messaggi sono stati elaborati.

In Google Chat, segui questi passaggi:

  1. Nota che l'app ha inviato un messaggio con suggerimenti per l'inclusione nello spazio dedicato al problema con un widget accessorio.
  2. Fai clic sul widget dell'accessorio per disattivare l'aiuto per l'inclusività.

de722cff1928dec9.png

Controllare la disattivazione

  • In Google Chat, nello spazio dedicato al quarto problema che hai creato con il comando slash /create, invia il messaggio I had to add myself from the master to fix.

Nella console Apps Script, segui questi passaggi:

  1. Seleziona il progetto.
  2. Seleziona Editor.
  3. Seleziona il file WorkspaceEvent.gs.
  4. Seleziona processSubscription nella sezione Esegui.
  5. Fai clic su Esegui. Dal log di esecuzione puoi vedere che i messaggi sono stati elaborati. In Google Chat, l'app non ha inviato un messaggio con suggerimenti per l'inclusione allo spazio dedicato al problema perché era disattivato.

347d659db53b73e9.png

8. App 2: build

Concetti di revisione

Gen AI grounding

Si tratta di rendere i modelli di AI più oggettivi e affidabili collegandoli a fonti di conoscenza verificabili. Questa tecnica aiuta a impedire all'AI di inventare informazioni e può contribuire a rendere le risposte contestualmente pertinenti e meno faziose.

Linguaggio naturale

Qualsiasi lingua parlata o scritta dagli esseri umani per la comunicazione quotidiana, in contrasto con le lingue artificiali o basate su computer.

Cloud Storage

Cloud Storage permette di archiviare e recuperare qualsiasi volume di dati in qualsiasi momento a livello globale. Può essere utilizzato per una varietà di scenari, tra cui pubblicazione di contenuti di siti web, archiviazione di dati e ripristino di emergenza o distribuzione agli utenti di oggetti di dati di grandi dimensioni tramite download diretto.

Datastore Dialogflow CX

Dialogflow CX si integra con i datastore, ovvero raccolte di siti web e documenti utilizzati dagli agenti datastore per trovare risposte alle domande degli utenti finali a partire da dati specifici. Per una determinata domanda, l'agente del datastore cerca una risposta nei contenuti di origine forniti e riassume i risultati in una risposta coerente. Fornisce inoltre link di supporto alle fonti della risposta per consentire all'utente finale di saperne di più.

Esamina l'architettura

9d3342d12f3b4dda.png

Questa app Google Chat è creata con Dialogflow CX e funziona nel seguente modo:

  1. Un utente invia un messaggio all'app, in un messaggio diretto o in uno spazio.
  2. L'app, che è un agente Dialogflow CX ed è associata a un progetto Google Cloud, elabora il messaggio.
  3. L'app si integra con un datastore che si trova in Cloud Storage.
  4. L'app invia una risposta sincrona, in un messaggio diretto o nello spazio originale.

Rivedere i flussi

Rispondi alla domanda

aad9fb5a7ca48956.png

Esaminare il codice sorgente

L'unica fonte di cui hai bisogno non è il codice, ma i dati che utilizzi per il grounding.

google-chat-overview.pdf

Contiene le informazioni non strutturate delle app Google Chat, una versione stampata di una pagina del sito web per sviluppatori di Google Workspace.

e9b91c4587b1a3a0.png

Aggiorna progetto Google Cloud

Nella console Google Cloud, segui questi passaggi:

  1. Abilita le API Dialogflow e Cloud Storage.

  1. Abilita l'API Vertex AI Agent Builder.

  1. Fai clic su Menu ☰ > API e servizi > API e servizi abilitati e poi verifica che tutte le API siano abilitate.

.

Crea un agente datastore Dialogflow CX

Avviare i dati della knowledge base

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ☰ > Cloud Storage > Bucket.

4f15978ae9f1b687.png

  1. Fai clic su Crea.
  2. Imposta name su gchat-knowledge.
  3. Fai clic su Crea.

6b38c6d4d2c41bba.png

  1. Seleziona il bucket gchat-knowledge.
  2. Fai clic su Carica file.
  3. Scarica e seleziona il file google-chat-overview.pdf dal tuo ambiente locale.

df89acb22e1762af.png

Crea app

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ☰ > Generatore di agenti > App.

  1. Fai clic su Nuova app.
  2. Seleziona il tipo di chat.

44276003074bcf14.png

  1. Imposta Company name sul nome della tua azienda.
  2. Impostare Agent name su knowledge.
  3. Fai clic su Continua.

c4fedfd7556f723b.png

  1. Fai clic su Crea nuovo datastore.
  2. Seleziona Cloud Storage come origine dati.

6e2440ecf0f8f9bd.png

  1. Seleziona File.
  2. Fai clic su Sfoglia.
  3. Seleziona il file google-chat-overview.pdf.
  4. Fai clic su Continua.
  5. Imposta il nome del datastore su gchat-knowledge-ds.
  6. Fai clic su Crea.

a675df7490b83900.png

  1. Seleziona il datastore gchat-knowledge-ds nella tabella.
  2. Fai clic su Crea.

f121d580771ed96.png

  1. Dopo un paio di minuti, fai clic su Menu ☰ > Generatore di agenti > App e noterai che l'app è visibile.

d929a7431dd84968.png

  1. Fai clic su Menu ☰ > Generatore di agenti > Datastore.

  1. Fai clic sul datastore gchat-knowledge-ds. Il numero di documenti è 1, il che indica che è pronto.

558319790a0accf2.png

Completare e testare l'app

Nella console Dialogflow CX, segui questi passaggi:

  1. Selezionare il tuo progetto Google Cloud.
  2. Seleziona l'agente knowledge.

ca9b2fb4be92e8e4.png

  1. Seleziona Impostazioni agente > AI generativa > Agente generativo.
  2. Passa dal modello Text Bison a Gemini Pro.
  3. Fai clic su Salva.

68cc4713ec9b25a0.png

  1. Fai clic su Testa agente.
  2. Invia What is Google Chat?. L'agente risponde con qualcosa di significativo.

8e3a2cb02469041a.png

Integrare l'app Google Chat

Nella console Dialogflow CX, segui questi passaggi:

  1. Selezionare il tuo progetto Google Cloud.
  2. Nella riga dell'agente della conoscenza, fai clic su 1e7ede7abae4aa3c.png > Copia nome.

e19f61185158110d.png

Nella console Google Cloud, segui questi passaggi:

  1. Vai alla configurazione dell'API Google Chat.

  1. Nella sezione Impostazioni di connessione, seleziona Dialogflow.
  2. In Impostazioni di Dialogflow, seleziona Dialogflow CX.
  3. Imposta Nome risorsa dell'agente o dell'ambiente sul nome dell'agente che hai copiato.
  4. Rimuovi i due comandi slash.

505ff39a50880904.png

  1. In Google Chat, invia What is Google Chat? in un messaggio diretto all'app Google Chat. L'agente risponde con qualcosa di significativo.

abda9e43b81fb0ea.png

9. (Facoltativo) App 2: aggiungi origini

Concetti di revisione

Webhook Dialogflow CX

Un servizio che ospita la logica di business o chiama altri servizi. Durante una sessione Dialogflow CX, i webhook possono utilizzare i dati estratti dall'elaborazione del linguaggio naturale per generare risposte dinamiche, convalidare i dati raccolti o attivare azioni sul backend.

Cloud Functions

Cloud Functions è ideale per creare backend serverless, eseguire l'elaborazione dei dati in tempo reale e creare app intelligenti. Non ci sono server di cui eseguire il provisioning, la gestione, l'applicazione di patch o l'aggiornamento. Vengono scalati automaticamente e sono ad alta disponibilità e a tolleranza di errore.

Rivedere i flussi

Rispondi alla domanda (aggiornamento)

92767c07c7b252aa.png

Esaminare il codice sorgente

L'unico codice sorgente di cui hai bisogno è la funzione per adattare le risposte dell'agente ai messaggi di Google Chat. Viene utilizzato come webhook.

package.json

// The function relies on the Cloud Functions framework to run.

{
  "name": "agent-response-adapter",
  "version": "0.0.1",
  "dependencies": {
    "@google-cloud/functions-framework": "^3.0.0"
  },
  ...
}

index.js

/** 
 * Handles all incoming requests.
 *
 * It takes a Dialogflow CX agent response as input and returns a
 * valid Google Chat card message with both the text and source links
 */
functions.http('agent-response-adapter', (request, response) => {
  // Creates Google Chat buttons based on the data store agent response
  // grounding details.
  var linkTitles = [];
  var linkButtons = [];
  const grounding = request.body.messages[1].payload.richContent[0][0];
  if (grounding.type === "match_citations") {
    // Supports citation match type.
    grounding.citations.forEach((citation) => {
      // Avoid duplications.
      if (linkTitles.indexOf(citation.title) < 0) {
        linkButtons.push({
          text: citation.title,
          onClick: { openLink: {
            url: citation.actionLink
          }}
        });
        linkTitles.push(citation.title);
      }
    });
  } else if (grounding.type === "info") {
    // Supports info type.
    if (linkTitles.indexOf(grounding.title) < 0) {
      linkButtons.push({
        text: grounding.title,
        onClick: { openLink: {
          url: grounding.actionLink
        }}
      });
      linkTitles.push(grounding.title);
    }
  }

  // Sends the Dialogflow CX fulfillment response to replace the agent response
  // with the Chat message with text and source buttons.
  response.send({ fulfillment_response: {
    merge_behavior: "REPLACE",
    messages: [{ payload: {
      // Reuses the original data store agent response text.
      text: request.body.messages[0].text.text[0],
      cardsV2: [{
        cardId: "sourcesCard",
        card: { sections: [{
          header: "Sources",
          widgets: [{ buttonList: {
            buttons: linkButtons
          }}]
        }]}
      }]
    }}]
  }});
});

Aggiorna il progetto Google Cloud

Nella console Google Cloud, segui questi passaggi:

  1. Abilita le API Cloud Build, Cloud Functions, Cloud Logging, Artifact Registry e Cloud Run.

  1. Fai clic su Menu ☰ > API e servizi > API e servizi abilitati e poi verifica che le API siano abilitate.

Aggiorna l'agente del datastore Dialogflow CX

Devi eseguire il deployment di una Cloud Function e aggiornare il webhook Dialogflow CX per attivarlo con più origini, se possibile.

Restituisci più fonti

Per impostazione predefinita, un nuovo agente del datastore restituisce al massimo un'origine, ma puoi modificarla per visualizzarne altre.

Nella console Dialogflow CX, segui questi passaggi:

  1. Selezionare il tuo progetto Google Cloud.
  2. Seleziona l'agente knowledge.
  3. Seleziona Pagina iniziale.
  4. Seleziona Modifica datastore.
  5. Nella sezione Risposte dell'agente, imposta Opzioni di risposta del datastore su 5.
  6. Fai clic su Salva.

f5932d03057df645.png

Avvia Funzione Cloud

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ☰ > Cloud Functions.

  1. Fai clic su Crea funzione.
  2. Nella sezione Opzioni di base, imposta name su function-1.
  3. In Autenticazione, seleziona il pulsante di opzione Consenti chiamate non autenticate.
  4. In Impostazioni di runtime, build, connessioni e sicurezza, imposta Numero massimo di istanze su 3.
  5. Fai clic su Avanti.

bd3790a9285f9c07.png

  1. Imposta Punto di ingresso su agent-response-adapter.
  2. Sostituisci i contenuti predefiniti con i file package.json e index.js.
  3. Fai clic su Esegui il deployment.

b379bb8ca0fc1079.png

  1. Copia l'URL mentre aspetti un paio di minuti per il deployment della funzione.

eaae08cf048b9b1c.png

Avvia webhook

Devi configurare l'agente Dialogflow CX in modo che utilizzi un webhook che attivi la funzione appena implementata.

Nella console Dialogflow CX, segui questi passaggi:

  1. Selezionare il tuo progetto Google Cloud.
  2. Seleziona l'agente knowledge.
  3. Seleziona Gestisci > Webhook > Crea.
  4. Imposta Nome visualizzato su Google Chat Response Adapter.
  5. Imposta Webhook URL sull'URL che hai copiato in precedenza.
  6. Fai clic su Salva.

5f3c6804d52b87c1.png

  1. Fai clic su Crea.
  2. Seleziona Pagina iniziale.
  3. Seleziona Modifica datastore.
  4. Nella sezione Impostazioni webhook, fai clic sul pulsante di attivazione/disattivazione Abilita webhook.
  5. Seleziona Adattatore di risposta Google Chat per webhook.
  6. Imposta tag su arbitrary_tag.
  7. Fai clic su Salva.

442fcaaec9b8f2e3.png

App di test

  • In Google Chat, invia What is Google Chat? in un messaggio diretto all'app Google Chat. L'agente risponde con qualcosa di significativo e una scheda con le fonti, se presenti.

9468866bfe848bb8.png

10. App 3: Build

Concetti di revisione

Interazioni conversazionali

Si tratta di scambi di informazioni o idee tra due o più persone in linguaggio naturale. Ciò è in contrasto con le interfacce tecniche che spesso si basano su scambi stateless, altamente strutturati e intolleranti.

Specifica OpenAPI

Fornisce un mezzo coerente per trasportare le informazioni in ogni fase del ciclo di vita dell'API. È un linguaggio di specifica per le API HTTP che definisce la struttura e la sintassi in modo indipendente dal linguaggio di programmazione in cui viene creata l'API. Le specifiche API sono in genere scritte in YAML o JSON, il che consente una facile condivisione e utilizzo delle specifiche.

Agente Dialogflow CX

Il componente di base delle app di agenti. Un'app agente in genere ha molti agenti, ognuno dei quali è definito per gestire attività specifiche. I dati dell'agente vengono forniti all'LLM, in modo che disponga delle informazioni necessarie per rispondere alle domande ed eseguire le attività. Ogni agente può fornire informazioni, inviare query a servizi esterni o rimandare la gestione della conversazione a un flusso Dialogflow CX o a un altro agente per gestire le attività secondarie.

Strumento Dialogflow CX

Gli strumenti vengono utilizzati per connettere le app di agenti a sistemi esterni. Questi sistemi possono aumentare le conoscenze delle app di agenti e consentire loro di eseguire attività complesse in modo efficiente.

Esamina l'architettura

9d3342d12f3b4dda.png

Questa app Google Chat è creata con Dialogflow CX e funziona nel seguente modo:

  1. Un utente invia un messaggio all'app, in un messaggio diretto o in uno spazio.
  2. L'app, che è un agente Dialogflow CX ed è associata a un progetto Google Cloud, elabora il messaggio.
  3. L'app si integra con un agente.
  4. L'app invia una risposta sincrona, in un messaggio diretto o nello spazio originale.

Rivedere i flussi

Raccogliere recensioni

a67a5b8b513bfc2c.png

Esaminare il codice sorgente

L'unico codice sorgente necessario è la funzione per simulare il servizio backend che l'agente utilizza come strumento.

package.json

// The function relies on the Cloud Functions framework to run.

{
  "name": "feedback-app-backend",
  "version": "0.0.1",
  "dependencies": {
    "@google-cloud/functions-framework": "^3.0.0"
  },
  ...
}

index.js

/** 
 * Handles all incoming requests.
 * 
 * It always returns OK in plain text.
 */
functions.http('feedback-app-backend', (request, response) => {
    response.send('OK');
});

service-openapi.yaml

// Defines the backend service structure and how to request it.

openapi: 3.1.0
info:
  title: Review Store
  license:
    name: Apache 2.0
    identifier: Apache-2.0
  version: 0.0.1
servers:
  - url: https://us-central1-project-0.cloudfunctions.net
paths:
  /store-review:
    post:
      operationId: storeReview
      summary: Store a new review
      requestBody:
        content:
          application/json:
            schema:
              type: object
              properties:
                stars:
                  type: integer
                  format: int64
      responses:
        '200':
          description: success
          content:
            application/json:
              schema:
                type: string

Avviare la simulazione del servizio di backend

Esegui il deployment di una Cloud Function per simulare un servizio di backend che l'app agente Dialogflow CX deve integrare e chiamare come strumento.

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ☰ > Cloud Functions.

  1. Fai clic su Crea funzione.
  2. Nella sezione Opzioni di base, imposta name su function-2.
  3. In Autenticazione, seleziona il pulsante di opzione Consenti chiamate non autenticate.
  4. In Impostazioni di runtime, build, connessioni e sicurezza, imposta Numero massimo di istanze su 3.
  5. Fai clic su Avanti.

e8cf0ee7441bf634.png

  1. Imposta Punto di ingresso su feedback-app-backend.
  2. Sostituisci i contenuti predefiniti con i file package.json e index.js.
  3. Fai clic su Esegui il deployment.

bdb5cf9f503aa7f6.png

  1. Copia l'URL mentre aspetti un paio di minuti per il deployment della funzione.

Crea l'app agente Dialogflow CX

Crea app

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ☰ > Generatore di agenti > App.

  1. Fai clic su Nuova app.
  2. Seleziona Agente.
  3. Imposta Nome visualizzato su Feedback App.
  4. Fai clic su Crea.

7ef3dbacee96c5aa.png

Avvia strumento

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ☰ > Generatore di agenti > App.

  1. Seleziona l'agente App per il feedback.
  2. Fai clic su Strumenti > + Crea.
  3. Imposta Nome su review.
  4. Seleziona OpenAPI.
  5. Imposta description sul seguente valore:
The tool takes the number of stars as a parameter of the store review method and saves it in a database for later use.
  1. Scarica e sostituisci $URL nel file service-openapi.yaml con l'URL che hai copiato in precedenza.
  2. Imposta YAML Schema sui contenuti modificati del file service-openapi.yaml.
  3. Fai clic su Salva.

58085d6d56b603f7.png

Avvia agente

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ☰ > Generatore di agenti > App.

  1. Seleziona l'agente App per il feedback.
  2. Seleziona Agenti > Agente generativo predefinito.
  3. Imposta Nome agente su Feedback collector.
  4. Imposta goal sul seguente valore:
You are an agent that collects reviews from Google Chat app developers.
A review may be between 0 and 5 stars. The more stars, the more positive the review.
  1. Imposta instructions sul seguente valore:
If the developer didn't provide the number of stars, ask for the number of stars.
After the developer provides the number of stars of the review, confirm the number with the developer and use ${TOOL: review} to store the review with the number of stars.
If ${TOOL: review} fails, apologize and ask to try again later. Otherwise, thank the developer for the review.
  1. Fai clic su Salva.

ebee7fdfa826b487.png

App di test

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ☰ > Generatore di agenti > App.

  1. Seleziona l'agente App per il feedback.
  2. Vai ad Anteprima agente.
  3. In Agente, seleziona Raccoglitore di feedback.
  4. In Seleziona modello generativo, seleziona gemini-pro.
  5. Invia il messaggio Hello! per iniziare.

90ca8cb7b2c1cb4b.png

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ☰ > Cloud Functions.

  1. Seleziona function-2 > Log. Alcuni log mostrano Google-Dialogflow come chiamante.

48bfdf1788004d18.png

Integrare l'app Google Chat

Nella console Dialogflow CX, segui questi passaggi:

  1. Selezionare il tuo progetto Google Cloud.
  2. Fai clic sul menu Azioni dell'agente Feedback App.
  3. Fai clic su Copia nome.

Nella console Google Cloud, segui questi passaggi:

  1. Vai alla configurazione dell'API Google Chat.

  1. Imposta Nome risorsa dell'agente o dell'ambiente sul nome dell'agente che hai copiato in precedenza.

df16619a1cb85cf8.png

  • In Google Chat, invia Hello! in un messaggio diretto all'app Google Chat per iniziare. L'agente risponde in modo simile al test dalla console Dialogflow CX.

99a7a0295f122f31.png

11. Esegui la pulizia

Elimina progetto Google Cloud

Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questo codelab, ti consigliamo di eliminare il progetto Google Cloud.

Nella console Google Cloud, segui questi passaggi:

  1. Fai clic su Menu ☰ > IAM e amministrazione > Impostazioni.

  1. Fai clic su Chiudi.
  2. Inserisci l'ID progetto.
  3. Fai clic su Chiudi comunque.

407699a4e03afea6.png

Eliminare il progetto Apps Script

Ti consigliamo di eliminare anche il progetto Apps Script.

Nella console Apps Script, segui questi passaggi:

  1. Seleziona il progetto.
  2. Fai clic sul menu Azioni.
  3. Fai clic su Rimuovi.

fa3a42d7d2201eb9.png

12. Complimenti

Complimenti! Hai creato app Google Chat con Gemini.

Passaggi successivi

In questo codelab abbiamo mostrato solo casi d'uso semplici, ma ci sono molte aree di espansione che potresti prendere in considerazione nelle tue app Google Chat, ad esempio:

  • Integrati con altri modelli di AI generativa, inclusi quelli personalizzati.
  • Supportare altri tipi di contenuti multimediali, come audio, immagini e video.
  • Utilizzare la multimodalità.
  • Si basano su finestre contestuali più lunghe e cicli di feedback.
  • Pubblica app Google Chat pronte per la produzione sul marketplace. Gli sviluppatori hanno a disposizione molte risorse, come video di YouTube, siti web di documentazione, esempi di codice e tutorial.
  • Attiva Google Chat per la tua organizzazione. La funzionalità della modalità di importazione semplifica l'inizio.

Scopri di più