@rio-cloud/uikit-mcp 1.1.9 → 1.1.10

package/dist/docs/templates/ai-assistant.md

@@ -0,0 +1,311 @@
+# AI Assistant
+
+*Category:* Templates
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#/templates/ai-assistant
+*Captured:* 2026-04-20T12:55:39.311Z
+
+## AI Assistant
+
+### Example: Data query
+
+Disclaimer
+This feature is powered by Artificial Intelligence (AI) technology. The outputs generated are produced automatically based on the information provided by the user. The results may contain errors, inaccuracies, or misleading information. Users are therefore advised to independently verify any content or recommendations before relying on them for decision-making, professional, or operational purposes.
+Important:
+Do not enter, upload, or share any personal identifiable information (PII), confidential data, or sensitive information through this tool.
+The use of this tool is strictly limited to this service.
+By using this tool, you acknowledge and agree that you are solely responsible for any content you provide and for any decisions made based on the tool's output.
+The provider of this tool disclaims all liability for any direct or indirect damages resulting from the use of or reliance on AI-generated content.
+
+Data query
+Show me all unconfirmed transport orders from today
+
+#### React (tsx)
+
+```tsx
+import { useEffect, useRef, useState } from 'react';
+import AnimatedTextReveal from '@rio-cloud/rio-uikit/AnimatedTextReveal';
+import Button from '@rio-cloud/rio-uikit/Button';
+import Card from '@rio-cloud/rio-uikit/Card';
+import Collapse from '@rio-cloud/rio-uikit/Collapse';
+import Fade from '@rio-cloud/rio-uikit/Fade';
+import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
+import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
+
+const DISCLAIMER_TEXT =
+    'This feature is powered by Artificial Intelligence (AI) technology. The outputs generated are produced automatically based on the information provided by the user. The results may contain errors, inaccuracies, or misleading information. Users are therefore advised to independently verify any content or recommendations before relying on them for decision-making, professional, or operational purposes.';
+
+const IMPORTANT_POINTS = [
+    'Do not enter, upload, or share any personal identifiable information (PII), confidential data, or sensitive information through this tool.',
+    'The use of this tool is strictly limited to this service.',
+    "By using this tool, you acknowledge and agree that you are solely responsible for any content you provide and for any decisions made based on the tool's output.",
+    'The provider of this tool disclaims all liability for any direct or indirect damages resulting from the use of or reliance on AI-generated content.',
+];
+
+const CARD_REVEAL_DELAY_IN_MS = 200;
+const RESPONSE_DELAY_IN_MS = 4_000;
+
+const LOADING_PHRASES = ['Analyzing your request...', 'Looking up matching transport orders...'];
+
+const dummyResponseData = [
+    {
+        orderId: 'TO-48291',
+        customer: 'Warehouse Berlin',
+        status: 'Unconfirmed',
+        age: '2h 34m',
+        priority: 'High',
+    },
+    {
+        orderId: 'TO-48288',
+        customer: 'Retail Hub Hamburg',
+        status: 'Unconfirmed',
+        age: '2h 12m',
+        priority: 'High',
+    },
+    {
+        orderId: 'TO-48274',
+        customer: 'Depot Hannover',
+        status: 'Unconfirmed',
+        age: '1h 48m',
+        priority: 'Medium',
+    },
+    {
+        orderId: 'TO-48263',
+        customer: 'Crossdock Bremen',
+        status: 'Unconfirmed',
+        age: '1h 05m',
+        priority: 'Medium',
+    },
+];
+
+const getPriorityLabelClassName = (priority: string) => {
+    switch (priority) {
+        case 'High':
+            return 'label label-danger label-condensed';
+        case 'Medium':
+            return 'label label-warning label-condensed';
+        default:
+            return 'label label-info label-condensed';
+    }
+};
+
+const DummyResponseTable = () => (
+    <div className='space-y-15'>
+        <div className='display-flex justify-content-between align-items-center'>
+            <div className='text-medium text-color-darker'>Found 4 prioritized transport orders</div>
+            <div className='label label-info'>12 total</div>
+        </div>
+        <Table className='margin-bottom-0' border={false}>
+            <TableHeader>
+                <TableHeaderColumn columnKey='order'>Order</TableHeaderColumn>
+                <TableHeaderColumn columnKey='customer'>Customer</TableHeaderColumn>
+                <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
+                <TableHeaderColumn columnKey='age'>Open for</TableHeaderColumn>
+                <TableHeaderColumn columnKey='priority'>Priority</TableHeaderColumn>
+            </TableHeader>
+            <TableBody>
+                {dummyResponseData.map(row => (
+                    <TableRow key={row.orderId}>
+                        <TableColumn columnKey='order' className='text-medium'>
+                            {row.orderId}
+                        </TableColumn>
+                        <TableColumn columnKey='customer'>{row.customer}</TableColumn>
+                        <TableColumn columnKey='status'>{row.status}</TableColumn>
+                        <TableColumn columnKey='age'>{row.age}</TableColumn>
+                        <TableColumn columnKey='priority'>
+                            <span className={getPriorityLabelClassName(row.priority)}>{row.priority}</span>
+                        </TableColumn>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    </div>
+);
+
+const DisclaimerCallout = ({ onClose }: { onClose: VoidFunction }) => (
+    <div className='callout callout-info rounded-extra-large shadow-default margin-bottom-20 position-relative padding-right-50'>
+        <Button
+            bsStyle='muted'
+            bsSize='sm'
+            onClick={onClose}
+            iconName='rioglyph-remove'
+            iconOnly
+            className='position-absolute top-10 right-10'
+        />
+        <div className='text-size-h3 text-bold text-color-info margin-bottom-15'>Disclaimer</div>
+        <p className='line-height-30 margin-bottom-25'>{DISCLAIMER_TEXT}</p>
+
+        <div className='margin-bottom-10 text-size-18 text-bold text-color-darker'>Important:</div>
+        <ul className='margin-bottom-0 padding-left-25 space-y-10 line-height-30'>
+            {IMPORTANT_POINTS.map(point => (
+                <li key={point}>{point}</li>
+            ))}
+        </ul>
+    </div>
+);
+
+const AiAssistantTemplateExample = () => {
+    const [query, setQuery] = useState('Show me all unconfirmed transport orders from today');
+
+    const [showDisclaimer, setShowDisclaimer] = useState(true);
+    const [showResponseCard, setShowResponseCard] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [submittedQuery, setSubmittedQuery] = useState('');
+
+    const cardTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const responseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    useEffect(
+        () => () => {
+            if (cardTimeoutRef.current) {
+                clearTimeout(cardTimeoutRef.current);
+            }
+            if (responseTimeoutRef.current) {
+                clearTimeout(responseTimeoutRef.current);
+            }
+        },
+        []
+    );
+
+    const onExecute = () => {
+        const trimmedQuery = query.trim();
+
+        if (!trimmedQuery || isLoading) {
+            return;
+        }
+
+        setSubmittedQuery(trimmedQuery);
+        setQuery('');
+        setShowResponseCard(false);
+        setIsLoading(true);
+
+        cardTimeoutRef.current = setTimeout(() => {
+            setShowResponseCard(true);
+            cardTimeoutRef.current = null;
+        }, CARD_REVEAL_DELAY_IN_MS);
+
+        responseTimeoutRef.current = setTimeout(() => {
+            setIsLoading(false);
+            responseTimeoutRef.current = null;
+        }, RESPONSE_DELAY_IN_MS);
+    };
+
+    return (
+        <div className='padding-50 padding-0-xs'>
+            <Collapse open={showDisclaimer} unmountOnExit>
+                <DisclaimerCallout onClose={() => setShowDisclaimer(false)} />
+            </Collapse>
+
+            <div>
+                <FormLabel>Data query</FormLabel>
+                <div className='display-flex flex-wrap gap-5 align-items-end position-relative'>
+                    <div className='flex-1-1 min-width-300 form-group form-group-lg'>
+                        <div className='input-group'>
+                            <span className='input-group-addon margin-5'>
+                                <span className='rioglyph rioglyph-search' />
+                            </span>
+                            <textarea
+                                id='chat-template-query'
+                                className='form-control padding-right-50 min-height-80 text-size-14 padding-y-15 padding-left-40'
+                                rows={2}
+                                value={query}
+                                onChange={event => setQuery(event.target.value)}
+                                placeholder='Enter your data query'
+                            />
+                        </div>
+                    </div>
+                    <Button
+                        bsStyle='muted'
+                        disabled={!query.trim() || isLoading}
+                        onClick={onExecute}
+                        iconOnly
+                        iconName='rioglyph-send'
+                        className='position-absolute top-10 right-10'
+                    />
+                </div>
+            </div>
+
+            <Collapse open={showResponseCard} unmountOnExit>
+                <Card className='margin-top-20 padding-20 space-y-25'>
+                    <div>
+                        <div className='text-size-12 text-uppercase text-color-gray-darker margin-bottom-5'>
+                            Request
+                        </div>
+                        <div className='text-color-darker line-height-25 white-space-pre-wrap text-italic'>
+                            {submittedQuery}
+                        </div>
+                    </div>
+                    <div>
+                        <div className='text-size-12 text-uppercase text-color-gray-darker margin-bottom-10'>
+                            Assistant
+                        </div>
+                        {isLoading && (
+                            <AnimatedTextReveal
+                                text={LOADING_PHRASES}
+                                interval={2}
+                                duration={0.35}
+                                distance={8}
+                                ease='easeOut'
+                                startOnView={false}
+                                shimmerDuration={2}
+                                shimmerSpread={8}
+                                textColor='info'
+                                className='text-size-14 text-medium'
+                            />
+                        )}
+                        {!isLoading && (
+                            <Fade show initial duration={0.2}>
+                                <DummyResponseTable />
+                            </Fade>
+                        )}
+                    </div>
+                </Card>
+            </Collapse>
+        </div>
+    );
+};
+
+export default AiAssistantTemplateExample;
+```
+
+#### HTML (html)
+
+```html
+<div class="padding-50 padding-0-xs">
+    <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
+        <div class="callout callout-info rounded-extra-large shadow-default margin-bottom-20 position-relative padding-right-50" data-capture-callout="true">
+            <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component position-absolute top-10 right-10" tabindex="0">
+                <span class="rioglyph rioglyph-remove">
+                </span>
+            </button>
+            <div class="text-size-h3 text-bold text-color-info margin-bottom-15">Disclaimer</div>
+            <p class="line-height-30 margin-bottom-25">This feature is powered by Artificial Intelligence (AI) technology. The outputs generated are produced automatically based on the information provided by the user. The results may contain errors, inaccuracies, or misleading information. Users are therefore advised to independently verify any content or recommendations before relying on them for decision-making, professional, or operational purposes.</p>
+            <div class="margin-bottom-10 text-size-18 text-bold text-color-darker">Important:</div>
+            <ul class="margin-bottom-0 padding-left-25 space-y-10 line-height-30">
+                <li>Do not enter, upload, or share any personal identifiable information (PII), confidential data, or sensitive information through this tool.</li>
+                <li>The use of this tool is strictly limited to this service.</li>
+                <li>By using this tool, you acknowledge and agree that you are solely responsible for any content you provide and for any decisions made based on the tool's output.</li>
+                <li>The provider of this tool disclaims all liability for any direct or indirect damages resulting from the use of or reliance on AI-generated content.</li>
+            </ul>
+        </div>
+    </div>
+    <div>
+        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Data query</div>
+        <div class="display-flex flex-wrap gap-5 align-items-end position-relative">
+            <div class="flex-1-1 min-width-300 form-group form-group-lg">
+                <div class="input-group">
+                    <span class="input-group-addon margin-5">
+                        <span class="rioglyph rioglyph-search">
+                        </span>
+                    </span>
+                    <textarea id="chat-template-query" class="form-control padding-right-50 min-height-80 text-size-14 padding-y-15 padding-left-40" rows="2" placeholder="Enter your data query">Show me all unconfirmed transport orders from today</textarea>
+                </div>
+            </div>
+            <button type="button" class="btn btn-muted btn-icon-only btn-component position-absolute top-10 right-10" tabindex="0">
+                <span class="rioglyph rioglyph-send">
+                </span>
+            </button>
+        </div>
+    </div>
+</div>
+```