update ui update and fix layout issue

src/features/loyaly-ai/components/SuggestionChips.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import {HStack} from '@astryxdesign/core/Layout';
+import {SUGGESTIONS} from '@/features/loyaly-ai/utils/suggestions';
+
+/**
+ * The opening moves, as a wrapped row of chips.
+ *
+ * Chips rather than the stacked button list this replaces: six full-width
+ * secondary buttons read as a menu of commands, which is what made the old
+ * panel feel like a dashboard. A wrapped row of quiet pills reads as
+ * suggestions — the same distinction ChatGPT, Claude and Gemini all make.
+ *
+ * Hand-built rather than Astryx's Token: Token is a data chip with a
+ * dismiss/selected vocabulary that does not apply here, and Button carries a
+ * control's weight. What is wanted is a quiet, fully-rounded, tappable label —
+ * three token-backed utilities, and no component contract to fight.
+ */
+const CHIP = [
+  'rounded-full border border-border bg-card',
+  'px-3.5 py-2 text-sm text-secondary text-left',
+  'transition-colors duration-150 cursor-pointer',
+  'hover:bg-muted hover:text-primary hover:border-border-strong',
+  'focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2',
+].join(' ');
+
+export function SuggestionChips({onPick}: {onPick: (prompt: string) => void}) {
+  return (
+    <HStack gap={2} wrap="wrap" hAlign="center">
+      {SUGGESTIONS.map((s) => (
+        <button
+          key={s.id}
+          type="button"
+          className={CHIP}
+          onClick={() => onPick(s.prompt)}
+        >
+          {s.label}
+        </button>
+      ))}
+    </HStack>
+  );
+}