LangServe聊天小部件输出优化实践

背景介绍

在使用LangServe构建聊天应用时，开发者经常会遇到一个常见问题：当使用内置的聊天小部件(Chat Widget)时，长文本响应会导致输出区域变得非常冗长，使得用户需要不断滚动页面才能找到"开始"按钮进行下一轮对话。这不仅影响用户体验，也降低了界面的美观度。

问题分析

LangServe的默认聊天小部件实现会将LLM的响应内容以单词为单位展开显示，这在处理短文本时没有问题，但当响应内容较长时，会导致输出区域异常膨胀。这种设计虽然展示了详细的输出结构，但在实际生产环境中并不实用。

解决方案

通过重构LCEL(语言链表达式)链，我们可以优化输出格式。核心思路是使用StrOutputParser将输出转换为单一字符串，而不是默认的单词列表形式。

优化后的代码实现

from langserve.schema import CustomUserType
from typing import List, Tuple
from pydantic import Field
from langchain_core.messages import BaseMessage, HumanMessage, AIMessage
from langchain_core.runnables import RunnableLambda, RunnableParallel, RunnablePassthrough
from langchain_openai import ChatOpenAI
from langchain_core.output_parsers import StrOutputParser
from operator import itemgetter

class ChatHistory(CustomUserType):
    chat_history: List[Tuple[str, str]] = Field(
        ...,
        examples=[[("human输入", "AI响应")]],
        extra={"widget": {"type": "chat", "input": "question", "output": "answer"}},
    )
    question: str

def _format_to_messages(input: ChatHistory) -> List[BaseMessage]:
    """将输入格式化为消息列表"""
    history = input.chat_history
    user_input = input.question

    messages = []
    for human, ai in history:
        messages.append(HumanMessage(content=human))
        messages.append(AIMessage(content=ai))
    messages.append(HumanMessage(content=user_input))
    return messages

model = ChatOpenAI()

chat_model = (
    RunnableLambda(_format_to_messages) 
    | model
    | {"answer": RunnablePassthrough() | StrOutputParser()}
    | {"answer": itemgetter("answer")}
).with_types(input_type=ChatHistory)

关键优化点

1. 输出解析器：使用StrOutputParser将模型输出转换为单一字符串
2. 结果包装：通过RunnablePassthrough保持数据流，同时应用输出解析
3. 结构简化：最终使用itemgetter提取需要的字段，确保输出结构简洁

技术原理

这种优化方法的有效性基于LangChain的几个核心概念：

1. Runnable组合：通过|操作符将多个Runnable组件连接起来，形成数据处理流水线
2. 类型转换：StrOutputParser负责将模型的复杂输出转换为简单字符串
3. 数据流控制：RunnablePassthrough允许数据在不变的情况下通过管道，同时可以附加额外的处理步骤

实际效果

优化后，聊天小部件的输出区域将显示为紧凑的单一字符串，而不是展开的单词列表。这带来了以下改进：

1. 界面更加简洁，不再需要频繁滚动
2. 用户体验提升，可以快速进行下一轮对话
3. 保持了聊天历史记录的完整性和可读性

扩展思考

这种优化方法不仅适用于聊天小部件，也可以应用于其他需要简化输出的LangServe场景。开发者可以根据实际需求，选择不同的输出解析器或自定义输出格式处理逻辑，以获得最佳的用户体验。

对于更复杂的应用场景，还可以考虑：

1. 添加输出长度限制
2. 实现自动滚动功能
3. 添加折叠/展开控制
4. 支持富文本格式输出

通过灵活运用LangChain的组件和LangServe的特性，开发者可以构建出既功能强大又用户友好的聊天应用界面。