feat(search): use new Orama components

.github/workflows/sync-orama.yml

@@ -55,5 +55,6 @@ jobs:
         run: node --run sync-orama
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          ORAMA_INDEX_ID: ${{ github.event_name == 'push' && secrets.ORAMA_PRODUCTION_INDEX_ID || secrets.ORAMA_INDEX_ID }}
-          ORAMA_SECRET_KEY: ${{ github.event_name == 'push' && secrets.ORAMA_PRODUCTION_SECRET_KEY || secrets.ORAMA_SECRET_KEY }}
+          NEW_ORAMA_PROJECT_ID: ${{ github.event_name == 'push' && secrets.NEW_ORAMA_PROJECT_ID }}
+          NEW_ORAMA_PRIVATE_API_KEY: ${{ github.event_name == 'push' && secrets.NEW_ORAMA_PRIVATE_API_KEY }}
+          NEW_ORAMA_DATASOURCE_ID: ${{ github.event_name == 'push' && secrets.NEW_ORAMA_DATASOURCE_ID }}

.gitignore

@@ -48,4 +48,7 @@ test-results
 playwright-report
 
 ## MacOS Ignored Files
-.DS_Store
+.DS_Store
+
+## Other Files
+.env

apps/site/components/Common/Searchbox/ChatActions/index.module.css

@@ -0,0 +1,44 @@
+@reference "../../../../styles/index.css";
+
+.chatActionsContainer {
+  @apply flex
+    items-center
+    justify-end;
+}
+
+.chatActionsList {
+  @apply flex
+    list-none
+    items-center
+    gap-2
+    p-0;
+}
+
+.chatAction {
+  @apply cursor-pointer
+    rounded-full
+    p-2
+    text-neutral-800
+    duration-300
+    hover:bg-neutral-300
+    focus:bg-neutral-300
+    focus:outline-none
+    motion-safe:transition-colors
+    dark:text-neutral-400
+    dark:hover:bg-neutral-900
+    dark:focus:bg-neutral-900;
+
+  svg {
+    @apply size-4;
+  }
+}
+
+.chatActionIconSelected {
+  @apply text-green-600
+    dark:text-green-400;
+}
+
+.chatActionDisaliked {
+  @apply text-neutral-900
+    dark:text-neutral-800;
+}

apps/site/components/Common/Searchbox/ChatActions/index.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import {
+  DocumentCheckIcon,
+  ClipboardIcon,
+  ArrowPathIcon,
+  HandThumbDownIcon,
+} from '@heroicons/react/24/solid';
+import type { Interaction } from '@orama/core';
+import { ChatInteractions } from '@orama/ui/components';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import { useState } from 'react';
+
+import styles from './index.module.css';
+
+type ChatActionsProps = {
+  interaction: Interaction;
+};
+
+export const ChatActions: FC<ChatActionsProps> = ({ interaction }) => {
+  const [isDisliked, setIsDisliked] = useState(false);
+
+  const dislikeMessage = () => setIsDisliked(!isDisliked);
+
+  if (!interaction.response) {
+    return null;
+  }
+
+  return (
+    <div className={styles.chatActionsContainer}>
+      <ul className={styles.chatActionsList}>
+        <li>
+          <ChatInteractions.RegenerateLatest
+            className={styles.chatAction}
+            interaction={interaction}
+          >
+            <ArrowPathIcon />
+          </ChatInteractions.RegenerateLatest>
+        </li>
+        <li>
+          <ChatInteractions.CopyMessage
+            className={styles.chatAction}
+            interaction={interaction}
+          >
+            {(copied: boolean) =>
+              copied ? (
+                <DocumentCheckIcon className={styles.chatActionIconSelected} />
+              ) : (
+                <ClipboardIcon />
+              )
+            }
+          </ChatInteractions.CopyMessage>
+        </li>
+        {!interaction.loading && (
+          <li>
+            <button
+              className={classNames(styles.chatAction, {
+                [styles.chatActionDisaliked]: isDisliked,
+              })}
+              onClick={dislikeMessage}
+            >
+              <HandThumbDownIcon />
+            </button>
+          </li>
+        )}
+      </ul>
+    </div>
+  );
+};