# Shop Chat Page Template

Use this reference when creating, downloading, refreshing, or reviewing the current production `/shop-chat/` shopping-guide template. The canonical file is `assets/templates/shop-chat-page-template.html`; it is a snapshot of the live page with the current CSS and JS inlined so it can be opened directly for framework and interaction checks.

## Scope

- Canonical route: `https://leaibot.cn/shop-chat/`.
- Sibling routes that share the same page framework: `/b-chat/` and `/biz-chat/`.
- Preserve the existing product data, routing, analytics hooks, lazy loading, drag/drop behavior, assistant chat behavior, and API calls. Template refreshes should only update the captured shell and presentation layer unless explicitly requested.
- In local template mode, root-relative API calls may be forwarded to `https://leaibot.cn` so the page remains interactive when opened as a local file.
- Current local baseline was refreshed 2026-07-30. Recorded resources are `main.css?v=202607150210`, `assistant-panel-ng-skin.css?v=202606222610`, `portal.js?v=202606183100`, `app-intent.js?v=202607151558`, `app-conv.js?v=202607101745`, `app.js?v=202607151945`, `app-lxfd.js?v=202607150005`, `app-voice.js?v=202607142230`, and `app-agent.js?v=202607131544`.
- The current local template opens the `个人及家庭：新对话` mall view with left assistant, campaign banner, white sticky category bar, category tabs `推荐 / 小新 / 拯救者 / YOGA / ThinkPad / 手机 / 配件`, and real `assets/img/shop-X` product imagery.

## Page Frame

- Use a two-column PC shell: fixed left assistant panel plus right commerce content area.
- The left panel contains tool buttons, greeting/default intent list, conversation state, shortcut row, composer, more menu, hover-prompt card, history/sidebar controls, collapse/fullscreen toggle, swap control, and resize handle.
- The right area contains the mall frame, banner, category tabs, product floors/grid, product detail view, and sticky commerce affordances.
- Keep the gap between left assistant and right commerce area compact. When the left assistant width changes, the right content must adapt without overlap.
- Product details open as a detail page/state in the right content area, not as a misplaced active category tab. Product-card click behavior must remain distinct from drag-to-composer and add-to-cart behavior.

## Left Assistant Contract

- Tool-row icons use the production aubergine line style. Hover backgrounds are transparent unless the specific button is the existing white floating toggle.
- The history icon must not carry an extra white backing inside the icon artwork.
- The `换位` label is normal weight, not bold.
- The top soft warm/cool gradient background on the assistant panel is part of the visual identity and should be preserved, while dark blocks behind rounded corners should be avoided.
- The assistant resize handle must remain functional even when visually subtle.
- Dragging a product over the assistant should show the approved glow/armed state, but must not show a dashed outline around the panel.
- The bottom shortcut row (`客服`, `我的订单`, `附近门店`, `更多`) is a white-backed row above the composer. Shortcut labels use 500 weight. When a floating hover-prompt card overlays this area, hide the shortcut row so labels do not show through.
- Question-row arrows must use `global-next.svg`; shortcut and menu icons must use their registered files in `assets/icons/`. No inline SVG, base64 SVG, text glyph, or `media/` dependency is allowed.
- Account menu rows are `我的账号 / 我的服务 / 企业认证 / 优化日志 / 退出`; `会员中心` has been removed.
- The `更多` menu appears only from hovering/focusing the `更多` button area and its hover bridge. It should sit above the `更多` button with a small gap and slide in smoothly.

## Composer Contract

- Composer border is a 1px gradient/brand border. It must grow vertically when an attached product card or longer placeholder is present, and controls must stay inside the box.
- The composer and shortcut row keep the same bottom distance in default and conversation states.
- The send button is a compact aubergine circular arrow button in enabled state. Disabled state keeps the same silhouette with 60% opacity.
- Deep-think, web-search, image, and send controls must never be pushed below the composer when a pending product card is attached.
- The pending product card uses the current `待发送` label, thumbnail, product name, red price, spec text, and close button. The label must sit inside the intended top-left area rather than floating into the shortcut row.
- When only one product is attached, the pending card must use a shrink-safe three-column layout: thumbnail, text, and fixed close button. The close button stays inside the composer at narrow assistant widths, and product text must ellipsize instead of pushing controls outside the input box.

## Product Interactions

- Product cards remain clickable and navigate to their product detail state/page.
- Dragging a product card into the assistant/composer must not trigger product navigation.
- Drag interaction requirements: source card opacity drops, ghost follows the pointer, assistant glow activates, dropping inside the assistant creates the pending product card, and dropping outside cancels cleanly.
- Product hover should wake the intelligent cursor and, after a short dwell, show the predicted-question card. The template keeps this interaction responsive for local review; do not regress it back to a long 6-second-only trigger.
- The predicted-question card contains product thumbnail/name/price, a `你在看` badge, close button, short recommendation copy, and suggested follow-up questions.
- The hover recommendation copy must reflect the card family/category. For example, ThinkPad cards should speak to professional productivity, reliability, performance, and service rather than gaming-only Legion messaging.

## Local Interactive Template Mode

- `assets/templates/shop-chat-page-template.html` must remain usable without a local backend. When `/api/products`, chat streaming, or product-reason APIs are unavailable, the local template should fall back to the in-template product grid and generated assistant answer while preserving the same visible interaction shape.
- The local template should keep the screenshot-like first screen visible: right-side product cards must not be replaced by an empty floor container when product APIs fail.
- Message sending must work in the split assistant composer. The fallback answer should acknowledge the user's query, provide useful Lenovo Lexiang next steps, include follow-up chips, and keep the standard AI-content disclaimer.
- Product-card hover must work in local review: the smart cursor wakes on hover, the assistant enters hover-active/glass state, and the floating card shows `你在看` plus follow-up questions.
- Fullscreen-dialog script helpers that iterate multiple nodes must use array selectors (`$$`) rather than single-node helpers (`$`) to avoid breaking later interactions such as send, history, nav, hover prompts, and smart cursor boot.

## Fullscreen Chat Handoff

- Entering fullscreen chat from the split shopping-guide assistant must hide the gallery/welcome home content and show the standard chat thread plus bottom composer.
- The handoff must support both the current `.lxfd-*` structure and older imported `.chat-state` conversation structures.
- Loading a history item from a default new conversation must also switch `.lxfd-gallery-home` into `.is-chatting`, hide `.lxfd-home-gallery`, and display `#lxfdThread` as the active conversation surface.
- Recommendation chips and imported conversation content should route into the fullscreen conversation state; they must not reset the user back to the gallery home.

## Right Commerce Area

- The commerce area uses the current white rounded container, banner, category tabs, section headings, and responsive product grid.
- Product grid adapts from 4 to 6 cards per row according to available browser width.
- Category tabs only show the active underline for the selected tab. Hovering an inactive tab must not create an extra underline.
- Banner decoration text such as `品牌大使 · 张凌赫` can be hidden when it conflicts with the current production visual.
- Sticky category/tab bars should not retain extra top spacer height when pinned.
- The bottom corners of the right commerce container may be squared when it sits flush with the viewport or scroll edge.
- Floor metadata such as `两排精选 8 款` and floor-side CTA buttons should be hidden when the latest production visual removes them.

## Template Refresh Checklist

- Capture from `https://leaibot.cn/shop-chat/` after confirming the current CSS and JS version query strings.
- Inline the current `main.css`, `assistant-panel-ng-skin.css`, `portal.js`, and `app.js` into the template.
- Convert root-relative asset URLs to `https://leaibot.cn/...` for local-open reliability.
- Preserve route behavior for `/shop-chat/` by setting template mode to the `personal` page when opened locally.
- Confirm the local template loads directly into the personal/family mall view rather than the home/fullscreen state.
- Verify that the template still renders the left assistant, right mall frame, product grid, product detail navigation, product drag/drop, more menu, hover-prompt card, composer controls, and send-button states.
- Verify in local static mode that product floors render the intended `shop-X` images and product-card hover shows `smart-cursor.svg` plus the `你在看` prompt card.
- Verify in local static mode that sending `最近有什么优惠活动？` produces a user message, an assistant fallback answer, follow-up chips, and the standard AI disclaimer when live APIs are unavailable.
- Verify that history-item clicks enter chat mode, the home gallery is hidden, `#lxfdThread` is visible, and the bottom dock remains centered and attached to the bottom edge.
- Verify at an assistant composer width around 412px that an attached product card keeps its close button inside the composer with visible right inset.
