diff --git a/www/html/index.html b/www/html/index.html
index c314d9f..20a7de3 100644
--- a/www/html/index.html
+++ b/www/html/index.html
@@ -1,24 +1,28 @@
 <link href="www/html/_assets/themes/common.css" type="text/css" rel="stylesheet">
 <script src="www/html/_assets/js/assistant.js"></script>
+<script src="www/html/_assets/js/audio.js"></script>
 <script>
     var chat = {get:{}}
     // var _assistant = new Assistant()
     chat.get.id = function (_index){
         return (['.llm-pane-',_index,' .answer .llm-answer']).join('')
     }
-    chat.read = function (_index){
-        var _id = (['.llm-pane-',_index,' .answer .llm-answer']).join('')
-        var text = $(_id).text()
+    chat.read = function (_data, uri){
+        // var _id = (['.llm-pane-',_index,' .answer .llm-answer']).join('')
+        // var text = $(_id).text()
         // Assistant.speak(text)
         //
         // We need to submit the box to retrieve the audio file and transcript
         //
-        _args = {title:'{{layout.header.title}} Transcript Reader',uri:'www/html/transcript.html',context:'{{system.context}}'}
-        uri = '{{system.context}}/api/medix/audio?token='+$('.chat').attr('token')+'&index='+_index
-        uri = uri.replace(/\/\//g,'/')
+        _args = {title:'{{layout.header.title}} Transcript Reader','uri':'www/html/transcript.html',context:'{{system.context}}'}
+        // uri = '{{system.context}}/api/medix/audio?token='+$('.chat').attr('token')+'&index='+_index
+        // uri = uri.replace(/\/\//g,'/')
         dialog.show(_args,()=>{
-            
+            text = (_data.constructor == String)?_data :_data.summary
             $('.jxmodal .text').html(text)
+            // const audioBlob = getAudio(uri);
+            // const uri = URL.createObjectURL(audioBlob);
+
             $('audio').attr('src',uri)
             $('audio')[0].play()
             
@@ -27,7 +31,6 @@
         
         })
         
-        // console.log(uri)
         
     }
     chat.print = function (){
@@ -62,9 +65,12 @@
     chat.delete = function (_index){
         var _id = '.llm-pane-'+_index
         $(_id).remove()
-        if ($(_id).children().length == 0){
+        if ($('.logs').children().length == 0){
             $('.logs').animate({'height':'42%'})
         }
+        $('.logs').children().each((_index)=>{
+            $('.logs').children()[_index].className = 'llm-pane-'+_index
+        })
     }
     chat.support = function(_index){
         // dialog.show({message:'Work in progress'})
@@ -80,6 +86,7 @@
         var height = $('.chat').height() -  $('.question-input').height() - 16 - 48
         $('.logs').animate({'height':height})
         var _index = $('.logs').children().length
+        var _index = $('.logs').attr('count') == null? 0 : parseInt($('.logs').attr('count'))
         var _q = $('textarea').val().trim()
         var uri = '{{system.context}}/api/medix/answer'
         //
@@ -103,6 +110,9 @@
                     var _data = JSON.parse(x.responseText)
                     $('.chat').attr('token',_data.token)
                     chat.answer.render(_data)
+                    $('.logs').attr('count', _index + 1)
+                    
+                    
                 }
             })
         }else{
@@ -118,45 +128,114 @@
         if (_q.length > 0){
             //
             // Add read, documents, delete buttons 
-            _delete = ['<div class="active" align="center" title="Delete Question" onclick="chat.delete(',_index,')"><i class="fa-solid fa-trash"></i></div>']
-            var _html = ['<div class="llm-pane-',_index,'"> <div class="border-round border question-frame"><div><i class="fa-solid fa-user fa-2x"></i></div><div class="question">',_q,'</div>',_delete.join(''),'</div> <div class="answer-frame">  </div></div>']
-            _html = _html.join('')
+            _rmclick = $('<div class="active" align="center" title="Delete Question"><i class="fa-solid fa-trash"></i></div>').on('click',function(){
+                var _parent = $(this).parent ()
+                $($(_parent).parent()).remove()
+                if ($('.logs').children().length == 0){
+                    $('.logs').animate({'height':'42%'})
+                }
+            })
+            _pane = $('<div></div>').attr('class','llm-pane-'+_index)
+            _qframe = $('<div></div>').attr('class','border-round border question-frame')
+            _qframe.append( $('<div><i class="fa-solid fa-user fa-2x"></i></div>'),$('<div class="question">'+_q+'</div>'), $(_rmclick) )
 
-            $('.logs').append(_html)
+            _aframe = $('<div class="answer-frame"></div>')
+
+            $(_pane).append(_qframe,_aframe)
+            
+            $('.logs').append(_pane)
             $('textarea').val('')
+
         }
     }
     chat.answer  = {}
-    chat.answer.render = function (_answer){
+    chat.answer.render = function (data){
         var _index = $('.answer-frame').length - 1
-        if (_answer == null){
+        // _id = '.llm-pane-'+_index+' '
+        if (data == null){
             var _html = ['<div class="answer border-round border"><div class="answer-status"><i class="fa-solid fa-cog fa-spin fa-2x" style="color:gray"></i></div></div>']
             _html =$( _html.join(''))
 
             $($('.answer-frame')[_index]).append(_html)
         }else{
-            _action = ['<div class="active" align="center" title="read out" onclick="chat.read(',_index,')"><i class="fa-solid fa-volume-high"></i></div>']
-            _action.push('<div class="active" align="center" title="supporting documents" onclick="chat.support(',_index,')"><i class="fa-solid fa-file"></i></div>')
+            // _action = ['<div class="active" align="center" title="read out" onclick="chat.read("',data.answer+'","'+data.stream,'")"><i class="fa-solid fa-volume-high"></i></div>']
+            _readclick = $('<div class="active" align="center" title="read out"> <i class="fa-solid fa-volume-high"></i></div>').attr('data', JSON.stringify(data)).on('click',function(){
+                var _data = JSON.parse( $(   this).attr('data'))
+                
+                chat.read(_data.answer,_data.stream)
+            })
+            
+            
+            _suppclick = $('<div class="active" align="center" title="supporting documents" ><i class="fa-solid fa-file"></i></div>').attr('_index',_index).on('click',function(){
+                var _index = parseInt($(this).attr('_index'))
+                chat.support(_index)
+            })
+
+            _expandclick = $('<div class="active" align="center" title="detailed answer"><i class="fa-solid fa-plus"></i></div>').attr('data', JSON.stringify(data)).attr('_index',_index).on('click',function (){
+                //
+                // Expand or life up
+                var _child = $(this).children()[0]
+                var _stat =  $(_child).attr('class')
+                var _index= parseInt($(this).attr('_index'))
+                $(_child).remove()
+                var _detail = $('.llm-pane-'+_index+' .llm-detail')
+                if (_stat.match(/.*fa-plus$/ig)){
+                    $(this).attr('title','collpase detail')
+                    $(this).append('<i class="fa-solid fa-minus"></i>')
+                    $(_detail).slideDown()
+                }else{
+                    $(this).attr('title','expand for detail')
+                    $(this).append('<i class="fa-solid fa-plus"></i>')
+                    $(_detail).slideUp()
+                }
+                //
+                //
+                
+            })
+            
+            _buttons = $('<div class="border-left"></div>')
+            if (data.answer.constructor == String){
+                $(_buttons).append(_readclick,_suppclick )
+            }else{
+                $(_buttons).append(_readclick,_expandclick, _suppclick )
+            }
+
+            // _action.push('<div class="active" align="center" title="supporting documents" onclick="chat.support(',_index,')"><i class="fa-solid fa-file"></i></div>')
 
             var _div = $('.answer')[_index]
 
-            var _html = ['<div class="llm-answer">',_answer.answer,'</div><div class="border-left">',_action.join(''), '</div>']
+            // var _html = ['<div class="llm-answer">',data.answer,'</div><div class="border-left">',_action.join(''), '</div>']
             
-            _html = $( _html.join(''))
-            $(_div).append(_html)
-            // $(_div).attr('data',_answer)
-            _div.data = _answer
+            var text = (data.answer.constructor == String)?data.answer: data.answer.summary
+            _html = $('<div class="llm-answer"></div>').html(text) //(data.answer)
+            if (data.answer.answer) {
+                _html.append( $('<div class="llm-detail"></div>').html('<br><div class="bold border-bottom">Details</div><br>'+data.answer.answer))
+            }
+            // _html.append(_buttons)
+            
+            // _html = $( _html.join(''))
+            
+            $(_div).append(_html,_buttons)
+            // $('.llm-pane-'+_index+' .llm-detail').slideUp()
+            _div.data = data
             
             $('.answer-status').html('<i class="fa-solid fa-user-doctor fa-2x" style="color:#4682B4"></i>')
+                                //
+            
+            
+
         }
         //
         
         
     }
-    $(document).ready(()=>{
+    $(document).ready(function(){
         $('.logs').animate({'height':'42%'})
     })
 </script>
+<style>
+    .llm-detail {display:none}
+</style>
 <div class="chat border-round border">
     <div align="right" style="background-color: #f3f3f3;" class="border-round-top-left border-round-top-right">
         <div class="active" onclick="chat.print()" title="Print conversation" style="justify-self: right; width:100px" align="center"><i class="fa-solid fa-print"></i></div>