[CHAI] Release 3 - Add AI search

cspell.json

@@ -106,6 +106,9 @@
         "Bushwick",
         "BYOC",
         "capitalone",
+        "cardreader",
+        "commentbubbles",
+        "creditcards",
         "CAROOT",
         "Carta",
         "cacerts",
@@ -705,6 +708,7 @@
         "Transpiles",
         "trivago",
         "trustcacerts",
+        "twocards",
         "Typeform",
         "uatp",
         "UATP",

docs/_data/_routes.yml

@@ -3,6 +3,123 @@ home:
   title: Welcome to ExpensifyHelp!
   description: Find answers using the search bar or click on the version of Expensify you're using to access the relevant resources.
 
+# "Getting Started" and "Topics" cards shown on the homepage
+getting-started:
+  - title: For employees
+    icon: /assets/images/simple-illustration__approval-members.svg
+    description: Join a workspace, submit expenses and enable 2FA.
+    href: /articles/new-expensify/getting-started/Join-your-company's-workspace
+
+  - title: For admins
+    icon: /assets/images/simple-illustration__company-share-alt.svg
+    description: Create a workspace, connect accounting and configure approvals.
+    href: /articles/new-expensify/getting-started/Create-a-company-workspace
+
+  - title: With payments
+    icon: /assets/images/simple-illustration__cardreader-alt2-alt.svg
+    description: Link a business bank account to enable reimbursements and the Expensify Card.
+    href: /articles/new-expensify/wallet-and-payments/Connect-a-Business-Bank-Account
+
+topics:
+  - title: Expense management
+    icon: /assets/images/simple-illustration__money-receipt.svg
+    hub: /new-expensify/hubs/reports-and-expenses/
+    links:
+      - label: Create expenses
+        href: /articles/new-expensify/reports-and-expenses/Create-an-Expense
+      - label: Submit expense reports
+        href: /articles/new-expensify/reports-and-expenses/Create-and-Submit-Reports
+      - label: Pay expenses
+        href: /articles/new-expensify/wallet-and-payments/Pay-Expenses
+
+  - title: Expensify Card
+    icon: /assets/images/simple-illustration__creditcards--green.svg
+    hub: /new-expensify/hubs/expensify-card/
+    links:
+      - label: Enable Expensify Cards
+        href: /articles/new-expensify/expensify-card/Set-Up-and-Manage-the-Expensify-Card
+      - label: Activate and use cards
+        href: /articles/new-expensify/expensify-card/Cardholder-Settings-and-Features
+      - label: Reconcile transactions
+        href: /articles/new-expensify/expensify-card/View-and-Reconcile-Expensify-Card-Expenses
+
+  - title: Company cards
+    icon: /assets/images/simple-illustration__twocards-horizontal.svg
+    hub: /new-expensify/hubs/connect-credit-cards/
+    links:
+      - label: Connect commercial feed
+        href: /articles/new-expensify/connect-credit-cards/Commercial-feeds
+      - label: Connect directly
+        href: /articles/new-expensify/connect-credit-cards/Direct-feeds
+      - label: Map cards to GL
+        href: /articles/new-expensify/connect-credit-cards/Company-Card-Settings
+
+  - title: Accounting
+    icon: /assets/images/simple-illustration__monitor-remotesync.svg
+    hub: /new-expensify/hubs/connections/
+    links:
+      - label: Connect to NetSuite
+        href: /articles/new-expensify/connections/netsuite/Connect-To-NetSuite
+      - label: Connect to QuickBooks Online
+        href: /articles/new-expensify/connections/quickbooks-online/Connect-to-QuickBooks-Online
+      - label: Connect to Xero
+        href: /articles/new-expensify/connections/xero/Connect-to-Xero
+
+  - title: Workflows
+    icon: /assets/images/workflow.svg
+    hub: /new-expensify/hubs/workspaces/
+    links:
+      - label: Configure rules
+        href: /articles/new-expensify/workspaces/Workspace-Rules
+      - label: Automation and approvals
+        href: /articles/new-expensify/workspaces/Workspace-Workflows
+      - label: Prohibited expense detection
+        href: /articles/new-expensify/workspaces/Prohibited-Expense-Rule
+
+  - title: Back-office
+    icon: /assets/images/simple-illustration__buildings.svg
+    hub: /new-expensify/hubs/settings/
+    links:
+      - label: Reporting
+        href: /articles/new-expensify/reports-and-expenses/Getting-Started-with-the-Reports-Page
+      - label: Configure taxes
+        href: /articles/new-expensify/workspaces/Track-Taxes
+      - label: Nominate vacation delegate
+        href: /articles/new-expensify/settings/Delegate-when-out-of-office
+
+  - title: Travel
+    icon: /assets/images/simple-illustration__luggage.svg
+    hub: /travel/hubs/
+    links:
+      - label: Use Expensify Travel
+        href: /travel/hubs/getting-started/
+      - label: Set up Per Diems
+        href: /articles/new-expensify/workspaces/Configure-Per-Diem-in-a-workspace
+      - label: Configure mileage
+        href: /articles/new-expensify/workspaces/Set-distance-rates
+
+  - title: Chat
+    icon: /assets/images/simple-illustration__commentbubbles-alt.svg
+    hub: /new-expensify/hubs/chat/
+    links:
+      - label: Chat with people
+        href: /articles/new-expensify/chat/Create-a-New-Chat
+      - label: Chat basics
+        href: /articles/new-expensify/chat/Chat-Features-and-Moderation-Tools
+      - label: Organize your Inbox
+        href: /articles/new-expensify/chat/Prioritize-and-Pin-Chats
+
+  - title: Reporting
+    icon: /assets/images/envelope-receipt.svg
+    hub: /new-expensify/hubs/reports-and-expenses/
+    links:
+      - label: Search and filter
+        href: /articles/new-expensify/reports-and-expenses/Using-Reports-in-New-Expensify
+      - label: Export data
+        href: /articles/new-expensify/reports-and-expenses/Search-and-Download-Expenses
+      - label: Reconciliation
+        href: /articles/new-expensify/reports-and-expenses/Statement-Matching-and-Reconciliation
+
 platforms:
   - href: expensify-classic
     title: Expensify Classic

docs/_includes/search-result-item.html

@@ -9,7 +9,11 @@
 </template>
 
 <template id="search-loading-template">
-    <div class="search-loading">Searching...</div>
+    <div class="skeleton-search-results">
+        {% for i in (1..10) %}
+        <div class="skeleton-item"><div class="skeleton-title"></div><div class="skeleton-description"></div></div>
+        {% endfor %}
+    </div>
 </template>
 
 <template id="search-no-results-template">
@@ -19,3 +23,28 @@
 <template id="search-error-template">
     <div class="search-error">Something went wrong. Please try again.</div>
 </template>
+
+<template id="ai-thinking-template">
+    <div class="ai-panel ai-panel-loading">
+        <div class="ai-header">
+            <img src="/assets/images/concierge-avatar.svg" class="ai-avatar" />
+            <span class="ai-title">Concierge AI is thinking...</span>
+        </div>
+        <div class="ai-illustration">
+            <img src="/assets/images/simple-illustration__concierge-bot.svg" />
+        </div>
+    </div>
+</template>
+
+<template id="ai-response-template">
+    <div class="ai-panel">
+        <div class="ai-header">
+            <img src="/assets/images/concierge-avatar.svg" class="ai-avatar" />
+            <span class="ai-title">Concierge AI summary:</span>
+        </div>
+        <div class="ai-content"></div>
+        <button class="ai-show-more hidden">
+            Show more <img src="/assets/images/down.svg" class="base-icon" />
+        </button>
+    </div>
+</template>

docs/_includes/search-toggle.html

@@ -1,5 +1,11 @@
+{% unless page.url == "/" or page.url contains "/search" %}
 <div class="search-icon">
-    <a onclick="openSidebar()" id="toggle-search-open">
+    {% if page.url contains "expensify-classic" %}
+    <a href="/search?platform=expensify-classic" id="toggle-search-open">
+    {% else %}
+    <a href="/search" id="toggle-search-open">
+    {% endif %}
         <img src="/assets/images/search.svg" class="base-icon" />
     </a>
 </div>
+{% endunless %}

docs/_includes/topic-card.html

@@ -0,0 +1,11 @@
+{% assign topic = include.topic %}
+<div class="topic-card">
+    <img class="icon" src="{{ topic.icon }}" alt="{{ topic.title }}" />
+    <h3 class="title with-margin">{{ topic.title }}</h3>
+    <ul class="topic-links">
+        {% for link in topic.links %}
+            <li><a href="{{ link.href }}">{{ link.label }}</a></li>
+        {% endfor %}
+        <li><a href="{{ topic.hub }}">More</a></li>
+    </ul>
+</div>

docs/_layouts/default.html

@@ -24,7 +24,7 @@
     <!-- SEO tags -->
     {% seo %}
 </head>
-<body>
+<body{% if page.url contains "/search" %} class="mobile-lhn"{% endif %}>
     <!-- Google Tag Manager (noscript) -->
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TQBQW7CR" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
@@ -48,13 +48,27 @@
             </div>
         </div>
 
-        <!-- Sidebar Search sections -->
-        {% include sidebar-search.html id="sidebar-layer" %}
         {% include search-result-item.html %}
 
         <!-- LHN content (Main navigation tree or Article TOC) -->
         <div id="lhn-content">
-            {% if page.url == "/" or page.url contains "/hubs/" %}
+            {% unless page.url == "/" or page.url contains "/search" %}
+                <form class="lhn-search-form" action="/search">
+                    {% if page.url contains "expensify-classic" %}
+                        <input type="hidden" name="platform" value="expensify-classic" />
+                    {% endif %}
+                    <label class="search-input-wrapper lhn-search-input-wrapper" for="lhn-search-input">
+                        <input type="text" id="lhn-search-input" name="q" class="search-input" required autocomplete="off" />
+                        <span class="search-label">Search for something...</span>
+                    </label>
+                </form>
+            {% endunless %}
+            {% if page.url contains "/search" %}
+                <div id="back-button" class="icon-with-link">
+                    <img src="/assets/images/back-left.svg" class="base-icon"></img>
+                    <div class="link">Back</div>
+                </div>
+            {% elsif page.url == "/" or page.url contains "/hubs/" %}
                 {% include lhn-template.html %}
             {% else %}
                 <div id="back-button" class="icon-with-link">