DEV Community: Thomas G. Lopes

Introducing AI Enhanced Command Center for Appwrite Console

Thomas G. Lopes — Wed, 30 Aug 2023 15:14:04 +0000

We are happy to introduce a new exciting feature inside the Appwrite Console, the Command Center with enhanced AI. Our dedication to improving the developer experience comes with a responsibility to cater to that promise. And with this new feature, we do just that. Minimizing friction and maximizing experience with keyboard shortcuts and AI search.

If you'd like to know in-depth details about how we built the new AI-enhanced Command Center, head over to this blog post, where we dive deeper into the engineering aspects.

For now, let's take a closer look at what this feature can do.

Interacting with the Command Center 🤖

To start using the Command Center, you can open it using the ⌘ + K shortcut (Ctrl + K if you're using Windows or Linux), or clicking on the search icon in the Console header. You'll see a modal pop-up with a search input and multiple commands.

There are several ways to execute commands. While you can use the mouse to press one of them, the Command Center was designed around the keyboard. As such, you can use the up and down arrow keys to select your command and press enter to execute them.

You'll notice that some commands have keyboard shortcuts next to them. If you press these shortcuts while the Command Center is closed, the command will immediately be executed!

You may also use the search input to filter from the list of commands. Additionally, you may search for entities throughout the Console! For example, if you have a function called fetch_users, and you search for fetch, a command to navigate to that function will appear in the Command Center.

Navigation 🗺️

Besides navigation to entities, we've spread a lot of navigation commands throughout the Console.

If you're inside a project, at any moment you may press the D, A, S or F keys to go to Databases, Auth, Security and Functions screens respectively. Besides these, there are other commands you may discover when using the Command Center throughout the Console.

Some of these commands are context-sensitive. For example, if you're inside a Collection, you'll find navigation commands to go through different tabs related to it.

Entity Creation 🛠️

Navigation commands aren't the only ones that are context-sensitive. Another type of context-sensitive command is entity creation. If we look at the Collection screen once again, you'll find a Create Attribute command.

If you execute this command, you'll find that the Command Center opens up a new panel.

Some commands open up these panels to enable further keyboard interaction. In this case, it allows you to choose what kind of attribute you want to create.

AI Assistant 🔎

The Command Center comes with another exciting feature: the AI Assistant!

Trained on Appwrite's documentation, the Assistant allows you to ask any Appwrite related question, and it'll give answers with detailed explanations, step-by-step instructions, and code snippets. Be on the look-out for more Assistant-related features in the future!

Closing Notes 📝

The Command Center is one of the most exciting additions to our Console, and I hope this article made you eager to try it out. If you have any feedback or questions, please let us know in the comments, or hop on over to our Discord server to talk with us.

Additional resources

The Console repo: https://github.com/appwrite/console
The AI assistant repo: https://github.com/appwrite/assistant

Inside Appwrite's new Command Center

Thomas G. Lopes — Wed, 30 Aug 2023 15:13:15 +0000

The Appwrite Console is the main way developers like us manage their Appwrite instances. It has been carefully designed to squeeze out the best developer experience possible, and we hope you've been loving it just as much as we have.

Engineers like us are hyper-optimisers. It’s a part of our identity. We celebrate our compulsion to overthink every decision we make, like when we argue about tabs vs. spaces, build custom Vim plugins, or add keyboard shortcuts that we forget the next day. If this sounds like you, get ready to unleash the power user inside you.

We know reaching for a mouse is a lot of effort, so we are adding a keyboard-oriented feature, the Command Center. Now you can navigate the Appwrite Console with shortcuts alone. Let’s go over what it can do, and how we built it.

What is the Command Center?

The Command Center is a menu that contains a large variety of shortcuts to the most used Console-related tasks. By using its search input, you can quickly filter through commands, and execute one.

For example, if you're viewing a database, you can open the Command Center and search for the Create Attribute command. It'll open a panel in which you can choose the type of attribute you want to create, and open the form to create said attribute. The best part? You can operate the entire Command Center using just the keyboard.

You may notice that most commands will have keyboard combinations next to them. When the command center is closed, you may input these keyboard shortcuts to instantly activate the associated command, without needing to open the command center! Some commands are context-aware though, and will only appear on certain pages.

Some commands may even open up sub-panels, which brings us to another exciting new feature of the Command Center.

AI assistant sub-panel

As part of this release, we also are shipping an AI assistant! You can ask any Appwrite-related question, and it will answer in detail, fetching information from our documentation, and giving code snippets where applicable.

This is still an experimental feature, so the answers may not be 100% accurate. Expect to see more enhanced capabilities from the AI assistant in the future!

How we implemented the Command Center

The Command Center has a few challenges going for it. We need to:

Contextually show/hide commands based on the current route and dynamic values
Support sub-panels
Rank commands according to how useful they will be in any given moment
Trigger commands based on keyboard shortcuts
- Disable these shortcuts when using an input, a modal, or a wizard
Be able to search for entities inside your Appwrite instance and provide related commands

Contextual commands

To do this, we created a combination of custom Svelte Stores. We have a helper, registerCommands, that adds a list of commands to that store, and should only be called inside Svelte components or routes:

$: $registerCommands([
    {
        label: 'Go to Appwrite website',
        callback() {
            goto('https://appwrite.io/')
        },
        keys: ['g', 'a', 'w']
    }
])

There's something interesting about the code-block above. It starts with a dollar sign accompanied by a colon ( $: ). In Svelte, that marks a statement as reactive, meaning that if any variable inside that block changes, it gets re-run. This allows us to pull off some nifty tricks:

$: $registerCommands([
    {
        label: 'Go to Databases',
        callback() {
            goto('/databases')
        },
        keys: ['d'],
        // Disable if we're already in a Database page
        disabled: $page.url.pathname.startsWith('/databases'),
        rank: 10
    },
    {
        // Dynamic labels
        label: `Set theme to ${$theme === 'dark' ? 'light' : 'dark'}`
        callback() {
            $theme = $theme === 'dark' ? 'light' : 'dark';
        },
        rank: 1
    }
])

In this example above, page and theme are Svelte stores. By prefixing them with a dollar sign, you get access to their values. Whenever these values get updated, $registerCommands is run again, and the commands get updated.

Now, if it gets run again, how come the commands don't get duplicated? That's thanks to how registerCommands works internally. Whenever it gets run again, it'll delete the previous commands before adding the new ones.

P.S. You may notice that registerCommands is also pre-fixed with a dollar sign, meaning it's also a store! Why though? Go to our console repository and try to figure out why! Let me know in the comments if you find out 🔍

Another important thing to note: Whenever a component gets destroyed, the commands are also deleted. This means that we can define page-exclusive commands, or even group them under a certain route! This is because of SvelteKit's file-based router. In this router, every page is defined by a separate Svelte component, meaning that to represent a page at localhost/databases, you'd have a file routes/databases/+page.svelte. It doesn't stop there though, if you want to define a layout that wraps around all sub-routes inside the database folder (e.g. /databases/123, /databases/456/settings), you can!

<!-- routes/databases/+layout.svelte -->
<div class="container">
    <slot />
</div>

<!-- routes/databases/[database-id]/+page.svelte -->
<div>Hello database!</div>

<!-- Route 'localhost/databases/123' will render: -->
<div class="container">
    <slot />
</div>

With this in mind, if we want to define commands that only appear on databases sub-routes, we just need to run registerCommands inside routes/databases/+layout.svelte!

Keyboard shortcuts

All the registered commands are stored into their own separate store. We then have an internal key-down handler that we bind to the page's window, to listen for any incoming commands.

<svelte:window on:keydown={$commandCenterKeyDownHandler} />

The handler does a lot of things under the hood, such as:

Preventing keys coming from input or text-area elements from triggering a command
Preventing keys from within wizards or modals from triggering a command
Deal with command conflicts, e.g. if one command has a shortcut g, and another has a shortcut g then e, if you press g, it'll wait a while to see if you press e. If you do press it, it triggers the second command, otherwise, it'll trigger the first one

Sub-panels

Commands may also open up sub-panels. To open up a sub-panel, you just need to execute addSubPanel inside one of the commands.

$: $registerCommands([
    {
        label: 'Create attribute',
        callback() {
            addSubPanel({
                name: 'Create attribute',
                component: CreateAttribute
            })
        },
        keys: ['c', 'a'],
    },
])

Where CreateAttribute is a component that expands upon our Template component.

<!-- CreateAttribute.svelte -->
<script lang="ts">
    let search = '';
    let options = attributeOptions.map((option) => {
        return {
            label: option.name,
            icon: option.icon,
            callback() {
                initCreateAttribute(option.name);
            }
        };
    });

    $: filteredOptions = options.filter((option) => {
        return option.label.toLowerCase().includes(search.toLowerCase());
    });
</script>

<Template options={filteredOptions} bind:search>
    <div class="u-flex u-cross-center u-gap-8" slot="option" let:option>
        <i class="icon-{option.icon}" />
        <span>{option.label}</span>
    </div>
</Template>

Searchers

Besides registerCommands, we also have registerSearchers. Searchers are basically functions that receive an input, and return a list of commands.

const people = ['Thomas', 'Torsten', 'Arman'];

const peopleSearcher = ((input) => {
    return people
        .filter((p) => p.toLowerCase().includes(input.toLowerCase()))
        .map((p) => ({
            label: `Select ${p}`,
            callback: () => {
                console.log('You selected', p);
            }
        }));
}) satisfies Searcher;

$registerSearchers(peopleSearcher);

Now if you input thomas into the Command Center, you'll see a new command called Select Thomas. Pretty straightforward!

AI Assistant

Our initial implementation of the Appwrite Assistant is loosely based on this tutorial.

In summary, we offer a wrapper over OpenAI's ChatGPT API. We do this because we have to expand the API's functionality, due to 2 issues:

ChatGPT's training data is not kept up-to-date, meaning it does not have access to our latest documentation
We only want the Assistant to answer Appwrite-related questions

To solve these problems, we store all the relevant documentation data for the assistant to access. We then feed it to LangChain, which provides a helper to answer questions over docs. Finally, we chain that helper to the ChatGPT API, and provide some predefined parameters to ensure we restrict the accepted questions to Appwrite-related topics.

You can see the code for the Assistant on our public GitHub repository.

Closing Notes

The Command Center is one of the most exciting additions to our Console, and I hope this article helped illustrate its capabilities, and how you may implement a similar feature into your own apps. If you have any feedback or questions, please let us know in the comments, or hop on over our Discord server to talk with us!

How we implemented the card animation in Appwrite Cloud Public Beta

Thomas G. Lopes — Tue, 09 May 2023 11:54:31 +0000

For the annoucement of the public beta of Cloud, we wanted to create something unique that everyone could call their own. We decided to create a personalized card, with animation and interactivity sprinkled it, to really give the whole experience a “special” feel.

The Cloud Beta Card page in the Appwrite Console

When our design team showed us the design, we LOVED it. But soon, reality struck, and I realized I am going to have to implement this design. It needs to look good, work on multiple browsers, and perform well. Quite the challenge!

Nevertheless, we pulled it off with the power of Svelte and CSS, and I'm excited to share what I learned with everyone.

Inspiration

Our inspiration for this feature came from https://poke-holo.simey.me/ which features a similar card animation effect for Pokemon cards. This project, like Appwrite, is open-source, and like our console, built with Svelte! Meaning we could learn a lot from it.

The Implementation Process

The final card animation can be broken down into pieces. We’ll be going over the main ones in isolation:

“Popping up” the card on click
Rotating the card
Card shine

You can preview the code and output here: https://appwrite-card-snippets.vercel.app/

If you’re curious, you can also check out the source code of the card element, where we integrate all of these pieces and some extra details ✨

Setup the base HTML structure

The card needs a back and front side to it. Since we’re doing animations in the 3D space, we also use the perspective CSS attribute. Make sure to bring your 3D glasses!

The result of this markup is the following:

<div class="card">
    <div class="card-inner">
        <div class="card-back">
            <img
                src="https://cloud.appwrite.io/v1/cards/cloud-back?mock=normal"
                alt="The back of the Card"
                loading="lazy"
                width="450"
                height="274"
            />
        </div>
        <div class="card-front">
            <img
                src="https://cloud.appwrite.io/v1/cards/cloud?mock=normal"
                alt="The front of the card"
                width="450"
                height="274"
            />
        </div>
    </div>
</div>

<style>
    .card {
        perspective: 1000px;
    }

    .card-inner {
        display: grid;
        transition: transform 0.8s;
        transform-style: preserve-3d;
    }

    /* Do an horizontal flip when you move the mouse over the flip box container */
    .card:hover .card-inner {
        transform: rotateY(180deg);
    }

    /* Position the front and back side */
    .card-front,
    .card-back {
        grid-area: 1/1;
        backface-visibility: hidden;
    }

    /* Rotate the back side 180 degrees */
    .card-back {
        transform: rotateY(180deg);
    }
</style>

You can preview it here.

Popping up the card

We want the card to pop up when the user clicks it, so they can have a closer look. While popping up, we also want the card to spin around because it’s more fun that way 🕺

We will use Svelte’s spring store to achieve this effect. Whenever we set the store to a new value, they’ll smoothly transition to it instead of immediately changing. We’ll need two stores, scale for controlling the card size and rotateDelta to control the rotation.

<script>
    import { spring } from 'svelte/motion';

    let active = true;

    const smooth = { stiffness: 0.03, damping: 0.45 };
    const scale = spring(1, smooth);
    const rotateDelta = spring(0, smooth);

    function popup() {
        scale.set(1.45);
        rotateDelta.set(360);
    }

    function retreat() {
        scale.set(1);
        rotateDelta.set(0);
    }

    $: if (active) {
        popup();
    } else {
        retreat();
    }

    $: style = [`--scale: ${$scale}`, `--rotateDelta: ${$rotateDelta}deg`].join(';');
</script>

<div class="card" {style}>
    <button class="card-inner" on:click={() => (active = !active)}>
        <div class="card-back">
            <img
                src="https://cloud.appwrite.io/v1/cards/cloud-back?mock=normal"
                alt="The back of the Card"
                loading="lazy"
                width="450"
                height="274"
            />
        </div>
        <div class="card-front">
            <img
                src="https://cloud.appwrite.io/v1/cards/cloud?mock=normal"
                alt="The front of the card"
                width="450"
                height="274"
            />
        </div>
    </button>
</div>

<style>
    /* Button reset */
    button {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        outline: inherit;
    }

    .card {
        perspective: 1000px;
    }

    .card-inner {
        display: grid;
        transform: scale(var(--scale)) rotateY(var(--rotateDelta));
        transform-style: preserve-3d;
    }

    /* Position the front and back side */
    .card-front,
    .card-back {
        grid-area: 1/1;
        backface-visibility: hidden;
    }

    /* Rotate the back side 180 degrees */
    .card-back {
        transform: rotateY(180deg);
    }
</style>

You can preview the result here.

Rotating the card with the cursor

Now comes my favorite part, rotating the card around with your cursor! We want to create an enjoyable experience by letting the user control the card beyond just popping it up and allowing them to move the card freely.

We’ll also be using the spring store here, but we’ll only need one this time, rotate, which has an x and y-axis.

<script lang="ts">
    import { spring } from 'svelte/motion';

    const smooth = { stiffness: 0.066, damping: 0.25 };
    const rotate = spring({ x: 0, y: 0 }, smooth);

    const round = (num: number, fix = 3) => parseFloat(num.toFixed(fix));
    function getMousePosition(e: MouseEvent | TouchEvent) {
        if ('touches' in e) {
            return {
                x: e?.touches?.[0]?.clientX,
                y: e?.touches?.[0]?.clientY,
            };
        } else {
            return {
                x: e.clientX,
                y: e.clientY,
            };
        }
    }

    const interact = (e: MouseEvent | TouchEvent) => {
        const { x: clientX, y: clientY } = getMousePosition(e);

        const el = e.target as HTMLElement;
        const rect = el.getBoundingClientRect(); // get element's current size/position
        const absolute = {
            x: clientX - rect.left, // get mouse position from left
            y: clientY - rect.top, // get mouse position from right
        };

        const center = {
            x: round((100 / rect.width) * absolute.x) - 50,
            y: round((100 / rect.height) * absolute.y) - 50,
        };

        rotate.set({
            x: round(-(center.x / 3.5)),
            y: round(center.y / 2),
        });
    };

    const interactEnd = () => {
        setTimeout(() => {
            rotate.set({ x: 0, y: 0 });
        }, 500);
    };

    $: style = [`--rotateX: ${$rotate.x}deg`, `--rotateY: ${$rotate.y}deg`].join(';');
</script>

<div class="card" {style}>
    <div class="card-inner" on:pointermove={interact} on:mouseout={interactEnd} on:blur={interactEnd}>
        <div class="card-back">
            <img
                src="https://cloud.appwrite.io/v1/cards/cloud-back?mock=normal"
                alt="The back of the Card"
                loading="lazy"
                width="450"
                height="274"
            />
        </div>
        <div class="card-front">
            <img
                src="https://cloud.appwrite.io/v1/cards/cloud?mock=normal"
                alt="The front of the card"
                width="450"
                height="274"
            />
        </div>
    </div>
</div>

<style>
    .card {
        perspective: 1000px;
    }

    .card-inner {
        display: grid;
        transform-style: preserve-3d;
        transform: rotateY(var(--rotateX)) rotateX(var(--rotateY));
        transform-origin: center;
    }

    /* Position the front and back side */
    .card-front,
    .card-back {
        grid-area: 1/1;
        backface-visibility: hidden;
    }

    /* Rotate the back side 180 degrees */
    .card-back {
        transform: rotateY(180deg);
    }
</style>

You can see the result here.

Glare

Less but not least, we can also add a little bit of shine to the card, augmenting the 3D feel.

<script lang="ts">
    import { spring } from 'svelte/motion';

    const smooth = { stiffness: 0.066, damping: 0.25 };
    const glare = spring({ x: 0, y: 0, o: 0 }, smooth);

    const round = (num: number, fix = 3) => parseFloat(num.toFixed(fix));
    function getMousePosition(e: MouseEvent | TouchEvent) {
        if ('touches' in e) {
            return {
                x: e?.touches?.[0]?.clientX,
                y: e?.touches?.[0]?.clientY,
            };
        } else {
            return {
                x: e.clientX,
                y: e.clientY,
            };
        }
    }

    const interact = (e: MouseEvent | TouchEvent) => {
        const { x: clientX, y: clientY } = getMousePosition(e);

        const el = e.target as HTMLElement;
        const rect = el.getBoundingClientRect(); // get element's current size/position
        const absolute = {
            x: clientX - rect.left, // get mouse position from left
            y: clientY - rect.top, // get mouse position from right
        };

        glare.set({
            x: round((100 / rect.width) * absolute.x),
            y: round((100 / rect.height) * absolute.y),
            o: 1,
        });
        console.log(absolute, round((100 / rect.width) * absolute.x));
    };

    const interactEnd = () => {
        setTimeout(() => {
            glare.update((old) => ({ ...old, o: 0 }));
        }, 500);
    };

    $: style = [`--glareX: ${$glare.x}%`, `--glareY: ${$glare.y}%`, `--glareO: ${$glare.o}`].join(
        ';'
    );
</script>

<div class="card" {style}>
    <div class="card-inner" on:pointermove={interact} on:mouseout={interactEnd} on:blur={interactEnd}>
        <div class="card-back">
            <img
                src="https://cloud.appwrite.io/v1/cards/cloud-back?mock=normal"
                alt="The back of the Card"
                loading="lazy"
                width="450"
                height="274"
            />
        </div>
        <div class="card-front">
            <img
                src="https://cloud.appwrite.io/v1/cards/cloud?mock=normal"
                alt="The front of the card"
                width="450"
                height="274"
            />
            <div class="card-glare" />
        </div>
    </div>
</div>

<style>
    .card {
        perspective: 1000px;
    }

    .card-inner {
        display: grid;
        transform-style: preserve-3d;
        transform: rotateY(var(--rotateX)) rotateX(var(--rotateY));
        transform-origin: center;
    }

    /* Position the front and back side */
    .card-front,
    .card-back {
        grid-area: 1/1;
        backface-visibility: hidden;
    }

    .card-front {
        display: grid;
    }

    .card-front > * {
        grid-area: 1/1;
    }

    /* Rotate the back side 180 degrees */
    .card-back {
        transform: rotateY(180deg);
    }

    .card-glare {
        border-radius: 14px;
        transform: translateZ(1px);
        z-index: 4;
        background: radial-gradient(
            farthest-corner circle at var(--glareX) var(--glareY),
            rgba(255, 255, 255, 0.8) 10%,
            rgba(255, 255, 255, 0.65) 20%,
            rgba(0, 0, 0, 0.5) 90%
        );
        mix-blend-mode: overlay;
        opacity: calc(var(--glareO) * 0.5);
    }
</style>

You can view the result here.

The End Result

The end result was a smooth and visually appealing card animation that added a touch of interactivity to our dashboard.

We hope this detailed breakdown of our implementation process is helpful for other developers looking to add similar effects to their web applications. And we also hope it inspired a bit of awe with the magic that is frontend development 🪄

Thank you for choosing Appwrite Cloud Beta for your cloud computing needs!