From c3319a6e848b2ef96eca64e33a8b6a6c63e4711b Mon Sep 17 00:00:00 2001
From: tykayn <contact@cipherbliss.com>
Date: Mon, 18 Aug 2025 17:41:16 +0200
Subject: [PATCH] up source block

---
 .../chatbot/source-block/source-block.html    |  8 +++----
 .../chatbot/source-block/source-block.scss    | 22 +++++++++++++++++++
 .../source-block/source-block.stories.ts      |  8 +++++++
 .../app/chatbot/source-block/source-block.ts  |  8 ++++++-
 4 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/old-sae-airwatch/src/app/chatbot/source-block/source-block.html b/old-sae-airwatch/src/app/chatbot/source-block/source-block.html
index 8188233..0240f2c 100644
--- a/old-sae-airwatch/src/app/chatbot/source-block/source-block.html
+++ b/old-sae-airwatch/src/app/chatbot/source-block/source-block.html
@@ -1,15 +1,15 @@
-<div class="source">
+<div [ngClass]="{'expanded': expanded}" class="source">
   <i class="ri-file-3-line"></i>
-  <span class="title">{{ source.title || 'Source sans nom' }}</span>
+  <a class="title">{{ source.title || 'Source sans nom' }}</a>
 
   <div class="actions has-text-right">
 
     <i class="ri-file-add-line"></i>
-    <i class="ri-arrow-down-s-line"></i>
+    <i (click)="toggleExpanded()" class="ri-arrow-down-s-line"></i>
   </div>
 
 
-  <div class="description">
+  <div (click)="toggleExpanded()" class="description">
 
     {{ source.description || description }}
   </div>
diff --git a/old-sae-airwatch/src/app/chatbot/source-block/source-block.scss b/old-sae-airwatch/src/app/chatbot/source-block/source-block.scss
index a030e15..be23acb 100644
--- a/old-sae-airwatch/src/app/chatbot/source-block/source-block.scss
+++ b/old-sae-airwatch/src/app/chatbot/source-block/source-block.scss
@@ -1,3 +1,7 @@
+//@use "remixicon/fonts/remixicon.scss";
+//@use "sae-lib/src/styles/variables";
+
+
 .source {
   padding: 10px;
   margin-bottom: 10px;
@@ -9,16 +13,34 @@
   cursor: pointer;
   border-radius: 4px;
 
+  height: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.expanded {
+    height: auto;
+  }
+
   .title {
     color: #1E1F22;
     font-size: 14px;
     font-weight: 600;
     margin-left: 3px;
+    cursor: pointer;
+
+    &:hover {
+      color: #005AA2;
+      text-decoration: underline;
+    }
   }
 
   .actions {
     color: #005AA2;
     float: right;
+
+    i {
+      margin-left: 10px;
+    }
   }
 
   &:hover {
diff --git a/old-sae-airwatch/src/app/chatbot/source-block/source-block.stories.ts b/old-sae-airwatch/src/app/chatbot/source-block/source-block.stories.ts
index 7d95f57..95e1e4b 100644
--- a/old-sae-airwatch/src/app/chatbot/source-block/source-block.stories.ts
+++ b/old-sae-airwatch/src/app/chatbot/source-block/source-block.stories.ts
@@ -1,11 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 import { SourceBlock } from './source-block';
 import { ChatbotSource } from '../../services/conversations.service';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
 
 const meta: Meta<SourceBlock> = {
   title: 'Components/SourceBlock',
   component: SourceBlock,
   tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule],
+      providers: []
+    })
+  ],
   argTypes: {
     source: {
       control: 'object',
diff --git a/old-sae-airwatch/src/app/chatbot/source-block/source-block.ts b/old-sae-airwatch/src/app/chatbot/source-block/source-block.ts
index 141465a..92e4b7a 100644
--- a/old-sae-airwatch/src/app/chatbot/source-block/source-block.ts
+++ b/old-sae-airwatch/src/app/chatbot/source-block/source-block.ts
@@ -1,14 +1,20 @@
 import {Component, Input} from '@angular/core';
 import {ChatbotSource} from '../../services/conversations.service';
+import {CommonModule} from '@angular/common';
 
 @Component({
   selector: 'app-source-block',
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './source-block.html',
   styleUrl: './source-block.scss'
 })
 export class SourceBlock {
+
+  public expanded: boolean = false;
   @Input() source: ChatbotSource = {} as ChatbotSource;
   description: string = "lorem blah blah";
 
+  toggleExpanded() {
+    this.expanded = !this.expanded
+  }
 }