feat: add assistant conversation widget

apps/nextjs/src/components/board/items/actions/create-item.ts

@@ -60,9 +60,12 @@ const createItemLayouts = (board: Board, currentSection: EmptySection, kind: Wid
   return layouts.map((layoutId) => {
     const boardLayout = board.layouts.find((layout) => layout.id === layoutId);
     const elements = getSectionElements(board, { sectionId: currentSection.id, layoutId });
+    const layoutItemSize = boardLayout
+      ? { ...itemSize, width: Math.min(itemSize.width, boardLayout.columnCount) }
+      : itemSize;
 
     const emptyPosition = boardLayout
-      ? getFirstEmptyPosition(elements, boardLayout.columnCount, 9999, itemSize)
+      ? getFirstEmptyPosition(elements, boardLayout.columnCount, 9999, layoutItemSize)
       : { xOffset: 0, yOffset: 0 };
 
     if (!emptyPosition) {
@@ -70,8 +73,8 @@ const createItemLayouts = (board: Board, currentSection: EmptySection, kind: Wid
     }
 
     return {
-      width: itemSize.width,
-      height: itemSize.height,
+      width: layoutItemSize.width,
+      height: layoutItemSize.height,
       ...emptyPosition,
       sectionId: currentSection.id,
       layoutId,

apps/nextjs/src/components/board/items/actions/test/create-item.spec.ts

@@ -108,4 +108,24 @@ describe("item actions create-item", () => {
       { height: 1, width: 1 },
     );
   });
+
+  test("should fit a wide widget to every board layout", () => {
+    const layoutId = "compact-layout";
+    const layout = new LayoutMockBuilder({ id: layoutId, columnCount: 4 }).build();
+    const board = new BoardMockBuilder().addLayout(layout).addEmptySection({ id: "section" }).build();
+    const layoutsSpy = vi.spyOn(boardContext, "getBoardLayouts");
+    layoutsSpy.mockReturnValue([layoutId]);
+    const emptyPositionSpy = vi.spyOn(emptyPositionModule, "getFirstEmptyPosition");
+    emptyPositionSpy.mockReturnValue({ xOffset: 0, yOffset: 0 });
+
+    const result = createItemCallback({ kind: "assistant" })(board);
+
+    expect(result.items.at(0)?.layouts.at(0)).toEqual(
+      expect.objectContaining({ width: layout.columnCount, height: 4 }),
+    );
+    expect(emptyPositionSpy).toHaveBeenCalledWith([], layout.columnCount, 9999, {
+      width: layout.columnCount,
+      height: 4,
+    });
+  });
 });

apps/nextjs/src/components/board/items/item-content.tsx

@@ -26,7 +26,7 @@ interface BoardItemContentProps {
 }
 
 const getOverflowFromKind = (kind: SectionItem["kind"]) => {
-  if (kind === "iframe") return "hidden";
+  if (kind === "iframe" || kind === "assistant") return "hidden";
   if (kind === "systemResources") return "visible";
   return undefined;
 };