Skip to content

Commit

Permalink
feat: bot auto complete commands (#90)
Browse files Browse the repository at this point in the history
  • Loading branch information
ifaouibadi authored Apr 1, 2024
1 parent 5bda245 commit 61cb051
Show file tree
Hide file tree
Showing 4 changed files with 182 additions and 2 deletions.
1 change: 1 addition & 0 deletions src/atoms.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ type BotAccounts = {
export const verifiedAccountsAtom = atomWithStorage<Record<string, string>>("VERIFIED_ACCOUNTS", {});
export const botAccountsAtom = atomWithStorage<BotAccounts | null>("BOT_ACCOUNTS", null);
export const minimumTokenThresholdAtom = atomWithStorage<Record<string, TokenThreshold>>("TOKEN_THRESHOLD", {});
export const botCommandsAtom = atomWithStorage<Record<string, any[]>>("BOT_COMMANDS", {});

export function getBotAccountData(): BotAccounts | null {
const defaultStore = getDefaultStore();
Expand Down
4 changes: 3 additions & 1 deletion src/autocomplete/Autocompleter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ import { filterBoolean } from "matrix-react-sdk/src/utils/arrays";
import { timeout } from "matrix-react-sdk/src/utils/promise";
import { ReactElement } from "react";

import CommandProvider from "./CommandProvider";

export interface ISelectionRange {
beginning?: boolean; // whether the selection is in the first block of the editor or not
start: number; // byte offset relative to the start anchor of the current editor selection.
Expand All @@ -46,7 +48,7 @@ export interface ICompletion {
href?: string;
}

const PROVIDERS = [UserProvider, RoomProvider, EmojiProvider, NotifProvider, SpaceProvider];
const PROVIDERS = [UserProvider, RoomProvider, EmojiProvider, NotifProvider, CommandProvider, SpaceProvider];

// Providers will get rejected if they take longer than this.
const PROVIDER_COMPLETION_TIMEOUT = 3000;
Expand Down
154 changes: 154 additions & 0 deletions src/autocomplete/CommandProvider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
/*
Copyright 2016 Aviral Dasgupta
Copyright 2017 Vector Creations Ltd
Copyright 2017 New Vector Ltd
Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import { Room } from "matrix-js-sdk/src/matrix";
import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg";
import { Command, CommandCategories, CommandMap } from "matrix-react-sdk/src/SlashCommands";
import AutocompleteProvider from "matrix-react-sdk/src/autocomplete/AutocompleteProvider";
import { TextualCompletion } from "matrix-react-sdk/src/autocomplete/Components";
import QueryMatcher from "matrix-react-sdk/src/autocomplete/QueryMatcher";
import { TimelineRenderingType } from "matrix-react-sdk/src/contexts/RoomContext";
import { _t } from "matrix-react-sdk/src/languageHandler";
import React from "react";

import { ICompletion, ISelectionRange } from "./Autocompleter";

const COMMAND_RE = /(^\/\w*)(?: .*)?/g;

export type BotCommand = {
name: string;
arguments: {
name: string;
description: string;
}[];
description: string;
};

export default class CommandProvider extends AutocompleteProvider {
public matcher: QueryMatcher<Command>;
public room: Room;

public constructor(room: Room, renderingType?: TimelineRenderingType) {
super({ commandRegex: COMMAND_RE, renderingType });
this.room = room;
this.matcher = new QueryMatcher(this.getRoomCommands(), {
keys: ["command", "args", "description"],
funcs: [({ aliases }): string => aliases.join(" ")], // aliases
context: renderingType,
});
}

public getRoomCommands(): Command[] {
const commandStorage = JSON.parse(localStorage.getItem("BOT_COMMANDS") || "{}");

if (
commandStorage[this.room.name] &&
this.room.getMembers().some((member) => member.userId.includes(this.room.name))
) {
return commandStorage[this.room.name].map(
(cmd: BotCommand) =>
new Command({
command: cmd.name,
args: cmd.arguments.map((arg) => `<${arg.name}>`).join(" "),
description: cmd.description as any,
category: CommandCategories.messages,
}),
);
}

return [];
}

public async getCompletions(
query: string,
selection: ISelectionRange,
force?: boolean,
limit = -1,
): Promise<ICompletion[]> {
const { command, range } = this.getCurrentCommand(query, selection);
if (!command) return [];

const cli = MatrixClientPeg.get();

let matches: Command[] = [];
// check if the full match differs from the first word (i.e. returns false if the command has args)
if (command[0] !== command[1]) {
// The input looks like a command with arguments, perform exact match
const name = command[1].slice(1); // strip leading `/`
if (CommandMap.has(name) && CommandMap.get(name)!.isEnabled(cli)) {
// some commands, namely `me` don't suit having the usage shown whilst typing their arguments
if (CommandMap.get(name)!.hideCompletionAfterSpace) return [];
matches = [CommandMap.get(name)!];
}
} else {
if (query === "/") {
// If they have just entered `/` show everything
// We exclude the limit on purpose to have a comprehensive list
matches = this.getRoomCommands();
} else {
// otherwise fuzzy match against all of the fields
matches = this.matcher.match(command[1], limit);
}
}

return matches
.filter((cmd) => {
const display = !cmd.renderingTypes || cmd.renderingTypes.includes(this.renderingType);
return cmd.isEnabled(cli) && display;
})
.map((result) => {
let completion = result.getCommand() + " ";
const usedAlias = result.aliases.find((alias) => `/${alias}` === command[1]);
// If the command (or an alias) is the same as the one they entered, we don't want to discard their arguments
if (usedAlias || result.getCommand() === command[1]) {
completion = command[0];
}

return {
completion,
type: "command",
component: (
<TextualCompletion
title={`/${usedAlias || result.command}`}
subtitle={result.args}
description={result.description}
// description={_t(result.description)}
/>
),
range: range!,
};
});
}

public getName(): string {
return "*️⃣ " + _t("composer|autocomplete|command_description");
}

public renderCompletions(completions: React.ReactNode[]): React.ReactNode {
return (
<div
className="mx_Autocomplete_Completion_container_pill"
role="presentation"
aria-label={_t("composer|autocomplete|command_a11y")}
>
{completions}
</div>
);
}
}
25 changes: 24 additions & 1 deletion src/context/SuperheroProvider.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
import { useAtom } from "jotai";
import React, { useCallback, useEffect } from "react";

import { minimumTokenThresholdAtom, verifiedAccountsAtom, botAccountsAtom } from "../atoms";
import { minimumTokenThresholdAtom, verifiedAccountsAtom, botAccountsAtom, botCommandsAtom } from "../atoms";

type BotAccounts = {
domain: string;
communityBot: {
userId: string;
apiPrefix: string;
};
superheroBot: {
userId: string;
apiPrefix: string;
};
blockchainBot: {
userId: string;
apiPrefix: string;
};
};

Expand Down Expand Up @@ -52,6 +55,7 @@ const useMinimumTokenThreshold = (config: any): void => {
export const SuperheroProvider = ({ children, config }: any): any => {
const [verifiedAccounts, setVerifiedAccounts] = useAtom(verifiedAccountsAtom);
const [, setBotAccounts] = useAtom(botAccountsAtom);
const [, setBotCommands] = useAtom(botCommandsAtom);

function loadVerifiedAccounts(): void {
if (config.bots_backend_url) {
Expand All @@ -78,11 +82,14 @@ export const SuperheroProvider = ({ children, config }: any): any => {
superheroBot: "@" + data.superheroBot.userId + ":" + data.domain,
blockchainBot: "@" + data.blockchainBot.userId + ":" + data.domain,
});
fetchBotCommands(data.communityBot);
fetchBotCommands(data.superheroBot);
})
.catch(() => {
//
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [config.bots_backend_url, setBotAccounts]);

useEffect(() => {
Expand All @@ -98,6 +105,22 @@ export const SuperheroProvider = ({ children, config }: any): any => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

function fetchBotCommands(bot: { userId: string; apiPrefix: string }): void {
fetch(`${config.bots_backend_url}${bot.apiPrefix}/commands`, {
method: "GET",
})
.then((res) => res.json())
.then((data: any) => {
setBotCommands((prev) => ({
...prev,
[bot.userId]: data.commands,
}));
})
.catch(() => {
//
});
}

/**
* Handles the click event on an element.
* If the target element's host is 'wallet.superhero.com', it prevents the default behavior and opens the target URL in a new window with specific dimensions.
Expand Down

0 comments on commit 61cb051

Please sign in to comment.