fix: 对话区域显示问题修复

frontend-web/src/components/workspace/messages/message-list-item.tsx

@@ -118,6 +118,7 @@ function useArtifactResolver(threadId: string): (path: string) => string {
 
 export function MessageListItem({
   className,
+  fitRowToContent = false,
   message,
   isLoading,
   threadId,
@@ -126,6 +127,7 @@ export function MessageListItem({
   extraRehypePlugins,
 }: {
   className?: string;
+  fitRowToContent?: boolean;
   message: Message;
   isLoading?: boolean;
   threadId: string;
@@ -140,7 +142,12 @@ export function MessageListItem({
     "";
   return (
     <AIElementMessage
-      className={cn("group/conversation-message relative w-full", className)}
+      className={cn(
+        "group/conversation-message relative",
+        fitRowToContent ? "max-w-full w-fit" : "w-full",
+        isHuman && fitRowToContent && "ml-auto",
+        className,
+      )}
       from={isHuman ? "user" : "assistant"}
     >
       <MessageContent
@@ -343,16 +350,16 @@ function MessageContent_({
       </AIElementMessageResponse>
     ) : null;
     return (
-      <div className={cn("ml-auto flex flex-col gap-2", className)}>
+      <div className={cn("ml-auto flex max-w-full min-w-0 flex-col items-end gap-2", className)}>
         {filesList}
-        {parsedHumanContent.pageContext ? (
-          <EmbeddedPageContextCard pageContext={parsedHumanContent.pageContext} />
-        ) : null}
         {messageResponse && (
-          <AIElementMessageContent className="w-fit">
+          <AIElementMessageContent className="min-w-0 max-w-full w-fit">
             {messageResponse}
           </AIElementMessageContent>
         )}
+        {parsedHumanContent.pageContext ? (
+          <EmbeddedPageContextCard pageContext={parsedHumanContent.pageContext} />
+        ) : null}
         <MessageTimeStamp time={messageTime} align="right" />
       </div>
     );
@@ -388,29 +395,18 @@ function EmbeddedPageContextCard({
 }: {
   pageContext: EmbeddedPageContext;
 }) {
+  const previewText = [pageContext.title, pageContext.url, pageContext.content]
+    .filter(Boolean)
+    .join(" | ");
+
   return (
-    <div className="bg-muted/70 ml-auto flex max-w-sm flex-col gap-2 rounded-2xl border px-3 py-2 text-sm shadow-sm">
+    <div className="bg-muted/70 ml-auto flex w-fit min-w-0 max-w-[min(24rem,calc(100vw-2rem),100%)] flex-col gap-2 rounded-2xl border px-3 py-2 text-sm shadow-sm">
-      {pageContext.title ? (
+      <div
-        <div className="truncate font-medium" title={pageContext.title}>
+        className="text-muted-foreground line-clamp-2 min-w-0 [overflow-wrap:anywhere] break-words text-xs"
-          {pageContext.title}
+        title={previewText}
-        </div>
+      >
-      ) : null}
+        {previewText}
-      {pageContext.url ? (
+      </div>
-        <a
-          className="text-muted-foreground block truncate text-xs underline underline-offset-2"
-          href={pageContext.url}
-          target="_blank"
-          rel="noopener noreferrer"
-          title={pageContext.url}
-        >
-          {pageContext.url}
-        </a>
-      ) : null}
-      {pageContext.content ? (
-        <div className="text-muted-foreground truncate text-xs" title={pageContext.content}>
-          {pageContext.content}
-        </div>
-      ) : null}
     </div>
   );
 }
@@ -506,7 +502,7 @@ function isImageFile(filename: string): boolean {
  * Format bytes to human-readable size string
  */
 function formatBytes(bytes: number): string {
-  if (bytes === 0) return "—";
+  if (bytes === 0) return "0 B";
   const kb = bytes / 1024;
   if (kb < 1024) return `${kb.toFixed(1)} KB`;
   return `${(kb / 1024).toFixed(1)} MB`;
@@ -795,3 +791,4 @@ function groupDisplaySources(sources: RuntimeDisplaySource[]) {
 function normalizeName(name: string) {
   return name.toLowerCase().replace(/[^a-z0-9]+/g, "");
 }
+

frontend-web/src/components/workspace/messages/message-list.tsx

@@ -52,6 +52,8 @@ export const MESSAGE_LIST_FOLLOWUPS_EXTRA_PADDING_BOTTOM = 80;
 
 export function MessageList({
   className,
+  contentClassName,
+  fitMessageRowsToContent = false,
   threadId,
   thread,
   paddingBottom = MESSAGE_LIST_DEFAULT_PADDING_BOTTOM,
@@ -62,6 +64,8 @@ export function MessageList({
   onSetupAgentReject,
 }: {
   className?: string;
+  contentClassName?: string;
+  fitMessageRowsToContent?: boolean;
   threadId: string;
   thread: BaseStream<AgentThreadState>;
   paddingBottom?: number;
@@ -217,7 +221,12 @@ export function MessageList({
     <Conversation
       className={cn("flex size-full flex-col justify-center", className)}
     >
-      <ConversationContent className="mx-auto w-full max-w-(--container-width-lg) gap-8 pt-12">
+      <ConversationContent
+        className={cn(
+          "mx-auto w-full max-w-(--container-width-lg) gap-8 pt-12",
+          contentClassName,
+        )}
+      >
         <MessageMetricsProvider messages={messages} isLoading={thread.isLoading}>
         {groupMessages(messages, (group) => {
           if (group.type === "human" || group.type === "assistant") {
@@ -235,6 +244,7 @@ export function MessageList({
               return (
                 <MessageListItem
                   key={`${group.id}/${msg.id}`}
+                  fitRowToContent={fitMessageRowsToContent}
                   message={msg}
                   isLoading={thread.isLoading}
                   threadId={threadId}

frontend-web/src/pages/IframeChatPage.tsx

@@ -313,10 +313,11 @@ export default function IframeChatPage() {
             </div>
           </header>
           <main className="flex min-h-0 max-w-full grow flex-col overflow-hidden">
-            <div className="flex size-full justify-center">
+            <div className="flex size-full min-w-0">
               {!isLandingState && (
                 <MessageList
                   className={cn("size-full", "pt-10")}
+                  contentClassName="mx-0 max-w-full px-3 sm:px-4"
                   threadId={threadId}
                   thread={thread}
                   paddingBottom={messageListPaddingBottom}
@@ -332,7 +333,7 @@ export default function IframeChatPage() {
                   isLandingState && "-translate-y-[calc(50vh-96px)]",
                   isLandingState
                     ? "max-w-(--container-width-md)"
-                    : "max-w-(--container-width-lg)",
+                    : "max-w-full",
                 )}
               >
                 <div className="absolute -top-4 right-0 left-0 z-0">

frontend-web/src/pages/WorkspaceRoutes.tsx

@@ -43,6 +43,14 @@ import RoundtablePlanningPage from '@/roundtable-planning/pages/RoundtablePlanni
 import '@/roundtable-planning/styles/roundtable-planning.css';
 import { cn } from '@/lib/utils';
 
+function isInIframe(): boolean {
+  try {
+    return window.self !== window.top;
+  } catch {
+    return true;
+  }
+}
+
 export function WorkspaceLayout({
   children,
   pageSidebarCollapsed,
@@ -116,6 +124,30 @@ export function ChatRuntime({ children }: { children: ReactNode }) {
   );
 }
 
+function NewChatEntryRoute({
+  layoutProps,
+}: {
+  layoutProps: {
+    pageSidebarCollapsed: boolean;
+    pageSidebarHidden: boolean;
+    headerHidden: boolean;
+    compactWorkspaceSidebar: boolean;
+    pageSidebarDark: boolean;
+  };
+}) {
+  if (isInIframe()) {
+    return <Navigate to="/page/workspace/chats_iframe/new" replace />;
+  }
+
+  return (
+    <WorkspaceLayout {...layoutProps}>
+      <ChatRuntime>
+        <ChatPage />
+      </ChatRuntime>
+    </WorkspaceLayout>
+  );
+}
+
 export default function WorkspaceRoutes({
   pageSidebarCollapsed = false,
   pageSidebarHidden = false,
@@ -149,6 +181,10 @@ export default function WorkspaceRoutes({
             </WorkspaceLayout>
           }
         />
+        <Route
+          path="chats/new"
+          element={<NewChatEntryRoute layoutProps={layoutProps} />}
+        />
         <Route
           path="chats/:thread_id"
           element={