引用商品进行追问

tangwang
1 parent 621b6925
Showing 2 changed files with 486 additions and 17 deletions Show diff stats
README_prompts.md
app.py
@@ -33,3 +33,41 @@ graphRAG在商品搜索中如何使用？我想将他用于，对商品的模糊
 请深度思考如何让 最终 AI 消息 可以引用某次搜索的结果，而不是重新复述，并且废除extract_products_from_response这种方法。要规划一套健全的商品搜索结果的管理、和引用的方法。
+
+
+
+
+
+
+
+
+
+
+请帮我补充一个功能：前端，对于渲染的每一个商品（[SEARCH_REF:xxx]渲染的搜索结果），鼠标hover上去的时候，悬浮可供点击的两个东西：
+1. Similar products： 点击后，从右侧拉出、覆盖大部分页面、保留部分背景（我不知道这种技术叫什么，实现类似效果即可）展现的内容是，以该商品未标题，发起商品搜索，页面展示搜索结果。
+2. 一个勾选框，点击后为勾选状态。可以勾选多个商品。
+下方也悬浮两个菜单，一个ask，一个compare。
+如果是点击了ask，那么，将引用这两个商品进行继续对话，如果点击了compare，那么，也是从右侧拉出一个页面，覆盖到上面，对这两个商品进行对比，页面内容为空，提示暂未实现即可）
+
+
+
+如果我要引用其中几款商品，进行对话，请给我一个后端（LLM、智能体交互方面）的方案
+前端，对话框里面，也要显示引用的商品，每个引用的商品右上角给一个删除号，下面正常聊天，点击发送后，后端要引用这几款商品进行对话。
+请深度思考、设计智能体如何支持这个 chat with的功能
+
+
+
+
+
+
+
+
+
+
+
+
+请帮我补充一个功能：前端，对于渲染的每一个商品（[SEARCH_REF:xxx]渲染的搜索结果），鼠标hover上去的时候，悬浮可供点击的两个东西：
+1. Similar products： 点击后，从右侧拉出、覆盖大部分页面、保留部分背景（我不知道这种技术叫什么，实现类似效果即可）展现的内容是，以该商品未标题，发起商品搜索，页面展示搜索结果。
+2. 一个勾选框，点击后为勾选状态。可以勾选多个商品。
+下方也悬浮两个菜单，一个ask，一个compare。
+如果是点击了ask，那么，将引用这两个商品进行继续对话，如果点击了compare，那么，也是从右侧拉出一个页面，覆盖到上面，对这两个商品进行对比，页面内容为空，提示暂未实现即可）
@@ -3,11 +3,12 @@ ShopAgent - Streamlit UI
 Multi-modal fashion shopping assistant with conversational AI
 """
+import html
 import logging
 import re
 import uuid
 from pathlib import Path
-from typing import Optional
+from typing import Any, Optional
 import streamlit as st
 from PIL import Image, ImageOps
@@ -222,6 +223,120 @@ st.markdown(
     .uploadedFile {
         display: none;
     }
+
+    /* Product card wrapper: hover reveals action bar */
+    .product-card-wrapper {
+        position: relative;
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid #e5e5e5;
+        background: #fff;
+    }
+    .product-card-actions {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+        padding: 6px 8px;
+        background: rgba(0,0,0,0.04);
+        border-top: 1px solid #eee;
+        opacity: 0.85;
+        transition: opacity 0.2s;
+    }
+    .product-card-wrapper:hover .product-card-actions {
+        opacity: 1;
+        background: rgba(0,0,0,0.06);
+    }
+
+    /* Right side drawer (off-canvas) */
+    .side-drawer-backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0,0,0,0.35);
+        z-index: 999998;
+        transition: opacity 0.25s;
+    }
+    .side-drawer-panel {
+        position: fixed;
+        top: 56px;
+        right: 0;
+        width: 85%;
+        max-width: 560px;
+        height: calc(100vh - 56px);
+        background: white;
+        box-shadow: -4px 0 20px rgba(0,0,0,0.12);
+        z-index: 999999;
+        overflow-y: auto;
+        transition: transform 0.25s ease-out;
+    }
+    .side-drawer-panel.open {
+        transform: translateX(0);
+    }
+    .side-drawer-header {
+        position: sticky;
+        top: 0;
+        background: white;
+        border-bottom: 1px solid #e5e5e5;
+        padding: 12px 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        z-index: 1;
+    }
+    .side-drawer-close-link {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+        color: #333 !important;
+        font-size: 14px;
+        font-weight: 500;
+        padding: 8px 14px;
+        border-radius: 8px;
+        border: 1px solid #ccc;
+        background: #f0f0f0 !important;
+        min-width: 60px;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.06);
+    }
+    .side-drawer-close-link:hover {
+        color: #111 !important;
+        background: #e5e5e5 !important;
+        border-color: #999;
+    }
+    .side-drawer-content {
+        padding: 14px 16px 20px 16px;
+    }
+    /* Ensure drawer overlay is on top and not clipped by Streamlit blocks */
+    .side-drawer-backdrop,
+    .side-drawer-panel {
+        position: fixed !important;
+    }
+
+    /* Bottom floating ask/compare bar */
+    .bottom-actions-bar {
+        position: fixed;
+        bottom: 70px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 8px 16px;
+        background: white;
+        border: 1px solid #e5e5e5;
+        border-radius: 24px;
+        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+        z-index: 1005;
+        max-width: 90%;
+    }
+    .bottom-actions-bar .selected-count {
+        font-size: 0.85rem;
+        color: #666;
+        margin-right: 4px;
+    }
     </style>
     """,
     unsafe_allow_html=True,
@@ -252,6 +367,22 @@ def initialize_session():
     if "show_debug" not in st.session_state:
         st.session_state.show_debug = True
+    # Selected products for ask/compare (key -> product info dict)
+    if "selected_products" not in st.session_state:
+        st.session_state.selected_products = {}
+
+    # Right side panel: visible, mode in ("similar", "compare"), payload (e.g. ref_id, query, or list of selected items)
+    if "side_panel" not in st.session_state:
+        st.session_state.side_panel = {
+            "visible": False,
+            "mode": None,
+            "payload": None,
+        }
+
+    # Products currently referenced in chat input (list of product summary dicts)
+    if "referenced_products" not in st.session_state:
+        st.session_state.referenced_products = []
+
 def save_uploaded_image(uploaded_file) -> Optional[str]:
     """Save uploaded image to temp directory"""
@@ -275,6 +406,87 @@ def save_uploaded_image(uploaded_file) -&gt; Optional[str]:
         return None
+def _product_key(ref_id: str, index: int, product: ProductItem) -> str:
+    """Stable unique key for a product in the session (for selection and side panel)."""
+    return f"{ref_id}_{index}_{product.spu_id or index}"
+
+
+def _product_to_info(product: ProductItem, ref_id: str) -> dict:
+    """Serialize product to a small dict for selected_products and ask/compare."""
+    return {
+        "ref_id": ref_id,
+        "spu_id": product.spu_id,
+        "sku_id": product.spu_id,
+        "title": product.title or "未知商品",
+        "price": product.price,
+        "tags": product.tags or [],
+        "specifications": product.specifications or [],
+    }
+
+
+def _compact_field(value: Any) -> str:
+    """Format a field into one readable line for chat reference payload."""
+    if value is None:
+        return "-"
+    if isinstance(value, list):
+        if not value:
+            return "-"
+        parts = []
+        for item in value:
+            if isinstance(item, dict):
+                text = ", ".join(f"{k}:{v}" for k, v in item.items())
+                parts.append(text if text else str(item))
+            else:
+                parts.append(str(item))
+        return " | ".join(p for p in parts if p) or "-"
+    return str(value)
+
+
+def _build_reference_prefix(products: list[dict]) -> str:
+    """Build backend prompt prefix for 'chat with referenced products'."""
+    lines = [f"引用 {len(products)} 款商品："]
+    for i, p in enumerate(products, 1):
+        sku_id = _compact_field(p.get("sku_id") or p.get("spu_id"))
+        title = _compact_field(p.get("title"))
+        price = _compact_field(p.get("price"))
+        tags = _compact_field(p.get("tags"))
+        specifications = _compact_field(p.get("specifications"))
+        lines.append(
+            f"{i}. sku_id={sku_id}; title={title}; price={price}; "
+            f"tags={tags}; specifications={specifications}"
+        )
+    return "\n".join(lines)
+
+
+def render_referenced_products_in_input() -> None:
+    """Render referenced products above chat input, each with remove button."""
+    refs = st.session_state.get("referenced_products", [])
+    if not refs:
+        return
+
+    st.markdown("**已引用商品**")
+    remove_idx = None
+    for idx, item in enumerate(refs):
+        with st.container(border=True):
+            c1, c2 = st.columns([12, 1])
+            with c1:
+                title = (item.get("title") or "未知商品")[:80]
+                st.markdown(f"**{title}**")
+                st.caption(
+                    f"sku_id={item.get('sku_id') or item.get('spu_id') or '-'}; "
+                    f"price={_compact_field(item.get('price'))}; "
+                    f"tags={_compact_field(item.get('tags'))}; "
+                    f"specifications={_compact_field(item.get('specifications'))}"
+                )
+            with c2:
+                if st.button("✕", key=f"remove_ref_{idx}", help="删除该引用"):
+                    remove_idx = idx
+    if remove_idx is not None:
+        refs.pop(remove_idx)
+        st.session_state.referenced_products = refs
+        st.rerun()
+
+
 def _load_product_image(product: ProductItem) -> Optional[Image.Image]:
     """Try to load a product image: image_url from API (normalized when stored) → local data/images → None."""
     if product.image_url:
@@ -296,10 +508,39 @@ def _load_product_image(product: ProductItem) -&gt; Optional[Image.Image]:
     return None
-def display_product_card_from_item(product: ProductItem) -> None:
-    """Render a single product card from a ProductItem (registry entry)."""
-    img = _load_product_image(product)
+def _run_similar_search(query: str) -> Optional[str]:
+    """Run product search with query, register result, return new ref_id or None."""
+    if not query or not query.strip():
+        return None
+    from app.tools.search_tools import make_search_products_tool
+
+    session_id = st.session_state.get("session_id", "")
+    if not session_id:
+        return None
+    tool = make_search_products_tool(session_id, global_registry)
+    try:
+        out = tool.invoke({"query": query.strip(), "limit": 12})
+        match = SEARCH_REF_PATTERN.search(out)
+        if match:
+            return match.group(1).strip()
+    except Exception as e:
+        logger.warning(f"Similar search failed: {e}")
+    return None
+
+def display_product_card_from_item(
+    product: ProductItem,
+    ref_id: str,
+    index: int,
+) -> None:
+    """Render a single product card with hover actions: Similar products + checkbox."""
+    pkey = _product_key(ref_id, index, product)
+    info = _product_to_info(product, ref_id)
+    selected = st.session_state.selected_products
+
+    st.markdown('<div class="product-card-wrapper">', unsafe_allow_html=True)
+
+    img = _load_product_image(product)
     if img:
         target = (220, 220)
         try:
@@ -324,6 +565,47 @@ def display_product_card_from_item(product: ProductItem) -&gt; None:
     label_style = "⭐" if product.match_label == "Relevant" else "✦"
     st.caption(f"{label_style} {product.match_label}")
+    st.markdown('<div class="product-card-actions">', unsafe_allow_html=True)
+    col_a, col_b = st.columns([1, 1])
+    with col_a:
+        similar_clicked = st.button(
+            "Similar products",
+            key=f"similar_{pkey}",
+            help="Search by this product title and show in side panel",
+        )
+    with col_b:
+        is_checked = st.checkbox(
+            "Select",
+            key=f"select_{pkey}",
+            value=(pkey in selected),
+            label_visibility="collapsed",
+        )
+    st.markdown("</div>", unsafe_allow_html=True)
+    st.markdown("</div>", unsafe_allow_html=True)
+
+    if similar_clicked:
+        search_query = (product.title or "").strip() or "商品"
+        new_ref = _run_similar_search(search_query)
+        if new_ref:
+            st.session_state.side_panel = {
+                "visible": True,
+                "mode": "similar",
+                "payload": {"ref_id": new_ref, "query": search_query},
+            }
+        else:
+            st.session_state.side_panel = {
+                "visible": True,
+                "mode": "similar",
+                "payload": {"ref_id": None, "query": search_query, "error": True},
+            }
+        st.rerun()
+
+    if is_checked:
+        if pkey not in selected:
+            selected[pkey] = info
+    else:
+        selected.pop(pkey, None)
+
 def render_search_result_block(result: SearchResult) -> None:
     """
@@ -358,7 +640,7 @@ def render_search_result_block(result: SearchResult) -&gt; None:
     cols = st.columns(min(len(to_show), 3))
     for i, product in enumerate(to_show):
         with cols[i % 3]:
-            display_product_card_from_item(product)
+            display_product_card_from_item(product, result.ref_id, i)
 def render_message_with_refs(
@@ -463,11 +745,142 @@ def display_message(message: dict):
         st.markdown("</div>", unsafe_allow_html=True)
+def render_bottom_actions_bar() -> None:
+    """Show Ask and Compare when there are selected products. Disabled when none selected."""
+    selected = st.session_state.selected_products
+    n = len(selected)
+    if n == 0:
+        return
+    st.markdown(
+        '<div class="bottom-actions-bar">',
+        unsafe_allow_html=True,
+    )
+    col_sel, col_ask, col_cmp = st.columns([2, 1, 1])
+    with col_sel:
+        st.caption(f"Selected: {n}")
+    with col_ask:
+        ask_clicked = st.button("Ask", key="bottom_ask", help="Continue conversation with selected products")
+    with col_cmp:
+        compare_clicked = st.button("Compare", key="bottom_compare", help="Compare selected products")
+    st.markdown("</div>", unsafe_allow_html=True)
+
+    if ask_clicked:
+        st.session_state.referenced_products = list(selected.values())
+        st.rerun()
+    if compare_clicked:
+        st.session_state.side_panel = {
+            "visible": True,
+            "mode": "compare",
+            "payload": list(selected.values()),
+        }
+        st.rerun()
+
+
+def render_side_drawer() -> None:
+    """Render a fixed overlay side drawer that does not change background layout."""
+    panel = st.session_state.side_panel
+    if not panel.get("visible") or not panel.get("mode"):
+        return
+
+    mode = panel["mode"]
+    payload = panel.get("payload") or {}
+    session_id = st.session_state.get("session_id", "")
+
+    title = "Similar products" if mode == "similar" else "Compare"
+    body_html = ""
+
+    if mode == "similar":
+        ref_id = payload.get("ref_id")
+        query = html.escape(payload.get("query", ""))
+        if payload.get("error") or not ref_id:
+            body_html = '<p style="color:#666;">搜索失败或暂无结果。</p>'
+        else:
+            result = global_registry.get(session_id, ref_id)
+            if not result:
+                body_html = f'<p style="color:#666;">[搜索结果 {html.escape(ref_id)} 不可用]</p>'
+            else:
+                perfect = [p for p in result.products if p.match_label == "Relevant"]
+                partial = [p for p in result.products if p.match_label == "Partially Relevant"]
+                to_show = (perfect + partial)[:12] if perfect else partial[:12]
+                cards = []
+                for product in to_show:
+                    p_title = html.escape((product.title or "未知商品")[:80])
+                    p_label = html.escape(product.match_label or "Partially Relevant")
+                    price = (
+                        f"¥{product.price:.2f}"
+                        if product.price is not None
+                        else "价格待更新"
+                    )
+                    image_html = (
+                        f'<img src="{html.escape(product.image_url)}" alt="{p_title}" '
+                        'style="width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid #eee;" />'
+                        if product.image_url
+                        else '<div style="width:64px;height:64px;background:#f5f5f5;border-radius:8px;'
+                        'display:flex;align-items:center;justify-content:center;color:#bbb;">🛍️</div>'
+                    )
+                    cards.append(
+                        '<div style="display:flex;gap:10px;border:1px solid #eee;border-radius:10px;'
+                        'padding:10px;background:#fff;">'
+                        f"{image_html}"
+                        '<div style="flex:1;min-width:0;">'
+                        f'<div style="font-weight:600;color:#111;line-height:1.35;">{p_title}</div>'
+                        f'<div style="font-size:0.9rem;color:#555;margin-top:4px;">{price}</div>'
+                        f'<div style="font-size:0.8rem;color:#777;margin-top:4px;">{p_label}</div>'
+                        "</div></div>"
+                    )
+
+                cards_html = "".join(cards) if cards else '<p style="color:#666;">（未找到可展示的商品）</p>'
+                body_html = (
+                    f'<div style="font-size:0.92rem;color:#555;margin-bottom:10px;">'
+                    f'基于「{query}」的搜索结果：</div>'
+                    '<div style="display:grid;gap:10px;">'
+                    f"{cards_html}"
+                    "</div>"
+                )
+    else:
+        items = payload if isinstance(payload, list) else []
+        if items:
+            rows = []
+            for item in items:
+                t = html.escape((item.get("title") or "未知商品")[:80])
+                p = item.get("price")
+                ptext = f"¥{p:.2f}" if p is not None else "价格待更新"
+                rows.append(
+                    '<div style="border:1px solid #eee;border-radius:10px;padding:10px;background:#fff;">'
+                    f'<div style="font-weight:600;color:#111;">{t}</div>'
+                    f'<div style="font-size:0.9rem;color:#555;margin-top:4px;">{ptext}</div>'
+                    "</div>"
+                )
+            items_html = "".join(rows)
+        else:
+            items_html = '<p style="color:#666;">当前未选中商品。</p>'
+        body_html = (
+            '<div style="margin-bottom:10px;color:#555;">已选商品：</div>'
+            f'<div style="display:grid;gap:10px;">{items_html}</div>'
+            '<div style="margin-top:14px;padding:10px 12px;border-radius:8px;'
+            'background:#fff3cd;color:#856404;">对比功能暂未实现。</div>'
+        )
+
+    st.markdown(
+        f"""
+        <div class="side-drawer-backdrop"></div>
+        <div class="side-drawer-panel open">
+            <div class="side-drawer-header">
+                <div style="font-weight:600;">{html.escape(title)}</div>
+                <a class="side-drawer-close-link" href="./?close_side_panel=1" target="_self">✕ 关闭</a>
+            </div>
+            <div class="side-drawer-content">
+                {body_html}
+            </div>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
 def display_welcome():
     """Display welcome screen"""
-
     col1, col2, col3, col4 = st.columns(4)
-
     with col1:
         st.markdown(
             """
@@ -518,10 +931,17 @@ def display_welcome():
     st.markdown("<br><br>", unsafe_allow_html=True)
-
 def main():
     """Main Streamlit app"""
     initialize_session()
+    # Close overlay via query param (used by HTML close link in side drawer)
+    if st.query_params.get("close_side_panel"):
+        st.session_state.side_panel = {"visible": False, "mode": None, "payload": None}
+        del st.query_params["close_side_panel"]
+        st.rerun()
+
+    # Drawer overlay first so fixed positioning is relative to viewport (not a bottom block)
+    render_side_drawer()
     # Header
     st.markdown(
@@ -547,6 +967,9 @@ def main():
                 global_registry.clear_session(session_id)
             st.session_state.messages = []
             st.session_state.uploaded_image = None
+            st.session_state.selected_products = {}
+            st.session_state.referenced_products = []
+            st.session_state.side_panel = {"visible": False, "mode": None, "payload": None}
             st.rerun()
         # Debug toggle
@@ -561,15 +984,14 @@ def main():
         st.markdown("---")
         st.caption(f"Session: `{st.session_state.session_id[:8]}...`")
-    # Chat messages container
     messages_container = st.container()
-
     with messages_container:
         if not st.session_state.messages:
             display_welcome()
         else:
             for message in st.session_state.messages:
                 display_message(message)
+    render_bottom_actions_bar()
     # Fixed input area at bottom (using container to simulate fixed position)
     st.markdown('<div class="fixed-input-container">', unsafe_allow_html=True)
@@ -598,6 +1020,9 @@ def main():
                         st.session_state.show_image_upload = False
                         st.rerun()
+        # Referenced products area (shown above chat input, each can be removed)
+        render_referenced_products_in_input()
+
         # Input row
         col1, col2 = st.columns([1, 12])
@@ -620,6 +1045,12 @@ def main():
     # Process user input
     if user_query:
+        raw_user_query = user_query
+        referenced_products = list(st.session_state.get("referenced_products", []))
+        agent_query = raw_user_query
+        if referenced_products:
+            agent_query = f"{_build_reference_prefix(referenced_products)}\n\n{raw_user_query}"
+
         # Ensure shopping agent is initialized
         if "shopping_agent" not in st.session_state:
             st.error("Session not initialized. Please refresh the page.")
@@ -632,9 +1063,8 @@ def main():
             image_path = save_uploaded_image(st.session_state.uploaded_image)
         else:
             # Check if query refers to a previous image
-            query_lower = user_query.lower()
             if any(
-                ref in query_lower
+                ref in raw_user_query.lower()
                 for ref in [
                     "this",
                     "that",
@@ -655,11 +1085,14 @@ def main():
         st.session_state.messages.append(
             {
                 "role": "user",
-                "content": user_query,
+                "content": raw_user_query,
                 "image_path": image_path,
             }
         )
+        # References are consumed once this message is sent
+        st.session_state.referenced_products = []
+
         # Display user message immediately
         with messages_container:
             display_message(st.session_state.messages[-1])
@@ -667,12 +1100,10 @@ def main():
         # Process with shopping agent
         try:
             shopping_agent = st.session_state.shopping_agent
-            
-            # Handle greetings without invoking the agent
-            query_lower = user_query.lower().strip()
+
             # Process with agent
             result = shopping_agent.chat(
-                query=user_query,
+                query=agent_query,
                 image_path=image_path,
             )
             response = result["response"]