@ifc-lite/viewer 1.14.2 → 1.14.4

package/src/components/viewer/chat/ModelSelector.tsx

@@ -0,0 +1,102 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * ModelSelector — dropdown to pick the LLM model.
+ * Free models available to everyone. Pro models show cost indicator and lock icon.
+ */
+
+import { useCallback } from 'react';
+import { Lock } from 'lucide-react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useViewerStore } from '@/store';
+import { FREE_MODELS, PRO_MODELS, getModelById } from '@/lib/llm/models';
+
+interface ModelSelectorProps {
+  /** Whether the user has a pro subscription */
+  hasPro?: boolean;
+}
+
+function formatContextWindow(tokens: number): string {
+  if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(0)}M`;
+  return `${(tokens / 1_000).toFixed(0)}K`;
+}
+
+export function ModelSelector({ hasPro = false }: ModelSelectorProps) {
+  const activeModel = useViewerStore((s) => s.chatActiveModel);
+  const setActiveModel = useViewerStore((s) => s.setChatActiveModel);
+
+  const handleChange = useCallback((value: string) => {
+    setActiveModel(value);
+  }, [setActiveModel]);
+
+  const current = getModelById(activeModel);
+
+  return (
+    <Select value={activeModel} onValueChange={handleChange}>
+      <SelectTrigger className="h-6 text-xs w-auto min-w-[140px] gap-1 border-0 bg-transparent hover:bg-muted/50">
+        <SelectValue>
+          <span className="truncate flex items-center gap-1">
+            {current?.name ?? activeModel}
+            {current?.cost && (
+              <span className={`text-[10px] font-mono ${
+                current.cost === '$$$' ? 'text-amber-500' : current.cost === '$$' ? 'text-blue-500' : 'text-emerald-500'
+              }`}>
+                {current.cost}
+              </span>
+            )}
+          </span>
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        {/* Free tier */}
+        <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+          Free
+        </div>
+        {FREE_MODELS.map((m) => (
+          <SelectItem key={m.id} value={m.id} className="text-xs">
+            <span className="flex items-center gap-1.5">
+              <span>{m.name}</span>
+              <span className="text-muted-foreground text-[10px]">{m.provider}</span>
+              <span className="text-muted-foreground/50 text-[10px]">{formatContextWindow(m.contextWindow)}</span>
+            </span>
+          </SelectItem>
+        ))}
+
+        {/* Pro tier */}
+        <div className="px-2 py-1 mt-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-1">
+          Pro
+        </div>
+        {PRO_MODELS.map((m) => (
+          <SelectItem
+            key={m.id}
+            value={m.id}
+            disabled={!hasPro}
+            className="text-xs"
+          >
+            <span className="flex items-center gap-1.5">
+              <span>{m.name}</span>
+              <span className="text-muted-foreground text-[10px]">{m.provider}</span>
+              {m.cost && (
+                <span className={`text-[10px] font-mono ${
+                  m.cost === '$$$' ? 'text-amber-500' : m.cost === '$$' ? 'text-blue-500' : 'text-emerald-500'
+                }`}>
+                  {m.cost}
+                </span>
+              )}
+              <span className="text-muted-foreground/50 text-[10px]">{formatContextWindow(m.contextWindow)}</span>
+              {!hasPro && <Lock className="h-3 w-3 text-muted-foreground/50" />}
+            </span>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/components/viewer/chat/renderTextContent.test.ts

@@ -0,0 +1,23 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { renderTextContent } from './renderTextContent';
+
+test('escapes html tags and script payloads', () => {
+  const rendered = renderTextContent('<img src=x onerror=alert(1)><script>alert("xss")</script>');
+  assert.ok(rendered.includes('&lt;img src=x onerror=alert(1)&gt;'));
+  assert.ok(rendered.includes('&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;'));
+  assert.ok(!rendered.includes('<script>'));
+  assert.ok(!rendered.includes('<img'));
+});
+
+test('preserves allowed inline markdown after escaping', () => {
+  const rendered = renderTextContent('**bold** *italic* `const x = 1`');
+  assert.equal(
+    rendered,
+    '<strong>bold</strong> <em>italic</em> <code class="bg-muted px-1 py-0.5 rounded text-xs font-mono">const x = 1</code>',
+  );
+});

package/src/components/viewer/chat/renderTextContent.ts

@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/** Simple markdown-ish rendering for text segments with HTML escaping. */
+export function renderTextContent(text: string): string {
+  const escaped = text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+
+  return escaped
+    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.*?)\*/g, '<em>$1</em>')
+    .replace(/`([^`]+)`/g, '<code class="bg-muted px-1 py-0.5 rounded text-xs font-mono">$1</code>')
+    .replace(/\n/g, '<br/>');
+}

package/src/components/viewer/hierarchy/HierarchyNode.tsx

@@ -68,7 +68,8 @@ export function HierarchyNode({
   onRemoveModel,
   onModelHeaderClick,
 }: HierarchyNodeProps) {
-  const Icon = TYPE_ICONS[node.type] || TYPE_ICONS.default;
+  const resolvedType = node.ifcType || node.type;
+  const Icon = TYPE_ICONS[resolvedType] || TYPE_ICONS[node.type] || TYPE_ICONS.default;
 
   // Model header nodes (for visibility control and expansion)
   if (node.type === 'model-header' && node.id.startsWith('model-')) {
@@ -261,19 +262,25 @@ export function HierarchyNode({
             <Icon className="h-3.5 w-3.5 shrink-0 text-zinc-500 dark:text-zinc-400" />
           </TooltipTrigger>
           <TooltipContent>
-            <p className="text-xs">{node.type}</p>
+            <p className="text-xs">{resolvedType}</p>
           </TooltipContent>
         </Tooltip>
 
         {/* Name */}
         <span className={cn(
           'flex-1 text-sm truncate ml-1.5',
-          isSpatialContainer(node.type) || node.type === 'IfcBuildingStorey' || node.type === 'unified-storey' || node.type === 'type-group'
+          isSpatialContainer(node.type) || node.type === 'IfcBuildingStorey' || node.type === 'IfcSpace' || node.type === 'unified-storey' || node.type === 'type-group'
             ? 'font-medium text-zinc-900 dark:text-zinc-100'
             : 'text-zinc-700 dark:text-zinc-300',
           nodeHidden && 'line-through decoration-zinc-400 dark:decoration-zinc-600'
         )}>{node.name}</span>
 
+        {node.ifcType && node.type === 'element' && (
+          <span className="text-[10px] font-mono text-zinc-400 dark:text-zinc-500 truncate max-w-[90px]">
+            {node.ifcType}
+          </span>
+        )}
+
         {/* Storey Elevation */}
         {node.storeyElevation !== undefined && (
           <Tooltip>

package/src/components/viewer/hierarchy/treeDataBuilder.test.ts

@@ -0,0 +1,126 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import { describe, it } from 'node:test';
+import assert from 'node:assert';
+import { IfcTypeEnum, type SpatialHierarchy, type SpatialNode } from '@ifc-lite/data';
+import type { IfcDataStore } from '@ifc-lite/parser';
+import { useViewerStore, type FederatedModel } from '@/store';
+import { buildTreeData } from './treeDataBuilder';
+
+function createSpatialNode(
+  expressId: number,
+  type: IfcTypeEnum,
+  name: string,
+  children: SpatialNode[] = [],
+): SpatialNode {
+  return {
+    expressId,
+    type,
+    name,
+    children,
+    elements: [],
+  };
+}
+
+function createDataStore(): IfcDataStore {
+  const spaceNode = createSpatialNode(5, IfcTypeEnum.IfcSpace, 'e3035b71');
+  const storeyNode = createSpatialNode(4, IfcTypeEnum.IfcBuildingStorey, 'MY_STOREY', [spaceNode]);
+  const buildingNode = createSpatialNode(3, IfcTypeEnum.IfcBuilding, 'MY_BUILDING', [storeyNode]);
+  const siteNode = createSpatialNode(2, IfcTypeEnum.IfcSite, 'MY_SITE', [buildingNode]);
+  const projectNode = createSpatialNode(1, IfcTypeEnum.IfcProject, 'MY_PROJECT', [siteNode]);
+
+  const spatialHierarchy: SpatialHierarchy = {
+    project: projectNode,
+    byStorey: new Map([[4, [6, 7]]]),
+    byBuilding: new Map(),
+    bySite: new Map(),
+    bySpace: new Map([[5, [7]]]),
+    storeyElevations: new Map(),
+    storeyHeights: new Map(),
+    elementToStorey: new Map([[6, 4], [7, 4]]),
+    getStoreyElements: () => [],
+    getStoreyByElevation: () => null,
+    getContainingSpace: (elementId: number) => (elementId === 7 ? 5 : null),
+    getPath: () => [],
+  };
+
+  return {
+    spatialHierarchy,
+    entities: {
+      count: 0,
+      getName: (id: number) => {
+        if (id === 6) return 'Wall';
+        if (id === 7) return '';
+        return '';
+      },
+      getTypeName: (id: number) => {
+        if (id === 6) return 'IfcWall';
+        if (id === 7) return 'IfcWindow';
+        if (id === 5) return 'IfcSpace';
+        return 'Unknown';
+      },
+    },
+  } as unknown as IfcDataStore;
+}
+
+function createModel(idOffset: number): FederatedModel {
+  return {
+    id: 'model-1',
+    name: 'Model 1',
+    ifcDataStore: createDataStore(),
+    geometryResult: { meshes: [], totalVertices: 0, totalTriangles: 0, coordinateInfo: null as never },
+    visible: true,
+    collapsed: false,
+    schemaVersion: 'IFC4',
+    loadedAt: 1,
+    fileSize: 1,
+    idOffset,
+    maxExpressId: 7,
+  };
+}
+
+describe('buildTreeData', () => {
+  it('keeps IfcSpace as a spatial node, expands bySpace children, and avoids storey duplicates', () => {
+    useViewerStore.setState({ models: new Map() });
+    useViewerStore.getState().registerModelOffset('tree-test-padding', 99);
+    const idOffset = useViewerStore.getState().registerModelOffset('model-1', 7);
+    const model = createModel(idOffset);
+    useViewerStore.setState({ models: new Map([['model-1', model]]) });
+
+    const models = new Map<string, FederatedModel>([['model-1', model]]);
+    const expandedNodes = new Set([
+      'root-1',
+      'root-1-2',
+      'root-1-2-3',
+      'root-1-2-3-4',
+      'root-1-2-3-4-5',
+    ]);
+
+    const nodes = buildTreeData(models, null, expandedNodes, false, []);
+
+    const storeyNode = nodes.find((node) => node.id === 'root-1-2-3-4');
+    assert.ok(storeyNode);
+    assert.strictEqual(storeyNode.elementCount, 1);
+
+    const spaceNode = nodes.find((node) => node.id === 'root-1-2-3-4-5');
+    assert.ok(spaceNode);
+    assert.strictEqual(spaceNode.type, 'IfcSpace');
+    assert.deepStrictEqual(spaceNode.expressIds, [5]);
+    assert.deepStrictEqual(spaceNode.globalIds, [105]);
+    assert.strictEqual(spaceNode.elementCount, 1);
+    assert.strictEqual(spaceNode.hasChildren, true);
+
+    const windowNode = nodes.find((node) => node.id === 'element-model-1-7');
+    assert.ok(windowNode);
+    assert.strictEqual(windowNode.type, 'element');
+    assert.strictEqual(windowNode.ifcType, 'IfcWindow');
+    assert.deepStrictEqual(windowNode.expressIds, [7]);
+    assert.deepStrictEqual(windowNode.globalIds, [107]);
+    assert.strictEqual(windowNode.name, 'IfcWindow #7');
+
+    assert.strictEqual(nodes.filter((node) => node.id === 'element-model-1-6').length, 1);
+    assert.strictEqual(nodes.filter((node) => node.id === 'element-model-1-7').length, 1);
+  });
+});