holochain / elemental-chat-ui

A Vue.js + Vuetify + Vuex web app for Elemental Chat DNA.

elemental-chat-ui

License:

Vue based user interface for elemental-chat DNA

For dev testing:

1. Install these as per their READMEs:
   • holochain
   • hc
   • elemental-chat DNA
2. Now you can fire everything up with a few commmands:

General setup:

1. install the deps: yarn install
2. enter into nix-shell: nix-shell
3. setup one of the following environments:

holochain environment:

1. In a terminal window, install and configure the happs for 2 agents: yarn hc:gen-agents 2a. Thereafter, in the same window, run the dna for agent 1: yarn hc:run-agent-1 2b. Optionally, in a second window run the dna for agent 2: yarn hc:run-agent-2 3a. After the command from step 2 completes, serve the UI for agent 1: yarn serve:hc-agent-1 3b. Optionally, in the corresponding terminal for agent 2, serve the UI for agent 2: yarn serve:hc-agent-2

holo host (self-hosted) environment:

1. In a terminal window, install and configure the happs for the host agent: yarn hc-host:gen-agent
2. Thereafter, in the same window, run the dna for the host agent: yarn hc-host:run
3. After the command from step 2 completes, serve the UI for the host agent: yarn serve:self-hosted

holo hosting web environment:

1. In a terminal window, spin up your the holo-dev-server- a binary of combined Envoy-Chaperone development servers: yarn run:holo
   • If this is your first time running the server, you will first need to install and unwrap the binary and necessary happs. To do so, run: yarn fetch:resources
   • NB: When using this dev binary, you will connect to chaperone and envoy, but circumvent the resolvers to assign a host.
2. In a new terminal window, serve the UI for the host agent in the same terminal window: yarn serve:holo

4. When you're done and you want to clean up all holochain databases that hc created in /tmp, run one of the following depending on your prior context:

• holochain: yarn clear:hc && yarn clear:lair
• holo host (self-hosted): yarn clear:hc && yarn clear:lair
• holo-hosted web user: yarn clear:hc-holo

Other environment variables

VUE_APP_HIDE_ADD_CHANNEL

Setting this to VUE_APP_HIDE_ADD_CHANNEL=true before running a serve or build command will hide the "add channel" button in the ui.

How to run automated tests:

All tests

• yarn test

Unit tests

• For the holochain environment yarn test:unit-hc
• For the holo environment yarn test:unit-holo

Integration tests

• For the holochain environment yarn test:integration-hc
• For the holo environment yarn test:integration-holo

Build:

For holochain context:

yarn run build-holochain

For self-hosted context:

yarn run build-self-hosted

For production holo-hosted context:

yarn run build-holo-hosted

For development holo-hosted context:

yarn run build-holo-dev

For test holo-hosted context:

build-holo-scale-test

Self-hosted release:

1. Edit scripts/release-builds.sh for correct DNA id
2. Run: scripts/release-builds.sh
3. Create release on github and upload created .zip artifacts
4. Edit release URL value in holo-nixpkgs and create branch
5. Test on holoport after hydra builds

Publish Maintenance page

To replace the EC UI with a maintenance page, you first have to setup the wrangler cli (which requires cloudflare access). Then run

yarn install
yarn publish:maintenance-page

Contribute

Holochain is an open source project. We welcome all sorts of participation and are actively working on increasing surface area to accept it. Please see our contributing guidelines for our general practices and protocols on participating in the community, as well as specific expectations around things like code formatting, testing practices, continuous integration, etc.

• Connect with us on our forum

License

Copyright (C) 2020, Holochain Foundation

This program is free software: you can redistribute it and/or modify it under the terms of the license provided in the LICENSE file (CAL-1.0). This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

elemental-chat-ui's Issues

Zome 'profile' not found

I checked out the repos:

• https://github.com/holochain/elemental-chat
• https://github.com/holochain/elemental-chat-ui

both on develop branches. Followed instructions to get up and running on my mac.

$ hc generate -a elemental-chat-test ../elemental-chat/elemental-chat.dna.gz

hc-admin: Creating 1 conductors with same settings
hc-admin: Config ConductorConfig { environment_path: EnvironmentRootPath("/var/folders/sw/cnn7jks16_bdhkxk16yxsrj00000gn/T/r9_KurP8uKGTFj1N8Dt0U"), use_dangerous_test_keystore: false, signing_service_uri: None, encryption_service_uri: None, decryption_service_uri: None, dpki: None, keystore_path: Some("/var/folders/sw/cnn7jks16_bdhkxk16yxsrj00000gn/T/r9_KurP8uKGTFj1N8Dt0U/keystore"), passphrase_service: None, admin_interfaces: None, network: None }
hc-admin: Created directory at: /var/folders/sw/cnn7jks16_bdhkxk16yxsrj00000gn/T/r9_KurP8uKGTFj1N8Dt0U Keep this path to rerun the same setup
hc-admin: Created config at /var/folders/sw/cnn7jks16_bdhkxk16yxsrj00000gn/T/r9_KurP8uKGTFj1N8Dt0U/conductor-config.yaml
Mar 18 20:03:54.917 ERROR lair_keystore_client: error=IpcClientConnectError("/private/var/folders/sw/cnn7jks16_bdhkxk16yxsrj00000gn/T/r9_KurP8uKGTFj1N8Dt0U/keystore/socket", Os { code: 2, kind: NotFound, message: "No such file or directory" }) file="/Users/harlan/.cargo/registry/src/github.com-1ecc6299db9ec823/lair_keystore_client-0.0.1-alpha.10/src/lib.rs" line=42

Conductor ready.

Hm, there was a lair error in there, not sure it that's a real issue for me or not. Boldly proceeding:

$ hc run --last --ports 8888

Conductor ready.
hc-admin: Running conductor on admin port 59230
hc-admin: Attaching app port 8888
hc-admin: Connected successfully to a running holochain

Sweet, now we go to the browser. The UI loads, at least this much of it:

But in our server console we now see an error:

Mar 18 20:13:12.842 ERROR holochain_websocket::task_dispatch_incoming: error=Custom { kind: Other, error: SendError(WebsocketMessage::Close { close: WebsocketClosed { code: 1001, reason: "" } }) }
FATAL PANIC PanicInfo {
    payload: Any,
    message: Some(
        TODO: DnaError(ZomeNotFound("Zome \'profile\' not found")),
    ),
    location: Location {
        file: "/Users/harlan/code/holochain/crates/holochain/src/core/ribosome.rs",
        line: 336,
        col: 14,
    },
}
Well, this is embarrassing.

holochain had a problem and crashed. To help us diagnose the problem you can send us a crash report.

We have generated a report file at "/var/folders/sw/cnn7jks16_bdhkxk16yxsrj00000gn/T/report-e088df95-e28d-44fd-9a31-579d3785752e.toml". Submit an issue or email with the subject of "holochain Crash Report" and include the report as an attachment.

And in the toml file in question:

name = 'holochain'
operating_system = 'unix:OSX'
crate_version = '0.0.100'
explanation = '''
Panic occurred in file '.../holochain/crates/holochain/src/core/ribosome.rs' at line 336
'''
cause = '''TODO: DnaError(ZomeNotFound("Zome \'profile\' not found"))'''
method = 'Panic'
backtrace = '''

   0: 0x10a55f6f8 - std::sys_common::backtrace::__rust_end_short_backtrace::h9a7e5cc6475b496b
                at /rustc/cb75ad5db02783e8b0222fee363c5f63f7e2cf5b/library/std/src/sys_common/backtrace.rs:141
   1: 0x10a561a5a - rust_begin_unwind
                at /rustc/cb75ad5db02783e8b0222fee363c5f63f7e2cf5b/library/std/src/panicking.rs:493
   2: 0x10a5e2a2f - core::panicking::panic_fmt::h65997884a2662b8c
                at /rustc/cb75ad5db02783e8b0222fee363c5f63f7e2cf5b/library/core/src/panicking.rs:92
   3: 0x10a5e2935 - core::option::expect_none_failed::h5e793a721927d8b0
                at /rustc/cb75ad5db02783e8b0222fee363c5f63f7e2cf5b/library/core/src/option.rs:1268
   4: 0x108fa9fbd - <core::future::from_generator::GenFuture<T> as core::future::future::Future>::poll::ha834eb5e3758109d
   5: 0x108fa6c91 - <core::future::from_generator::GenFuture<T> as core::future::future::Future>::poll::ha4b5d2efcb684945
   6: 0x108f57deb - <core::future::from_generator::GenFuture<T> as core::future::future::Future>::poll::h124e697f997a7a12
   7: 0x1094993f0 - <core::future::from_generator::GenFuture<T> as core::future::future::Future>::poll::h5c3e4aed1d855f6c
   8: 0x109499364 - <core::future::from_generator::GenFuture<T> as core::future::future::Future>::poll::h5c3e4aed1d855f6c
   9: 0x1094b89b9 - <core::future::from_generator::GenFuture<T> as core::future::future::Future>::poll::he3cdcbf9eb71913e
  10: 0x1094ac5d0 - <core::future::from_generator::GenFuture<T> as core::future::future::Future>::poll::hc5284bcc310c49d8
  11: 0x108fccd95 - <core::future::from_generator::GenFuture<T> as core::future::future::Future>::poll::he4079c23e6690378
  12: 0x108ef65f7 - <std::panic::AssertUnwindSafe<F> as core::ops::function::FnOnce<()>>::call_once::h4f93c83ad088c4e8
  13: 0x1090ef9a9 - tokio::runtime::task::harness::Harness<T,S>::poll::h1a38f447c8af9d49
  14: 0x10a2a0e0f - std::thread::local::LocalKey<T>::with::ha33439f577c72912
  15: 0x10a2afd66 - tokio::runtime::thread_pool::worker::Context::run_task::hcf347c5c7a66e410
  16: 0x10a2af54e - tokio::runtime::thread_pool::worker::Context::run::h3d37c275f1d79e91
  17: 0x10a2a1b75 - tokio::macros::scoped_tls::ScopedKey<T>::set::h4a65cd2840a1b86b
  18: 0x10a2aefe5 - tokio::runtime::thread_pool::worker::run::h09caf211b60eab6d
  19: 0x10a2aa4bf - tokio::runtime::task::core::Core<T,S>::poll::h69bbc9a8096b42e8
  20: 0x10a293e76 - <std::panic::AssertUnwindSafe<F> as core::ops::function::FnOnce<()>>::call_once::hbac2317b2e59048b
  21: 0x10a2917e5 - tokio::runtime::task::harness::Harness<T,S>::poll::hc12b06d185d767fb
  22: 0x10a28d8ee - tokio::runtime::context::enter::h6308f27f402d67e4
  23: 0x10a2a08ef - std::sys_common::backtrace::__rust_begin_short_backtrace::ha371bc84161c427f
  24: 0x10a299d66 - core::ops::function::FnOnce::call_once{{vtable.shim}}::h05fb6be266b030ad
  25: 0x10a568f7d - <alloc::boxed::Box<F,A> as core::ops::function::FnOnce<Args>>::call_once::hefcce43be1a2cb05
                at /rustc/cb75ad5db02783e8b0222fee363c5f63f7e2cf5b/library/alloc/src/boxed.rs:1328
                 - <alloc::boxed::Box<F,A> as core::ops::function::FnOnce<Args>>::call_once::h43e2f2a139a82d40
                at /rustc/cb75ad5db02783e8b0222fee363c5f63f7e2cf5b/library/alloc/src/boxed.rs:1328
                 - std::sys::unix::thread::Thread::new::thread_start::he19012de44640be6
                at /rustc/cb75ad5db02783e8b0222fee363c5f63f7e2cf5b/library/std/src/sys/unix/thread.rs:71
  26: 0x7fff204aa950 - __pthread_start'''

Elemental chat UI won't work on Safari

Code is using method Blob.arrayBuffer() that is not supported on any Safari or older Chromes or Mozillas. Current market support for this method is 73%.

How to reproduce:

Open elemental chat on Safari, you will see in console an error:

Uncaught (in promise) TypeError: data.arrayBuffer is not a function

Bug: UI tries to load data before connected to HoloPort

Page tries to call listchannel before establishing AppWebSocket connection. Users then have to manually click the "check for new channels" button to get the list and start to receive periodic updates.

Feature request: make identity more source-chain driven

Two changes:

1. save agent_handle in source chain and retrieve it when starting chat
2. ensure that browser keeps locally stored agent_key and agent_handle synced with source chain

Why:
HoloPort owners access their HoloPorts remotely. This means they may use multiple browsers / devices to access chat. We should keep identity synced to demo to the world that Holochain can keep track of identity / provenance since that is critical to advance usages such as payments.

Current situation:

• Agent handle is saved in browser local storage only. Clearing cache or using a different browser/device prompts user to input a (new) agent handle
• If a new agent key is created on a HoloPort through one browser, the old agent key remains in the other browser unless browser cache is cleared. This is probably an edge case (we shouldn't be regularly creating new agent keys) but we should still keep things synced regardless.

Bug: Websocket connection occasionally closes

Sometimes the websocket connection closes and then messages won't be received / new messages can't be sent. Browser does not appear to recover from this. We should at least implement a notification to reload the page if the websocket connection dies (auto-reconnecting would be great too)

UI tries to auto-login using anonymous agent keys saved in browser memory somewhere

Browser sometimes stores an anonymous agent key somewhere (Not in indexDB)

On future logins chaperone tries to auto-signin with these anonymous keys, which results in a 404 error from resolver and no login window.

This will hopefully be fixed by the sign-up / sign-in enhancements that handle these errors properly. In meantime, you need to clear browser history / cookies / etc.