@preply/ds-ai-core 11.1.0

package/src/tools/components/list-components.ts

@@ -0,0 +1,36 @@
+import { PLATFORMS } from '../../types';
+import dedent from 'dedent';
+import { defineTool } from '../../utils/define-tool';
+import * as z from 'zod';
+import { formatList } from '../../utils/format-list';
+import data from './context';
+
+export const listComponents = defineTool({
+    name: 'list_components',
+    description: dedent`
+        Returns a list of all available components in the Preply design system,
+        available in @preply/ds-web-lib, @preply/ds-web-root and @preply/ds-rn-lib packages.
+    `,
+    options: z.object({
+        platform: z.enum(PLATFORMS).describe('Target platform to list components for. Required.'),
+    }),
+    callback: ({ platform }) => {
+        const componentsList = Object.values(data[platform]).map(c => c.meta);
+        const formattedComponentsList = formatList(componentsList);
+        const importExample =
+            platform === 'web'
+                ? "import { Button } from '@preply/ds-web-lib';"
+                : "import { Button } from '@preply/ds-rn-lib';";
+
+        return [
+            dedent`
+                Each item has the following fields:
+                - name - The name of the component (e.g. Button)
+                - import - The import path of the component (e.g. "${importExample}")
+                - description - The description of the component
+                - deprecated - Whether the component is deprecated (false if missing)
+            `,
+            formattedComponentsList,
+        ];
+    },
+});

package/src/tools/index.ts

@@ -0,0 +1,5 @@
+export { searchIcon } from './search-icon/search-icon';
+export { searchTokenByName } from './search-token/search-token-by-name';
+export { searchTokenByValue } from './search-token/search-token-by-value';
+export { listComponents } from './components/list-components';
+export { getComponentDocs } from './components/get-component-docs';

package/src/tools/search-icon/__tests__/get-icons-data.test.ts

@@ -0,0 +1,22 @@
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { getIconsData } from '../get-icons-data';
+
+describe('buildIconsContext', () => {
+    it('generates names from TokyoUI SVG files, strips prefix and deduplicates', async () => {
+        const icons = getIconsData(path.resolve(import.meta.dirname, 'test-icons'));
+
+        expect(icons).toMatchInlineSnapshot(`
+          [
+            {
+              "react-native": "Close",
+              "web": "TokyoUIClose",
+            },
+            {
+              "react-native": "Help",
+              "web": "TokyoUIHelp",
+            },
+          ]
+        `);
+    });
+});

package/src/tools/search-icon/__tests__/search-icon.test.ts

@@ -0,0 +1,235 @@
+import { describe, expect, it, vi } from 'vitest';
+import { searchIcon } from '../search-icon';
+
+vi.mock(import('../get-icons-data'), () => ({
+    getIconsData: () => [
+        { web: 'TokyoUIClose', 'react-native': 'Close' },
+        { web: 'TokyoUIHelp', 'react-native': 'Help' },
+        { web: 'TokyoUIHelpCenter', 'react-native': 'HelpCenter' },
+        { web: 'TokyoUIX', 'react-native': 'X' },
+    ],
+}));
+
+describe('searchIcon tool', () => {
+    it('returns exact match response', () => {
+        expect(
+            searchIcon.callback({
+                name: 'Close',
+                platform: 'web',
+                includeExample: false,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found exact match. The full icon name is "TokyoUIClose".",
+          ]
+        `);
+
+        expect(
+            searchIcon.callback({
+                name: 'HelpCenter',
+                platform: 'web',
+                includeExample: false,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found exact match. The full icon name is "TokyoUIHelpCenter".",
+            "Also, here you can find some icons with similar names:",
+            "TokyoUIHelp",
+          ]
+        `);
+
+        expect(
+            searchIcon.callback({
+                name: 'Close',
+                platform: 'react-native',
+                includeExample: false,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found exact match. The full icon name is "Close".",
+          ]
+        `);
+    });
+
+    it('returns exact match response with examples', () => {
+        expect(
+            searchIcon.callback({
+                name: 'Close',
+                platform: 'web',
+                includeExample: true,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found exact match. The full icon name is "TokyoUIClose".",
+            "To use the icon, import it from @preply/ds-media-icons/dist/24/ with the TokyoUI prefix and use the Icon component:",
+            "import TokyoUIClose from '@preply/ds-media-icons/dist/24/TokyoUIClose.svg';
+          import { Icon } from '@preply/ds-web-lib';
+
+          <Icon svg={<TokyoUIClose />} />",
+          ]
+        `);
+
+        expect(
+            searchIcon.callback({
+                name: 'Close',
+                platform: 'react-native',
+                includeExample: true,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found exact match. The full icon name is "Close".",
+            "To use the icon in React Native, use the Icon component from @preply/ds-rn-lib:",
+            "import { Icon } from '@preply/ds-rn-lib';
+
+          <Icon name="Close" />",
+          ]
+        `);
+    });
+
+    it('returns exact match response with similar results', async () => {
+        expect(
+            searchIcon.callback({
+                name: 'Help',
+                platform: 'web',
+                includeExample: false,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found exact match. The full icon name is "TokyoUIHelp".",
+            "Also, here you can find some icons with similar names:",
+            "TokyoUIHelpCenter",
+          ]
+        `);
+
+        expect(
+            searchIcon.callback({
+                name: 'help',
+                platform: 'react-native',
+                includeExample: false,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found exact match. The full icon name is "Help".",
+            "Also, here you can find some icons with similar names:",
+            "HelpCenter",
+          ]
+        `);
+    });
+
+    it('returns exact match response with similar results and examples', async () => {
+        expect(
+            searchIcon.callback({
+                name: 'help',
+                platform: 'web',
+                includeExample: true,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found exact match. The full icon name is "TokyoUIHelp".",
+            "To use the icon, import it from @preply/ds-media-icons/dist/24/ with the TokyoUI prefix and use the Icon component:",
+            "import TokyoUIHelp from '@preply/ds-media-icons/dist/24/TokyoUIHelp.svg';
+          import { Icon } from '@preply/ds-web-lib';
+
+          <Icon svg={<TokyoUIHelp />} />",
+            "Also, here you can find some icons with similar names:",
+            "TokyoUIHelpCenter",
+          ]
+        `);
+
+        expect(
+            searchIcon.callback({
+                name: 'help',
+                platform: 'react-native',
+                includeExample: true,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "Found exact match. The full icon name is "Help".",
+            "To use the icon in React Native, use the Icon component from @preply/ds-rn-lib:",
+            "import { Icon } from '@preply/ds-rn-lib';
+
+          <Icon name="Help" />",
+            "Also, here you can find some icons with similar names:",
+            "HelpCenter",
+          ]
+        `);
+    });
+
+    it('returns similar results when no exact match', async () => {
+        expect(
+            searchIcon.callback({
+                name: 'center',
+                platform: 'web',
+                includeExample: false,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "There is no exact match for "center" query, but here are some icons with similar names:",
+            "TokyoUIHelpCenter",
+          ]
+        `);
+
+        expect(
+            searchIcon.callback({
+                name: 'center',
+                platform: 'react-native',
+                includeExample: false,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "There is no exact match for "center" query, but here are some icons with similar names:",
+            "HelpCenter",
+          ]
+        `);
+    });
+
+    it('returns not-found message when no matches', async () => {
+        expect(
+            searchIcon.callback({
+                name: 'definitely-missing-icon-name',
+                platform: 'web',
+                includeExample: false,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "No results found for "definitely-missing-icon-name"",
+          ]
+        `);
+
+        expect(
+            searchIcon.callback({
+                name: 'definitely-missing-icon-name',
+                platform: 'react-native',
+                includeExample: false,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "No results found for "definitely-missing-icon-name"",
+          ]
+        `);
+
+        expect(
+            searchIcon.callback({
+                name: 'definitely-missing-icon-name',
+                platform: 'react-native',
+                includeExample: true,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "No results found for "definitely-missing-icon-name"",
+          ]
+        `);
+
+        expect(
+            searchIcon.callback({
+                name: 'definitely-missing-icon-name',
+                platform: 'react-native',
+                includeExample: true,
+            }),
+        ).toMatchInlineSnapshot(`
+          [
+            "No results found for "definitely-missing-icon-name"",
+          ]
+        `);
+    });
+});

package/src/tools/search-icon/__tests__/test-icons/NotIcon.md

@@ -0,0 +1 @@
+🤷‍♂️

package/src/tools/search-icon/__tests__/test-icons/OtherIcon.svg

@@ -0,0 +1 @@
+<svg></svg>

package/src/tools/search-icon/__tests__/test-icons/TokyoUIClose.svg

@@ -0,0 +1 @@
+<svg></svg>

package/src/tools/search-icon/__tests__/test-icons/TokyoUIHelp.svg

@@ -0,0 +1 @@
+<svg></svg>

package/src/tools/search-icon/get-icons-data.ts

@@ -0,0 +1,19 @@
+/* eslint-disable security/detect-non-literal-fs-filename */
+import fs from 'node:fs';
+import path from 'node:path';
+
+const ICONS_DIRNAME = path.resolve(import.meta.dirname, '../../../../media-icons/svg/24');
+
+export function getIconsData(iconsDirname = ICONS_DIRNAME) {
+    return fs
+        .readdirSync(iconsDirname)
+        .filter(filename => filename.endsWith('.svg'))
+        .filter(filename => /^TokyoUI/i.test(filename))
+        .map(filename => filename.replace(/\.svg$/, ''))
+        .map(prefixedName => ({
+            web: prefixedName,
+            'react-native': prefixedName.replace(/^TokyoUI/, ''),
+        }));
+}
+
+export type Icon = ReturnType<typeof getIconsData>[number];

package/src/tools/search-icon/search-icon.ts

@@ -0,0 +1,100 @@
+import kebabCase from 'kebab-case';
+import { createSearchIndex } from '../../utils/create-search-index';
+// Build-time macro: getIconsData() runs at compile time and its return value is inlined into the bundle
+import { Icon, getIconsData } from './get-icons-data' with { type: 'macro' };
+import { PLATFORMS, Platform } from '../../types';
+import dedent from 'dedent';
+import { defineTool } from '../../utils/define-tool';
+import * as z from 'zod';
+import { formatListInline } from '../../utils/format-list';
+
+const icons = getIconsData();
+
+const index = createSearchIndex(icons, {
+    ref: 'react-native',
+    /**
+     * Normalize here strips the "TokyoUI" prefix and converts the name to kebab-case
+     * so each part of the name is searchable independently.
+     *
+     * e.g. for TokyoUIHelpCenter, the normalized name is "help-center" which allows to search for "help" or "center" separately.
+     */
+    normalize: term => kebabCase(term.replace(/^TokyoUI/i, ''), false),
+});
+
+const usageMessage = (platform: Platform) =>
+    platform === 'web'
+        ? 'To use the icon, import it from @preply/ds-media-icons/dist/24/ with the TokyoUI prefix and use the Icon component:'
+        : 'To use the icon in React Native, use the Icon component from @preply/ds-rn-lib:';
+
+const exampleMessage = (
+    platform: Platform,
+    icon: Icon = { web: 'TokyoUIClose', 'react-native': 'Close' },
+) =>
+    platform === 'web'
+        ? dedent`
+            import ${icon.web} from '@preply/ds-media-icons/dist/24/${icon.web}.svg';
+            import { Icon } from '@preply/ds-web-lib';
+
+            <Icon svg={<${icon.web} />} />
+        `
+        : dedent`
+            import { Icon } from '@preply/ds-rn-lib';
+
+            <Icon name="${icon['react-native']}" />
+        `;
+
+const exactMatchMessage = (platform: Platform, icon: Icon) =>
+    `Found exact match. The full icon name is "${icon[platform]}".`;
+
+export const searchIcon = defineTool({
+    name: 'search_icon',
+    description: 'Search icons available in @preply/ds-media-icons',
+    arguments: z.object({
+        name: z.string().describe(dedent`
+            The icon name to search for.
+            It can be provided with or without the "TokyoUI" prefix (e.g. "Close" or "TokyoUIClose").
+        `),
+    }),
+    options: z.object({
+        platform: z.enum(PLATFORMS).describe('Target platform for usage examples. Required.'),
+        includeExample: z
+            .boolean()
+            .default(true)
+            .describe('Whether to include an usage example. Default: true'),
+    }),
+    callback: ({ name, platform, includeExample }) => {
+        const matches = index.search(name);
+
+        if (!matches.length) {
+            return [`No results found for "${name}"`];
+        }
+
+        const [first, ...rest] = matches;
+
+        const examples = includeExample
+            ? [usageMessage(platform), exampleMessage(platform, first?.item)]
+            : [];
+
+        if (!first.exact) {
+            return [
+                `There is no exact match for "${name}" query, but here are some icons with similar names:`,
+                formatListInline(matches.map(match => match.item[platform])),
+                ...examples,
+            ];
+        }
+
+        const similarMessages = rest.length
+            ? [
+                  `Also, here you can find some icons with similar names:`,
+                  formatListInline(rest.map(match => match.item[platform])),
+              ]
+            : [];
+
+        // prettier-ignore
+        return [
+            exactMatchMessage(platform, first.item),
+            ...examples,
+            ...similarMessages
+        ];
+    },
+});