@lynx-js/genui 0.0.2 → 0.0.4

package/cli/templates/default/src/App.tsx

@@ -0,0 +1,100 @@
+import { useState, useCallback } from '@lynx-js/react';
+import { A2UI, createMessageStore, defineCatalog } from '@lynx-js/genui/a2ui';
+import {
+  catalogManifests,
+  Text,
+  Button,
+  Card,
+  Column,
+  Row,
+  Image,
+  type CatalogComponent,
+} from '@lynx-js/genui/a2ui/catalog';
+import type {
+  ServerToClientMessage,
+  UserActionPayload,
+} from '@lynx-js/genui/a2ui';
+import {
+  initialMessages,
+  secondStageMessages,
+  thirdStageMessages,
+  finalStageMessages,
+  buttonClickMessages,
+} from './messages';
+
+import './App.css';
+
+const store = createMessageStore();
+
+const ALL_BUILTINS = defineCatalog([
+  [Text as CatalogComponent, catalogManifests.Text],
+  [Button as CatalogComponent, catalogManifests.Button],
+  [Card as CatalogComponent, catalogManifests.Card],
+  [Column as CatalogComponent, catalogManifests.Column],
+  [Row as CatalogComponent, catalogManifests.Row],
+  [Image as CatalogComponent, catalogManifests.Image],
+]).components;
+
+const sleep = (ms: number) => {
+  return new Promise<void>((resolve) => {
+    setTimeout(resolve, ms);
+  });
+};
+
+export function App() {
+  const [showResponse, setShowResponse] = useState(false);
+
+  const streamMessages = useCallback(
+    async (messages: ServerToClientMessage[]) => {
+      for (const message of messages) {
+        store.push(message);
+        await sleep(1000);
+      }
+    },
+    [],
+  );
+
+  const startDemo = useCallback(async () => {
+    setShowResponse(true);
+    await streamMessages(initialMessages);
+    await streamMessages(secondStageMessages);
+    await streamMessages(thirdStageMessages);
+    await streamMessages(finalStageMessages);
+  }, [streamMessages]);
+
+  const handleAction = useCallback((action: UserActionPayload) => {
+    if (action?.name === 'button_click') {
+      buttonClickMessages.forEach(msg => {
+        store.push(msg);
+      });
+    }
+  }, []);
+
+  return (
+    <view className='A2UIApp'>
+      <view className='Background' />
+      <view className='AppContent'>
+        {!showResponse
+          ? (
+            <view className='WelcomeScreen'>
+              <text className='Title'>A2UI Demo</text>
+              <text className='Subtitle'>ReactLynx GenUI</text>
+              <view className='StartButton' bindtap={startDemo}>
+                <text className='ButtonText'>Start Demo</text>
+              </view>
+            </view>
+          )
+          : (
+            <A2UI
+              messageStore={store}
+              catalogs={ALL_BUILTINS}
+              wrapSurface={(children) => (
+                <view className='A2UISurface'>{children}</view>
+              )}
+              onAction={handleAction}
+            />
+          )}
+      </view>
+    </view>
+  );
+}

package/cli/templates/default/src/index.tsx

@@ -0,0 +1,10 @@
+import '@lynx-js/react/debug';
+import { root } from '@lynx-js/react';
+
+import { App } from './App.js';
+
+root.render(<App />);
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept();
+}

package/cli/templates/default/src/messages.ts

@@ -0,0 +1,158 @@
+import type { ServerToClientMessage } from '@lynx-js/genui/a2ui';
+
+export const initialMessages: ServerToClientMessage[] = [
+  {
+    version: 'v0.9',
+    createSurface: {
+      surfaceId: 'main',
+      catalogId: 'https://a2ui.org/specification/v0_9/basic_catalog.json',
+    },
+  },
+  {
+    version: 'v0.9',
+    updateComponents: {
+      surfaceId: 'main',
+      components: [
+        {
+          id: 'root-card',
+          component: 'Card',
+          variant: 'elevated',
+          child: 'content-column',
+        },
+        {
+          id: 'content-column',
+          component: 'Column',
+          children: [
+            'loading-text',
+          ],
+          align: 'center',
+        },
+        {
+          id: 'loading-text',
+          component: 'Text',
+          text: 'Loading...',
+          variant: 'body',
+        },
+      ],
+    },
+  },
+];
+
+export const secondStageMessages: ServerToClientMessage[] = [
+  {
+    version: 'v0.9',
+    updateComponents: {
+      surfaceId: 'main',
+      components: [
+        {
+          id: 'content-column',
+          component: 'Column',
+          children: [
+            'title-text',
+            'loading-text',
+          ],
+          align: 'center',
+        },
+        {
+          id: 'title-text',
+          component: 'Text',
+          text: 'Welcome to A2UI Demo',
+          variant: 'h1',
+        },
+        {
+          id: 'loading-text',
+          component: 'Text',
+          text: 'Loading more content...',
+          variant: 'body',
+        },
+      ],
+    },
+  },
+];
+
+export const thirdStageMessages: ServerToClientMessage[] = [
+  {
+    version: 'v0.9',
+    updateComponents: {
+      surfaceId: 'main',
+      components: [
+        {
+          id: 'content-column',
+          component: 'Column',
+          children: [
+            'title-text',
+            'description-text',
+            'loading-text',
+          ],
+          align: 'center',
+        },
+        {
+          id: 'description-text',
+          component: 'Text',
+          text: 'This is a ReactLynx A2UI demonstration',
+          variant: 'body',
+        },
+        {
+          id: 'loading-text',
+          component: 'Text',
+          text: 'Almost done...',
+          variant: 'body',
+        },
+      ],
+    },
+  },
+];
+
+export const finalStageMessages: ServerToClientMessage[] = [
+  {
+    version: 'v0.9',
+    updateComponents: {
+      surfaceId: 'main',
+      components: [
+        {
+          id: 'content-column',
+          component: 'Column',
+          children: [
+            'title-text',
+            'description-text',
+            'action-button',
+          ],
+          align: 'center',
+        },
+        {
+          id: 'action-button',
+          component: 'Button',
+          variant: 'primary',
+          child: 'button-text',
+          action: {
+            event: {
+              name: 'button_click',
+              context: { message: 'Hello from A2UI!' },
+            },
+          },
+        },
+        {
+          id: 'button-text',
+          component: 'Text',
+          text: 'Click Me',
+        },
+      ],
+    },
+  },
+];
+
+export const buttonClickMessages: ServerToClientMessage[] = [
+  {
+    version: 'v0.9',
+    updateComponents: {
+      surfaceId: 'main',
+      components: [
+        {
+          id: 'button-text',
+          component: 'Text',
+          text: 'Clicked!',
+        },
+      ],
+    },
+  },
+];

package/cli/templates/default/src/rspeedy-env.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="@lynx-js/rspeedy/client" />
+
+declare module '@lynx-js/types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface GlobalProps {
+    /**
+     * Define your global properties in this interface.
+     * These types will be accessible through `lynx.__globalProps`.
+     */
+  }
+}
+
+// This export makes the file a module
+export {};

package/cli/templates/default/src/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+
+    "jsx": "react-jsx",
+    "jsxImportSource": "@lynx-js/react",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+
+    "lib": ["es2015"],
+
+    "noEmit": true,
+  },
+  "include": ["./**/*.ts", "./**/*.tsx"],
+}

package/cli/templates/default/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+  },
+  "references": [
+    { "path": "./tsconfig.node.json" },
+    { "path": "./src" },
+  ],
+  "files": [],
+}

package/cli/templates/default/tsconfig.node.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+
+    "module": "node16",
+    "moduleResolution": "node16",
+    "erasableSyntaxOnly": true,
+
+    "lib": ["es2023"],
+    "target": "es2022",
+
+    "noEmit": true,
+  },
+  "include": ["./lynx.config.ts"],
+}

package/dist/index.d.ts

@@ -4,6 +4,8 @@ export { createFallbackMessagesFromPlainText, createMessageStore, createResource
 export type { A2UIClientEventMessage, A2UIEvent, ComponentInstance, FunctionCallContext, FunctionEntry, FunctionImpl, GenericComponentProps, MessageStore, MessageStoreOptions, RawResource, ResolveFunctionOptions, Resource, ResourceInfo, ResourceStatus, ServerToClientMessage, Surface, SurfaceId, UserActionPayload, } from '@lynx-js/genui/a2ui/store';
 export { basicFunctions, registerBasicFunctions, } from '@lynx-js/genui/a2ui/functions';
 export * from '@lynx-js/genui/openui';
+export { buildOpenUiSystemPrompt, createOpenUiPromptLibrary, OPENUI_SYSTEM_PROMPT, openUiPromptActionPropSchema, } from '@lynx-js/genui/openui/prompt';
+export type { BuildOpenUiSystemPromptOptions, CreateOpenUiPromptLibraryOptions, OpenUiPromptComponent, OpenUiPromptLibrary, } from '@lynx-js/genui/openui/prompt';
 export { A2UI_PROTOCOL_VERSION, A2UI_SYSTEM_PROMPT, BASIC_CATALOG, BASIC_CATALOG_EXAMPLES, BASIC_CATALOG_ID, buildA2UISystemPrompt, createA2UICatalogFromManifests, readA2UICatalogFromDirectory, renderCatalogReference, } from '@lynx-js/genui/a2ui-prompt';
 export type { A2UICatalog as A2UIPromptCatalog, A2UIComponentProp, A2UIComponentSpec, A2UIExample, A2UIFunctionSpec, BuildSystemPromptOptions, JsonSchema as A2UIPromptJsonSchema, ReadA2UICatalogDirectoryOptions, } from '@lynx-js/genui/a2ui-prompt';
 export { createA2UICatalog, extractCatalogComponents, extractCatalogComponentsFromTypeDocJson, extractCatalogComponentsFromTypeDocProject, extractCatalogFunctions, extractCatalogFunctionsFromTypeDocJson, extractCatalogFunctionsFromTypeDocProject, findCatalogSourceFiles, writeCatalogArtifacts, writeCatalogComponents, writeCatalogFunctionDefinitions, writeCatalogFunctions, writeComponentCatalogs, } from '@lynx-js/genui/a2ui-catalog-extractor';

package/dist/index.js

@@ -5,6 +5,7 @@ export { A2UI, NodeRenderer, useAction, useChecks, useDataBinding, useResolvedPr
 export { createFallbackMessagesFromPlainText, createMessageStore, createResource, createTextCardMessages, executeFunctionCall, FunctionRegistry, functionRegistry, isDataBinding, isFunctionCall, MessageProcessor, normalizePayloadToMessages, prepareMessagesForProcessing, resolveDynamicValue, resolveFunctionArguments, SignalStore, } from '@lynx-js/genui/a2ui/store';
 export { basicFunctions, registerBasicFunctions, } from '@lynx-js/genui/a2ui/functions';
 export * from '@lynx-js/genui/openui';
+export { buildOpenUiSystemPrompt, createOpenUiPromptLibrary, OPENUI_SYSTEM_PROMPT, openUiPromptActionPropSchema, } from '@lynx-js/genui/openui/prompt';
 export { A2UI_PROTOCOL_VERSION, A2UI_SYSTEM_PROMPT, BASIC_CATALOG, BASIC_CATALOG_EXAMPLES, BASIC_CATALOG_ID, buildA2UISystemPrompt, createA2UICatalogFromManifests, readA2UICatalogFromDirectory, renderCatalogReference, } from '@lynx-js/genui/a2ui-prompt';
 export { createA2UICatalog, extractCatalogComponents, extractCatalogComponentsFromTypeDocJson, extractCatalogComponentsFromTypeDocProject, extractCatalogFunctions, extractCatalogFunctionsFromTypeDocJson, extractCatalogFunctionsFromTypeDocProject, findCatalogSourceFiles, writeCatalogArtifacts, writeCatalogComponents, writeCatalogFunctionDefinitions, writeCatalogFunctions, writeComponentCatalogs, } from '@lynx-js/genui/a2ui-catalog-extractor';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAE1D,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,SAAS,EACT,cAAc,EACd,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAMnC,OAAO,EACL,mCAAmC,EACnC,kBAAkB,EAClB,cAAc,EACd,sBAAsB,EACtB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,0BAA0B,EAC1B,4BAA4B,EAC5B,mBAAmB,EACnB,wBAAwB,EACxB,WAAW,GACZ,MAAM,2BAA2B,CAAC;AAqBnC,OAAO,EACL,cAAc,EACd,sBAAsB,GACvB,MAAM,+BAA+B,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,OAAO,EACL,qBAAqB,EACrB,kBAAkB,EAClB,aAAa,EACb,sBAAsB,EACtB,gBAAgB,EAChB,qBAAqB,EACrB,8BAA8B,EAC9B,4BAA4B,EAC5B,sBAAsB,GACvB,MAAM,4BAA4B,CAAC;AAWpC,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,uCAAuC,EACvC,0CAA0C,EAC1C,uBAAuB,EACvB,sCAAsC,EACtC,yCAAyC,EACzC,sBAAsB,EACtB,qBAAqB,EACrB,sBAAsB,EACtB,+BAA+B,EAC/B,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,uCAAuC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAE1D,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,SAAS,EACT,cAAc,EACd,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAMnC,OAAO,EACL,mCAAmC,EACnC,kBAAkB,EAClB,cAAc,EACd,sBAAsB,EACtB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,0BAA0B,EAC1B,4BAA4B,EAC5B,mBAAmB,EACnB,wBAAwB,EACxB,WAAW,GACZ,MAAM,2BAA2B,CAAC;AAqBnC,OAAO,EACL,cAAc,EACd,sBAAsB,GACvB,MAAM,+BAA+B,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EACzB,oBAAoB,EACpB,4BAA4B,GAC7B,MAAM,8BAA8B,CAAC;AAOtC,OAAO,EACL,qBAAqB,EACrB,kBAAkB,EAClB,aAAa,EACb,sBAAsB,EACtB,gBAAgB,EAChB,qBAAqB,EACrB,8BAA8B,EAC9B,4BAA4B,EAC5B,sBAAsB,GACvB,MAAM,4BAA4B,CAAC;AAWpC,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,uCAAuC,EACvC,0CAA0C,EAC1C,uBAAuB,EACvB,sCAAsC,EACtC,yCAAyC,EACzC,sBAAsB,EACtB,qBAAqB,EACrB,sBAAsB,EACtB,+BAA+B,EAC/B,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,uCAAuC,CAAC"}