feat: add memory system frontend components and settings UI

[inoribea]

Summary

This PR adds memory system frontend components and settings UI to allow users to configure and manage memory settings in the AIRI application.

Details

• Adds memory store implementation for frontend state management
• Creates memory settings page with UI components for configuration
• Implements memory provider selection and configuration
• Adds UI components for short-term and long-term memory configuration
• Provides configuration options for embedding providers

Testing

1. Verify that memory settings page renders correctly
2. Test memory provider selection functionality
3. Confirm embedding configuration options work properly
4. Verify short-term and long-term memory configuration UI
5. Ensure all memory-related settings are properly saved and applied

[gemini-code-assist]

Summary of Changes

Hello @inoribea, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the AIRI application by integrating a robust memory system. It provides users with a dedicated settings interface to control both short-term and long-term memory functionalities, allowing for detailed configuration of storage providers, embedding services, and message retention policies. This feature aims to improve context continuity and semantic search capabilities within the application.

Highlights

• Memory System Frontend: Introduces a comprehensive frontend for configuring and managing memory settings within the AIRI application.
• Short-Term Memory Configuration: Adds UI components and logic for enabling, configuring, and managing short-term memory, including retention limits, TTL, and provider-specific settings (Local Redis, Upstash Redis, Vercel KV).
• Long-Term Memory Configuration: Provides UI and functionality for enabling, configuring, and managing long-term memory, supporting Postgres + pgvector and Qdrant as providers, along with auto-promotion rules for messages.
• Embedding Provider Settings: Includes a dedicated section for configuring embedding providers (OpenAI, Cloudflare, OpenAI-compatible services) with options for API keys, base URLs, account IDs, and models.
• Centralized State Management: Implements a new Pinia store (useMemoryStore) to centralize the state and logic for all memory-related configurations and operations, including API interactions.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a comprehensive memory system with frontend components and a settings UI. The implementation is well-structured, utilizing a Pinia store for state management and breaking down the UI into logical, reusable Vue components. The new memory.ts store is particularly robust, handling configuration from environment variables for multiple providers, which is a great feature for deployability. I've identified a few minor issues in the Vue components, primarily related to template syntax and CSS classes, and have provided suggestions for fixes. Overall, this is a solid feature addition.

[gemini-code-assist]

The placeholder attribute is using mustache syntax {{ ... }} which is not valid for attribute values in Vue templates. This will result in the literal string {{ ... }} being displayed as the placeholder. You should use v-bind: or its shorthand : to bind the result of the t() function.

This issue also occurs on:

• line 276: placeholder="{{ t('settings.memory.long_term.userIdPlaceholder', 'e.g. airi@home') }}"
• line 323: placeholder="{{ t('settings.memory.long_term.searchPlaceholder', 'What should AIRI remember...') }}"

              :placeholder="t('settings.memory.long_term.qdrantApiKeyPlaceholder', 'Optional if public instance')"

[gemini-code-assist]

The Tailwind CSS class items中心 is invalid. It appears to be a typo and should be items-center to correctly center-align the flex items.

          <label class="items-center flex gap-3 border border-neutral-200 rounded-lg bg-neutral-50 px-3 py-3 dark:border-neutral-800 dark:bg-neutral-900/70">

[gemini-code-assist]

The class dark-border-neutral-700 is not a valid Tailwind CSS class for dark mode. The correct syntax is dark:border-neutral-700. This will ensure the border color is applied correctly in dark mode. This issue is repeated in several places in this file (e.g., lines 321, 327, 335, 340, 347, 355, and 365).

            class="w-full border border-neutral-200 rounded-md bg-white px-3 py-2 text-sm dark:border-neutral-700 dark:bg-neutral-900"

[gemini-code-assist]

The handleToggle function is redundant. v-model="enabledShortTerm" on the <input> element (line 37) already provides two-way data binding, which updates the enabledShortTerm ref automatically. This function can be removed, along with the corresponding @change handler on line 40, to simplify the component.

[gemini-code-assist]

The @change handler is redundant because v-model="enabledShortTerm" already updates the value. This can be removed to simplify the code, along with the handleToggle function it calls.

        <input
          v-model="enabledShortTerm"
          type="checkbox"
          class="h-5 w-5 accent-primary-500"
        >