Gemini: ChatSession with Kendo Conversational UI and Angular
Tags: angular, kendo, javascript, ia
Published: 2024-01-29 09:59:12

I continued experimenting with Gemini, and after showing @[Jörgen de Groot](@Alt148) my demo of my first chat using [Gemini and the Conversational UI](https://www.danywalls.com/create-your-personalized-gemini-chat-with-kendo-ui-conversational-ui-and-angular), he asked how to maintain the chat history with Gemini to avoid sending the initial prompt and to preserve the context.

> This is the second part of the article "[Create Your Personalized Gemini Chat with Conversational UI and Angular](https://www.danywalls.com/create-your-personalized-gemini-chat-with-kendo-ui-conversational-ui-and-angular)"

This is an important consideration because sending the prompt repeatedly incurs an expense. Additionally, the first version does not support maintaining the initial context or preserving the conversation history.

However, Gemini offers a chat feature that collects our questions and responses, enabling interactive and incremental answers within the same context. This is perfect for our Kendo ChatBot, so let's implement these changes.

## The Chat Session

In the first version, we directly used the `model` to generate content. This time, we will employ the `startChat` method with the model to obtain a `ChatSession` object, which offers a history and initial context with the `prompt`.

The Gemini model offers an option to initiate a `ChatSession`, where we establish our initial prompt and conversation using the `startChat` feature. The `ChatSession` object contains a `sendMessage` method, which enables us to supply only the second prompt from the user.

First, declare a new object `chatSession` with the initial history, which should include the initial `prompt` and the initial answer, for example:

```typescript
 #chatSession = this.#model.startChat({
    history: [
      {
        role: 'user',
        parts: this.#prompt,
      },
      {
        role: 'model',
        parts: "Yes, I'm a Angular expert with Kendo UI",
      },
    ],
    generationConfig: {
      maxOutputTokens: 100,
    },
  });
```

Our next step is to use the `chatSession` instead of directly sending the parts and `user` role to the `model` each time:

```typescript
     const result = await this.#model.generateContent({
          contents: [{ role: 'user', parts }],
        });
```

Replace the `model` with the `chatSession` and utilize the `sendMessage` method:

```typescript
 const result = await this.#chatSession.sendMessage(
          textInput.message.text,
       );
```

Done! 🎉 Our chatbot now supports history and continuous interaction, without sending the full prompt every time, saving our tokens 😊😁

Checkout the demo: 👇


![demo 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwqzyx1kiaxby4p5volw.gif)

## Recap

Yes, it was quite easy to add history support to our chat, saving tokens and providing a significantly better experience for users interacting with our chat.

We learned how to improve the functionality of a Gemini Chatbot by maintaining chat history and preserving context, thus avoiding the repeated sending of initial prompts.

Using the chat feature, which collects questions and responses, for interactive and incremental answers using `ChatSession` and provides a better user experience, and also saves tokens by not sending the full prompt every time. 💰🎉

> Source Code [https://github.com/danywalls/conversational-with-gemini/tree/feature/turn-to-chat](https://github.com/danywalls/conversational-with-gemini/tree/feature/turn-to-chat)