feat(search): use new Orama components

.gitignore

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

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

@@ -0,0 +1,42 @@
+@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
+    transition-colors
+    duration-300
+    hover:bg-neutral-300
+    dark:text-neutral-400
+    dark:hover:bg-neutral-900;
+
+  svg {
+    @apply h-4
+      w-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,71 @@
+'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 { useState, type FC } 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 && interaction.response && (
+          <li>
+            <button
+              className={classNames(styles.chatAction, {
+                [styles.chatActionDisaliked]: isDisliked,
+              })}
+              onClick={dislikeMessage}
+            >
+              <HandThumbDownIcon />
+            </button>
+          </li>
+        )}
+      </ul>
+    </div>
+  );
+};