@neo4j-ndl/react 4.16.8 → 4.16.9

package/skills/ndl-react/components/ai/file-tag.md

@@ -0,0 +1,90 @@
+# FileTag
+
+Import: `import { FileTag } from '@neo4j-ndl/react/ai'`
+
+## Props
+
+### FileTag
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `fileName` | `string` | ✅ |  | The name of the file |
+| `fileType` | `string` | ✅ |  | The type of the file, e.g. 'pdf', 'docx', 'txt', etc. |
+| `icon` | `ReactNode` | ✅ |  | The icon that represents the file type |
+| `isLoading` | `boolean` |  | `false` | Whether the file tag is loading |
+| `isRemovable` | `boolean` |  | `false` | Whether the file tag is removable |
+| `onClick` | `((e: MouseEvent<HTMLElement, MouseEvent>) => void)` |  |  | Callback function triggered either when the file tag is clicked, or when the remove button is clicked (if isRemovable is true) |
+| `ref` | `any` |  |  | A ref to apply to the root element. |
+
+## Examples
+
+### Chat
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { FileTag } from '@neo4j-ndl/react/ai';
+import { DocumentIconOutline } from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <FileTag
+      icon={<DocumentIconOutline />}
+      fileName="Science Fiction Bestsellers"
+      fileType="pdf"
+    />
+  );
+};
+
+export default Component;
+```
+
+### Loading
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { FileTag } from '@neo4j-ndl/react/ai';
+import { DocumentIconOutline } from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <FileTag
+      isLoading={true}
+      icon={<DocumentIconOutline />}
+      fileName="Science Fiction Bestsellers"
+      fileType="pdf"
+      onClick={() => {
+        alert('remove file');
+      }}
+    />
+  );
+};
+
+export default Component;
+```
+
+### Prompt
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { FileTag } from '@neo4j-ndl/react/ai';
+import { DocumentIconOutline } from '@neo4j-ndl/react/icons';
+
+const Component = () => {
+  return (
+    <FileTag
+      icon={<DocumentIconOutline />}
+      fileName="Science Fiction Bestsellers"
+      fileType="pdf"
+      isRemovable={true}
+      onClick={() => {
+        alert('remove file');
+      }}
+    />
+  );
+};
+
+export default Component;
+```

package/skills/ndl-react/components/ai/image-tag.md

@@ -0,0 +1,91 @@
+# ImageTag
+
+Import: `import { ImageTag } from '@neo4j-ndl/react/ai'`
+
+## Props
+
+### ImageTag
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `alt` | `string` | ✅ |  | The alt text of the image |
+| `fileName` | `string` | ✅ |  | The name of the image |
+| `fileType` | `string` | ✅ |  | The type of the image, e.g. 'jpg', 'png', 'gif', etc. |
+| `isLoading` | `boolean` |  | `false` | Whether the image tag is loading |
+| `isRemovable` | `boolean` |  | `false` | Whether the image tag is removable |
+| `onClick` | `((e: MouseEvent<HTMLElement, MouseEvent>) => void)` |  |  | Callback function triggered either when the image tag is clicked, or when the remove button is clicked (if isRemovable is true) |
+| `ref` | `any` |  |  | A ref to apply to the root element. |
+| `src` | `string` | ✅ |  | The source of the image |
+
+## Examples
+
+### Chat
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { ImageTag } from '@neo4j-ndl/react/ai';
+
+const Component = () => {
+  return (
+    <ImageTag
+      src="https://plus.unsplash.com/premium_photo-1676496046182-356a6a0ed002?q=80&w=2952&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      alt="Landscape image"
+      fileName="Landscape image"
+      fileType="jpg"
+    />
+  );
+};
+
+export default Component;
+```
+
+### Loading
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { ImageTag } from '@neo4j-ndl/react/ai';
+
+const Component = () => {
+  return (
+    <ImageTag
+      isLoading={true}
+      src="https://plus.unsplash.com/premium_photo-1676496046182-356a6a0ed002?q=80&w=2952&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      alt="Landscape image"
+      fileName="Landscape image"
+      fileType="jpg"
+      onClick={() => {
+        alert('remove image');
+      }}
+    />
+  );
+};
+
+export default Component;
+```
+
+### Prompt
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { ImageTag } from '@neo4j-ndl/react/ai';
+
+const Component = () => {
+  return (
+    <ImageTag
+      src="https://plus.unsplash.com/premium_photo-1676496046182-356a6a0ed002?q=80&w=2952&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      alt="Landscape image"
+      fileName="Landscape image"
+      fileType="jpg"
+      isRemovable={true}
+      onClick={() => {
+        alert('remove image');
+      }}
+    />
+  );
+};
+
+export default Component;
+```

package/skills/ndl-react/components/ai/more-files.md

@@ -0,0 +1,73 @@
+# MoreFilesComponent
+
+Import: `import { MoreFilesComponent } from '@neo4j-ndl/react/ai'`
+
+## Props
+
+### MoreFilesComponent
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `count` | `number` | ✅ |  | The number of files to show |
+| `isActive` | `boolean` |  |  | Whether the more files button is active. Should be true when it opens the menu of files. |
+| `onClick` | `(() => void)` |  |  | Callback function triggered when the more files button is clicked |
+| `ref` | `Ref<HTMLButtonElement>` |  |  | A ref to apply to the root element. |
+
+## Examples
+
+### Default
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Menu } from '@neo4j-ndl/react';
+import { MoreFiles } from '@neo4j-ndl/react/ai';
+import {
+  DocumentIconOutline,
+  PhotoIconOutline,
+  TableCellsIconOutline,
+} from '@neo4j-ndl/react/icons';
+import { useRef, useState } from 'react';
+
+const Component = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const anchorRef = useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <>
+      <MoreFiles
+        count={3}
+        isActive={isMenuOpen}
+        onClick={() => setIsMenuOpen(!isMenuOpen)}
+        ref={anchorRef}
+      />
+      <Menu
+        isOpen={isMenuOpen}
+        anchorRef={anchorRef}
+        onClose={() => setIsMenuOpen(false)}
+      >
+        <Menu.Item
+          leadingVisual={<DocumentIconOutline />}
+          title="Science fiction bestseller"
+          description="PDF"
+          onClick={() => alert('Science fiction bestseller')}
+        />
+        <Menu.Item
+          leadingVisual={<TableCellsIconOutline />}
+          title="MoviesDecade"
+          description="CSV"
+          onClick={() => alert('MoviesDecade')}
+        />
+        <Menu.Item
+          leadingVisual={<PhotoIconOutline />}
+          title="Family photo"
+          description="JPG"
+          onClick={() => alert('Family photos')}
+        />
+      </Menu>
+    </>
+  );
+};
+
+export default Component;
+```

package/skills/ndl-react/components/ai/presence.md

@@ -0,0 +1,54 @@
+# Presence
+
+Import: `import { Presence } from '@neo4j-ndl/react/ai'`
+
+## Props
+
+### Presence
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `isThinking` | `boolean` |  | `false` | Whether the AI is thinking. Animates the underlying SVG |
+| `ref` | `Ref<SVGSVGElement>` |  |  | A ref to apply to the root element. |
+
+## Examples
+
+### Ai Presence Default
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { FilledButton } from '@neo4j-ndl/react';
+import { Presence } from '@neo4j-ndl/react/ai';
+import { useState } from 'react';
+
+const Component = () => {
+  const [isThinking, setIsThinking] = useState(false);
+
+  return (
+    <div className="n-flex n-gap-token-8">
+      <Presence className="n-size-token-32" isThinking={isThinking} />
+      <FilledButton onClick={() => setIsThinking(!isThinking)}>
+        Toggle Thinking
+      </FilledButton>
+    </div>
+  );
+};
+
+export default Component;
+```
+
+### Ai Presence Thinking
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Presence } from '@neo4j-ndl/react/ai';
+
+// TODO: consider this story when happo is ready
+const Component = () => {
+  return <Presence isThinking className="n-size-token-32" />;
+};
+
+export default Component;
+```