updates on the ui changes and changed into doormile

src/components/assistant/DoormileAI/AIWelcome.jsx

@@ -0,0 +1,90 @@
+import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
+
+import { HStack  } from './shim';
+import { VStack  } from './shim';
+import { Text  } from './shim';
+
+import { CHIP_LABELS } from './pageContext';
+
+// ==============================|| Doormile AI — welcome state ||============================== //
+//
+// Shown only when the thread is empty. Deliberately top-weighted and compact
+// so the panel never opens on a large blank region: greeting + one line of
+// what it can do, then straight into four suggestions.
+
+const greeting = () => {
+  const h = dayjs().hour();
+  if (h < 12) return 'Good morning';
+  if (h < 17) return 'Good afternoon';
+  return 'Good evening';
+};
+
+// A chip, not a row.
+//
+// These used to be full-width rows: a 26px icon tile, the question, and a
+// reveal-on-hover arrow, stacked one per line. That reads fine for four
+// suggestions and falls apart at twenty — the panel opened on a wall of
+// identical boxes that had to be read top to bottom, and the whole welcome
+// state scrolled.
+//
+// As chips they flow into a block that is scanned rather than read: each one
+// is only as wide as its question, so the varying widths give the eye
+// something to land on, and twenty of them occupy a few rows instead of
+// twenty. The icon stays as a small inline glyph for recognition; the arrow
+// is gone, because on a chip it was decoration competing with the label.
+const SuggestionChip = ({ item, onAsk }) => {
+  const Icon = item.icon;
+  // Display short, ask long. `item.text` is what intents.js matches on, so it
+  // is what gets asked and what assistive tech announces; the chip only shows
+  // a trimmed version of it so twenty of them fit in a few rows.
+  const label = CHIP_LABELS[item.text] || item.text;
+  return (
+    <button type="button" className="dai-suggestion" onClick={() => onAsk(item.text)} aria-label={item.text} title={item.text}>
+      <Icon className="dai-suggestion-icon" size={13} strokeWidth={2} aria-hidden="true" />
+      <span className="dai-suggestion-text">{label}</span>
+    </button>
+  );
+};
+
+SuggestionChip.propTypes = {
+  item: PropTypes.shape({ icon: PropTypes.elementType.isRequired, text: PropTypes.string.isRequired }).isRequired,
+  onAsk: PropTypes.func.isRequired
+};
+
+// Exported so AIPanel can render it directly above the composer rather than
+// inside the scrolling body. The chips are a way to START a message, so they
+// belong with the input, not buried in the welcome copy where they scrolled
+// out of reach the moment a conversation began.
+export const SuggestionChips = ({ items, onAsk }) => (
+  <HStack className="dai-suggestions" wrap="wrap" gap={1.5} padding={0} vAlign="start">
+    {items.map((item) => (
+      <SuggestionChip key={item.text} item={item} onAsk={onAsk} />
+    ))}
+  </HStack>
+);
+
+SuggestionChips.propTypes = {
+  items: PropTypes.array.isRequired,
+  onAsk: PropTypes.func.isRequired
+};
+
+const AIWelcome = () => {
+  return (
+    <VStack className="dai-welcome" gap={1.5} padding={0}>
+      <VStack gap={0.5} padding={0}>
+        <Text className="dai-welcome-greeting">{greeting()}</Text>
+        <Text className="dai-welcome-lead">How can I help with today&rsquo;s operations?</Text>
+      </VStack>
+      <Text className="dai-welcome-note">
+        I read live orders, riders, vehicles and hubs. Every number comes from a real call — I never estimate one.
+      </Text>
+    </VStack>
+  );
+};
+
+AIWelcome.propTypes = {
+  onAsk: PropTypes.func
+};
+
+export default AIWelcome;