Fix various bindings to conversation IDs

components/ChatBox.js

@@ -539,7 +539,7 @@ class ChatBox extends React.Component {
 
   handleAttachmentIntent = (value) => {
     console.debug('attaching file:', value);
-    this.setState({ attachingFile: true });
+    this.setState({ attachingFile: true, loading: true });
     document.querySelector('#input-control-form input[type="file"]').click();
   };
 
@@ -587,7 +587,15 @@ class ChatBox extends React.Component {
       uploadSuccess: false,
     });
 
-    await this.props.uploadFile(this.state.file);
+    console.debug('Uploading:', this.state.file);
+
+    try {
+      await this.props.uploadDocument(this.state.file);
+    } catch (exception) {
+      console.debug('Upload error:', exception);
+    }
+
+    console.debug('Upload complete:', this.props.uploadedDocument);
   }
 
   isValidFileType (fileType) {
@@ -892,7 +900,7 @@ class ChatBox extends React.Component {
           loading={loading}>
           <Form.Input>
             {this.props.includeAttachments && (
-              <Button size="huge" left attached icon onClick={this.handleAttachmentIntent}>
+              <Button size="huge" left attached icon onClick={this.handleAttachmentIntent} loading={this.state.loading} style={{ borderBottomLeftRadius: '5px', borderTopLeftRadius: '5px' }}>
                 <input hidden type='file' name='file' accept={ALLOWED_UPLOAD_TYPES.join(',')} onChange={this.handleFileChange} />
                 <Icon name='paperclip' color='grey' style={{ color: this.state.isTextareaFocused ? 'grey' : 'grey', cursor: 'pointer' }} />
               </Button>

components/Clock.js

@@ -1,31 +1,53 @@
 'use strict';
 
+// Dependencies
 const React = require('react');
 
+// Semantic UI
 const {
-  Card
+  Header,
+  Segment
 } = require('semantic-ui-react');
 
+// Fabric Types
+const Actor = require('@fabric/core/types/actor');
+
 // TODO: reduce to a web component (no react)
 class Clock extends React.Component {
   constructor (props) {
     super(props);
 
+    // Settings
     this.creation = new Date();
     this.settings = Object.assign({
       clock: 0,
       debug: false,
       interval: 1000
     }, props);
 
+    // State
     this.heart = null;
-
+    this.style = this.props.style || {};
     this.state = {
       content: {
         clock: this.settings.clock,
         interval: this.settings.interval
       }
     };
+
+    // Fabric State
+    this._state = {
+      content: JSON.parse(JSON.stringify(this.state))
+    };
+
+    return this;
+  }
+
+  // TODO: reconcile with Fabric API
+  commit () {
+    return new Actor({
+      content: this._state.content
+    });
   }
 
   componentDidMount () {
@@ -35,32 +57,43 @@ class Clock extends React.Component {
   render () {
     const now = new Date();
     return (
-      <Card>
-        <Card.Content>
-          <Card.Header>{now.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric' })}</Card.Header>
-          {this.settings.debug ? (
-            <Card.Description>
-              <pre><code>{JSON.stringify(this.state, null, '  ')}</code></pre>
-            </Card.Description>
-          ) : null}
-        </Card.Content>
-      </Card>
+      <div compact style={this.style} {...this.props}>
+        <Header><code>{now.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric' })}</code></Header>
+        {this.settings.debug ? (
+          <div>
+            <pre><code>{JSON.stringify(this.state, null, '  ')}</code></pre>
+          </div>
+        ) : null}
+      </div>
     );
   }
 
   start () {
-    this.heart = setInterval(() => {
-      this.setState({
-        content: {
-          clock: this.state.content.clock + 1,
-          interval: this.settings.interval
-        }
-      });
-    }, this.settings.interval);
+    this._state.content.status = 'STARTING';
+    this.heart = setInterval(this.tick.bind(this), this.settings.interval);
+    this._state.content.status = 'STARTED';
+    this.commit();
   }
 
   stop () {
+    this._state.content.status = 'STOPPING';
     clearInterval(this.heart);
+    this._state.content.status = 'STOPPED';
+    this.commit();
+  }
+
+  tick () {
+    const parent = this.commit();
+    this.setState({
+      parent: parent.id,
+      content: {
+        clock: this.state.content.clock + 1,
+        interval: this.settings.interval
+      }
+    });
+
+    const tick = this.commit();
+    return { id: tick.id };
   }
 }
 

components/Dashboard.js

@@ -45,6 +45,7 @@ const {
   ENABLE_DOCUMENTS,
   ENABLE_FEEDBACK_BUTTON,
   ENABLE_NETWORK,
+  ENABLE_SOURCES,
   ENABLE_TASKS,
   ENABLE_UPLOADS,
   USER_HINT_TIME_MS,
@@ -63,6 +64,7 @@ const PeopleHome = require('./PeopleHome');
 const Conversations = require('./Conversations');
 const ConversationsList = require('./ConversationsList');
 const LibraryList = require('./LibraryList');
+const SourceHome = require('./SourceHome');
 const TaskHome = require('./TaskHome');
 const TaskView = require('./TaskView');
 const UploadHome = require('./UploadHome');
@@ -548,6 +550,12 @@ class Dashboard extends React.Component {
                   <p className='icon-label'>Network</p>
                 </Menu.Item>
               )}
+              {ENABLE_SOURCES && USER_IS_ADMIN && (
+                <Menu.Item as={Link} to='/sources' onClick={this.closeSidebars}>
+                  <Icon name='globe' size='large'/>
+                  <p className='icon-label'>Sources</p>
+                </Menu.Item>
+              )}
             </div>
             <div style={{ flexGrow: 1 }}></div> {/* Spacer */}
             <div>
@@ -669,6 +677,7 @@ class Dashboard extends React.Component {
                 <Route path="/people" element={<PeopleHome people={this.props.people} fetchPeople={this.props.fetchPeople} chat={this.props.chat} />} />
                 <Route path="/conversations/:id" element={<Room conversation={this.props.conversation} conversations={this.props.conversations} fetchConversations={this.props.fetchConversations} fetchConversation={this.props.fetchConversation} chat={this.props.chat} getMessages={this.props.getMessages} submitMessage={this.props.submitMessage} resetChat={this.props.resetChat} regenAnswer={this.props.regenAnswer} getMessageInformation={this.props.getMessageInformation} conversationTitleEdit={this.props.conversationTitleEdit} resetInformationSidebar={this.resetInformationSidebar} messageInfo={this.messageInfo} thumbsUp={this.thumbsUp} thumbsDown={this.thumbsDown} documentInfoSidebar={this.documentInfoSidebar} documents={this.props.documents} fetchDocument={this.props.fetchDocument} fetchDocumentSections={this.props.fetchDocumentSections} />} />
                 <Route path="/conversations" element={<Conversations conversations={this.props.conversations} fetchConversations={this.props.fetchConversations} getMessages={this.props.getMessages} submitMessage={this.props.submitMessage} onMessageSuccess={this.props.onMessageSuccess} chat={this.props.chat} resetChat={this.props.resetChat} regenAnswer={this.props.regenAnswer} auth={this.props.auth} getMessageInformation={this.props.getMessageInformation} resetInformationSidebar={this.resetInformationSidebar} messageInfo={this.messageInfo} thumbsUp={this.thumbsUp} thumbsDown={this.thumbsDown} />} />
+                <Route path="/sources" element={<SourceHome chat={this.props.chat} getMessages={this.props.getMessages} submitMessage={this.props.submitMessage} {...this.props} />} />
                 <Route path="/tasks" element={<TaskHome chat={this.props.chat} getMessages={this.props.getMessages} submitMessage={this.props.submitMessage} getMessageInformation={this.props.getMessageInformation} tasks={this.props.tasks} fetchTasks={this.props.fetchTasks} createTask={this.props.createTask} />} />
                 <Route path="/tasks/:id" element={<TaskView task={this.props.task} />} />
                 <Route path="/uploads" element={<UploadHome {...this.props} />} />

components/Home.js

@@ -5,6 +5,7 @@ const React = require('react');
 const { Link, useLocation } = require('react-router-dom');
 
 const {
+  Button,
   Card,
   Header,
   Segment
@@ -34,7 +35,6 @@ class Home extends React.Component {
 
   render () {
     const { conversations } = this.props;
-
     return (
       <sensemaker-home class='fade-in' style={{ marginRight: '1em' }}>
         <Segment fluid>
@@ -64,12 +64,17 @@ class Home extends React.Component {
           <Segment fluid>
             <h3>Recently</h3>
             <Card.Group fluid>
-              <Card as={Link} to={'/conversations/' + conversations[0].slug}>
-                <Card.Content>
-                  <Card.Header>{conversations[0].title}</Card.Header>
-                  <Card.Description style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>{conversations[0].summary}</Card.Description>
-                </Card.Content>
-              </Card>
+              {conversations.slice(0, 2).map((conversation, index) => (
+                <Card as={Link} to={'/conversations/' + conversation.slug}>
+                  <Card.Content>
+                    <Card.Header>{conversation.title}</Card.Header>
+                    <Card.Description style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>{conversation.summary}</Card.Description>
+                  </Card.Content>
+                  <Button.Group attached='bottom'>
+                    <Button as={Link} to={'/conversations/' + conversation.slug}>Resume &raquo;</Button>
+                  </Button.Group>
+                </Card>
+              ))}
               <Card as={Link} to='/conversations'>
                 <Card.Content>
                   <Card.Header>Explore History &raquo;</Card.Header>
@@ -79,7 +84,7 @@ class Home extends React.Component {
             </Card.Group>
           </Segment>
         ) : null}
-        <Clock />
+        <Clock style={{ position: 'fixed', bottom: '1em', right: '1em' }} />
       </sensemaker-home>
     );
   }

components/QueryForm.js

@@ -29,7 +29,7 @@ class Chat extends React.Component {
     this.fetchAnnouncement = this.fetchAnnouncement.bind(this);
   }
 
-  componentDidMount() {
+  componentDidMount () {
     $('#primary-query').focus();
     this.props.resetChat();
 
@@ -64,7 +64,6 @@ class Chat extends React.Component {
       }
 
       const announcement = await response.json();
-
       const today = new Date();
       const expirationDate = announcement.expiration_date ? new Date(announcement.expiration_date) : null;
       const createdAt = new Date(announcement.created_at);
@@ -90,9 +89,7 @@ class Chat extends React.Component {
   render () {
     const {announTitle, announBody} = this.state;
     const { messages } = this.props.chat;
-
     const VERTICAL_MARGIN = '2.5';
-
     const componentStyle = messages.length > 0 ? {
       display: 'absolute',
       left: 'calc(350px + 1em)',

components/SourceHome.js

@@ -0,0 +1,87 @@
+'use strict';
+
+// Dependencies
+const React = require('react');
+
+// Semantic UI
+const {
+  Header,
+  Segment
+} = require('semantic-ui-react');
+
+// Fabric Types
+const Actor = require('@fabric/core/types/actor');
+
+// Local Components
+const ChatBox = require('./ChatBox');
+
+// TODO: reduce to a web component (no react)
+class SourceHome extends React.Component {
+  constructor (props) {
+    super(props);
+
+    // Settings
+    this.creation = new Date();
+    this.settings = Object.assign({
+      clock: 0,
+      debug: false,
+      interval: 1000
+    }, props);
+
+    // State
+    this.heart = null;
+    this.style = this.props.style || {};
+    this.state = {
+      content: {
+        clock: this.settings.clock,
+        interval: this.settings.interval
+      }
+    };
+
+    // Fabric State
+    this._state = {
+      content: JSON.parse(JSON.stringify(this.state))
+    };
+
+    return this;
+  }
+
+  // TODO: reconcile with Fabric API
+  commit () {
+    return new Actor({
+      content: this._state.content
+    });
+  }
+
+  componentDidMount () {
+    this.start();
+  }
+
+  render () {
+    const now = new Date();
+    const { sources } = this.props;
+    return (
+      <Segment className='fade-in' loading={sources?.loading} style={{ maxHeight: '100%', height: '97vh' }}>
+        <Header as='h1'>Sources</Header>
+        <p>Remote data sources can be added to improve coverage.</p>
+        <ChatBox {...this.props} context={{ sources: sources?.current }} placeholder='Ask about these sources...' />
+      </Segment>
+    );
+  }
+
+  start () {
+    this._state.content.status = 'STARTING';
+    // this.heart = setInterval(this.tick.bind(this), this.settings.interval);
+    this._state.content.status = 'STARTED';
+    this.commit();
+  }
+
+  stop () {
+    this._state.content.status = 'STOPPING';
+    clearInterval(this.heart);
+    this._state.content.status = 'STOPPED';
+    this.commit();
+  }
+}
+
+module.exports = SourceHome;

components/TaskHome.js

@@ -47,22 +47,25 @@ class TaskHome extends React.Component {
     }
   }
 
-  handleTaskChange = (e) => {
-    console.debug('got change:', e.target.name, e.target.value);
-    //createTask({ task: e.target.value });
+  handleTaskChange = (e, { name, value }) => {
+    // console.debug('got change:', value);
+    this.setState({ [name]: value });
   }
 
   handleTaskSubmit = async (e) => {
     console.debug('got submit:', e.target.name, e.target.value);
-    const task = await this.props.createTask({ title: e.target.value });
+    this.setState({ loading: true })
+    const task = await this.props.createTask({ title: this.state.title });
     console.debug('task:', task);
+    this.setState({ title: '', loading: false });
+    this.props.fetchTasks();
   }
 
   render () {
     const { network, tasks } = this.props;
     // const { loading } = this.state;
     return (
-      <Segment loading={network?.loading} style={{ maxHeight: '100%', height: '97vh' }}>
+      <Segment className='fade-in' loading={network?.loading} style={{ maxHeight: '100%', height: '97vh' }}>
         <Header as='h1'>Task List</Header>
         <Card>
           <Card.Content>
@@ -76,10 +79,10 @@ class TaskHome extends React.Component {
         <Divider />
         <Header as='h2'>Local</Header>
         <Form fluid onSubmit={this.handleTaskSubmit}>
-          <Form.Group inline onChange={this.handleTaskChange}>
+          <Form.Group inline onChange={this.handleTaskChange} loading={this.state.loading}>
             <Form.Field>
               <label>Task</label>
-              <Input type='text' name='task' placeholder='e.g., do the laundry, etc.' />
+              <Input type='text' name='title' placeholder='e.g., do the laundry, etc.' />
             </Form.Field>
             <Form.Field>
               <Button primary content='Create Task' />